/* /Components/Layout/DataTablesLayout.razor.rz.scp.css */
/* Estilos propios de DataTablesLayout — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/supersheet/shell.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   SUPERSHEET REDESIGN — SHELL
   Excel/Sheets-style app shell for the dynamic tables editor at /datatables/*.

   Tokens come from theme.css (--ss-*, --rz-*). No hex literals here.
   The layout is a vertical 6-row grid + 3-column workspace, matching the
   design handoff (see docs/modules/dynamic-tables/redesign-handoff.md).

   Class prefix: .ds- (Dalatic Sheets) — chosen instead of .ss- because the
   legacy supersheet.css already uses .ss-* / .supersheet-container.
   That way the new shell can coexist with the legacy grid until Phase 3.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout takeover wrapper (legacy — only used if DataTables.razor opts back
   into the @layout DataTablesLayout path; kept here for reference). ── */
.ds-takeover[b-ka9kzvkgx3] {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}
/* /Components/Layout/MobileBottomNav.razor.rz.scp.css */
/* Barra de navegación inferior — móvil.

   Altura y z-index viven en theme.css (`--mnav-h`, y el hueco que se le reserva
   al contenido) porque los comparte con el botón del chat y con el relleno del
   cuerpo: si cada sitio pusiera su propio número, cualquier retoque dejaría la
   barra tapando la última fila de una lista. */

.mnav[b-oy9pp0uzw7] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Por debajo del botón del chat (999) y del cajón (1000/1001): el menú
       abierto tiene que tapar la barra, no convivir con ella. */
    z-index: 998;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    height: var(--mnav-h, 58px);
    /* El relleno de la zona segura SUMA al alto en vez de comerselo, de ahi
       `content-box`. El portal resuelve `box-sizing` por herencia (`*` hereda
       del ancestro), asi que las celdas lo recuperan explicitamente abajo: sin
       eso el relleno se sumaba tambien a cada celda y sobresalian 11 px por
       encima del borde superior de la barra. */
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box;
    background: var(--rz-base-background-color);
    border-top: 1px solid var(--rz-base-300);
    box-shadow: 0 -2px 12px rgb(0 0 0 / 6%);
}

.mnav-item[b-oy9pp0uzw7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* Objetivo táctil completo: el destino es toda la celda, no solo el texto. */
    box-sizing: border-box;
    height: 100%;
    padding: 6px 2px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 10.5px;
    line-height: 1.15;
    color: var(--rz-text-secondary-color);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mnav-item span[b-oy9pp0uzw7] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mnav-item[b-oy9pp0uzw7]  .rzi,
.mnav-item[b-oy9pp0uzw7]  .rz-icon {
    font-size: 21px;
    line-height: 1;
}

.mnav-item.is-current[b-oy9pp0uzw7] {
    color: var(--rz-primary);
    font-weight: 600;
}

/* ── Ranura del fichaje ──────────────────────────────────────────────────
   Elevada sobre la barra para que se lea como la acción principal y no como
   un destino más. El color dice el estado sin necesidad de abrir nada. */
.mnav-clock[b-oy9pp0uzw7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    box-sizing: border-box;
    height: 100%;
    padding: 0 2px 6px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 10.5px;
    line-height: 1.15;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mnav-clock-disc[b-oy9pp0uzw7] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-top: -16px;
    border-radius: 50%;
    color: #fff;
    background: var(--rz-primary);
    border: 3px solid var(--rz-base-background-color);
    box-shadow: 0 3px 10px rgb(0 0 0 / 18%);
}

.mnav-clock-disc[b-oy9pp0uzw7]  .rzi,
.mnav-clock-disc[b-oy9pp0uzw7]  .rz-icon {
    font-size: 22px;
    line-height: 1;
}

.mnav-clock-label[b-oy9pp0uzw7] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mnav-clock--open .mnav-clock-disc[b-oy9pp0uzw7] {
    background: var(--rz-success);
}

.mnav-clock--paused .mnav-clock-disc[b-oy9pp0uzw7] {
    background: var(--rz-warning);
}

.mnav-clock--closed .mnav-clock-disc[b-oy9pp0uzw7],
.mnav-clock--underreview .mnav-clock-disc[b-oy9pp0uzw7] {
    background: var(--rz-base-500);
}

/* ── Hoja de fichaje ─────────────────────────────────────────────────────
   Anclada abajo, encima de la barra que la abre. */
.mnav-sheet-backdrop[b-oy9pp0uzw7] {
    position: fixed;
    inset: 0;
    z-index: 1003;
    background: rgb(0 0 0 / 45%);
}

.mnav-sheet[b-oy9pp0uzw7] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1004;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
    background: var(--rz-base-background-color);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 28px rgb(0 0 0 / 22%);
}

.mnav-sheet-grip[b-oy9pp0uzw7] {
    width: 38px;
    height: 4px;
    margin: 0 auto 2px;
    border-radius: 2px;
    background: var(--rz-base-400);
}

.mnav-sheet-head[b-oy9pp0uzw7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.mnav-sheet-state[b-oy9pp0uzw7] {
    font-size: 15px;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.mnav-sheet-state--open[b-oy9pp0uzw7] {
    color: var(--rz-success);
}

.mnav-sheet-state--paused[b-oy9pp0uzw7] {
    color: var(--rz-warning);
}

.mnav-sheet-elapsed[b-oy9pp0uzw7] {
    font-size: 26px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--rz-text-title-color);
}

.mnav-sheet-note[b-oy9pp0uzw7] {
    margin: -6px 0 0;
    font-size: 12.5px;
    color: var(--rz-text-secondary-color);
}

.mnav-sheet-actions[b-oy9pp0uzw7] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mnav-sheet-actions[b-oy9pp0uzw7]  .mnav-sheet-btn {
    flex: 1 1 140px;
    min-height: 44px;
}

.mnav-sheet-link[b-oy9pp0uzw7] {
    align-self: center;
    padding: 4px;
    font-size: 12.5px;
    color: var(--rz-primary);
    text-decoration: none;
}
/* /Components/Pages/Academy/Admin/AdminCourseEditor.razor.rz.scp.css */
/* Estilos propios de AdminCourseEditor — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-admin.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ────────────── Course editor — details card ────────────── */
[b-k6zy6px0fy] .academy-admin-card {
    padding: 1.25rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
}

.academy-admin-form-grid[b-k6zy6px0fy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem 1rem;
    align-items: start;
}

.academy-admin-form-grid[b-k6zy6px0fy]  .academy-admin-form-wide {
    grid-column: 1 / -1;
}

.academy-admin-hint[b-k6zy6px0fy] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* ────────────── Course editor — content tree ────────────── */
.academy-admin-module[b-k6zy6px0fy] {
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
    overflow: hidden;
}

.academy-admin-module-header[b-k6zy6px0fy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: color-mix(in srgb, var(--rz-base-200) 55%, var(--rz-content-background-color));
    border-bottom: 1px solid var(--rz-base-300);
}

.academy-admin-reorder[b-k6zy6px0fy] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.academy-admin-reorder[b-k6zy6px0fy]  .rz-button {
    padding: 0;
    min-width: 1.4rem;
    height: 1.1rem;
    line-height: 1;
}

.academy-admin-row-actions[b-k6zy6px0fy] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    white-space: nowrap;
}

.academy-admin-lesson-row[b-k6zy6px0fy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem 0.45rem 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--rz-base-300) 55%, transparent);
}

.academy-admin-lesson-row:last-child[b-k6zy6px0fy] {
    border-bottom: none;
}

.academy-admin-lesson-title[b-k6zy6px0fy] {
    flex: 1;
    min-width: 0;
    color: var(--rz-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-admin-empty[b-k6zy6px0fy] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    border: 1px dashed var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
}

/* ────────────── Course editor — test strip (module footer / final exam) ────────────── */
.academy-admin-test-strip[b-k6zy6px0fy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-top: 1px dashed var(--rz-base-300);
    background: color-mix(in srgb, var(--rz-base-200) 30%, var(--rz-content-background-color));
}

.academy-admin-test-empty[b-k6zy6px0fy] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.academy-admin-final-exam .academy-admin-module-header[b-k6zy6px0fy] {
    border-bottom: none;
}


/* ══ De wwwroot/css/academy/academy.css (tanda 2 de la migración) ══ */

/* ────────────── Chips ────────────── */
.academy-chip[b-k6zy6px0fy] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academy-chip[b-k6zy6px0fy]  .rzi {
    font-size: 0.9rem;
}

.academy-chip-level[b-k6zy6px0fy] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
}

.academy-chip-prereq[b-k6zy6px0fy] {
    background: color-mix(in srgb, var(--rz-warning) 15%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 70%, var(--rz-text-color));
    align-self: flex-start;
}

.academy-chip-enrolled[b-k6zy6px0fy] {
    background: color-mix(in srgb, var(--rz-info) 12%, transparent);
    color: var(--rz-info);
}

.academy-chip-completed[b-k6zy6px0fy] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: var(--rz-success);
}

/* ────────────── Empty / error state ────────────── */
.academy-module-title[b-k6zy6px0fy] {
    font-weight: 600;
    color: var(--rz-text-title-color);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-module-count[b-k6zy6px0fy] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* ────────────── Lesson rows ────────────── */
.academy-lesson-list[b-k6zy6px0fy] {
    display: flex;
    flex-direction: column;
}

.academy-lesson-meta[b-k6zy6px0fy] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

.academy-lesson-meta[b-k6zy6px0fy]  .rzi {
    font-size: 0.95rem;
}
/* /Components/Pages/Academy/Admin/AdminCourses.razor.rz.scp.css */
/* Estilos propios de AdminCourses — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-admin.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   Academy module — instructor admin pages (/admin/academy, course editor).
   Token-only styling: every color comes from Radzen theme tokens (--rz-*) or
   a color-mix() over them, so the pages follow theme hot-reload automatically.
   Chips (.academy-chip-*) are shared with academy.css, loaded on every page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────── Courses grid page ────────────── */
[b-10z9wkyzql] .academy-admin-grid .academy-admin-slug {
    font-family: var(--rz-font-family-monospace, ui-monospace, monospace);
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

[b-10z9wkyzql] .academy-admin-grid .academy-admin-course-title {
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.academy-admin-count[b-10z9wkyzql] {
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
}


/* ══ De wwwroot/css/academy/academy.css (tanda 2 de la migración) ══ */

/* ────────────── Empty / error state ────────────── */
/* /Components/Pages/Academy/Admin/AdminLabs.razor.rz.scp.css */
/* Estilos propios de AdminLabs — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-admin.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   Academy module — instructor admin pages (/admin/academy, course editor).
   Token-only styling: every color comes from Radzen theme tokens (--rz-*) or
   a color-mix() over them, so the pages follow theme hot-reload automatically.
   Chips (.academy-chip-*) are shared with academy.css, loaded on every page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────── Courses grid page ────────────── */
[b-1ac73qd66b] .academy-admin-grid .academy-admin-slug {
    font-family: var(--rz-font-family-monospace, ui-monospace, monospace);
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

[b-1ac73qd66b] .academy-admin-grid .academy-admin-course-title {
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.academy-admin-count[b-1ac73qd66b] {
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
}

.academy-admin-hint[b-1ac73qd66b] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}


/* ══ De wwwroot/css/academy/academy-labs.css (tanda 2 de la migración) ══ */

/* ════════════════════════ Instructor grid ════════════════════════ */
.academy-lab-admin-note[b-1ac73qd66b] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--rz-base-300);
    border-left: 4px solid color-mix(in srgb, var(--rz-warning) 65%, var(--rz-base-300));
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
    color: var(--rz-text-secondary-color);
    font-size: 0.88rem;
}

.academy-lab-admin-note[b-1ac73qd66b]  .rzi {
    color: color-mix(in srgb, var(--rz-warning) 80%, var(--rz-text-color));
}

[b-1ac73qd66b] .academy-lab-form {
    padding: 1.25rem;
}

.academy-lab-current-lesson[b-1ac73qd66b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    color: var(--rz-text-secondary-color);
    font-size: 0.88rem;
}

.academy-lab-current-lesson[b-1ac73qd66b]  .rzi {
    color: var(--rz-primary);
    font-size: 1.05rem;
}

.academy-lab-form-active[b-1ac73qd66b] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.academy-lab-form-active[b-1ac73qd66b]  .rzi {
    color: var(--rz-info);
}

.academy-lab-form-active-label[b-1ac73qd66b] {
    display: block;
    color: var(--rz-text-color);
    font-weight: 600;
    font-size: 0.9rem;
}

.academy-lab-slug[b-1ac73qd66b] {
    display: block;
    margin-top: 0.15rem;
}

.academy-lab-lesson[b-1ac73qd66b] {
    color: var(--rz-text-secondary-color);
    font-size: 0.86rem;
}

.academy-lab-occupancy[b-1ac73qd66b] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.82rem;
    background: color-mix(in srgb, var(--rz-base-400) 18%, transparent);
    color: var(--rz-text-secondary-color);
}

.academy-lab-occupancy.full[b-1ac73qd66b] {
    background: color-mix(in srgb, var(--rz-warning) 16%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 75%, var(--rz-text-color));
}

/* Environments closed but not confirmed destroyed — the counter that costs money */
.academy-lab-pending[b-1ac73qd66b] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
}

.academy-lab-pending.alert[b-1ac73qd66b] {
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-danger) 14%, transparent);
    color: var(--rz-danger);
}

.academy-lab-pending.alert[b-1ac73qd66b]  .rzi {
    font-size: 1rem;
}


/* ══ De wwwroot/css/academy/academy.css (tanda 2 de la migración) ══ */

/* ────────────── Empty / error state ────────────── */
/* /Components/Pages/Academy/Admin/AdminLearnerAccess.razor.rz.scp.css */
/* Acceso por alumno. CSS aislado del componente: nada de esto puede escaparse a
   otras pantallas, que es exactamente el problema que la migración a CSS
   isolation vino a cerrar. Por eso los chips se definen aquí y no se toman
   prestados de una hoja global. */

/* Las clases sobre componentes Razor (RadzenText/RadzenIcon) no reciben el
   b-hash del aislamiento: se anclan al wrapper HTML .academy-learner-page (o al
   div de búsqueda) con ::deep para poder alcanzarlas. */
.academy-learner-page[b-smhsinm8di]  .academy-learner-intro {
    color: var(--rz-text-secondary-color);
    max-width: 62ch;
    margin: 0;
}

/* Caja de búsqueda, no formulario: una pastilla discreta del ancho que necesita
   un nombre, no del ancho de la pantalla. */
.academy-learner-search[b-smhsinm8di] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 26rem;
    padding: 0 0.75rem;
    height: 36px;
    background: var(--rz-base-100);
    border: 1px solid var(--rz-base-200);
    border-radius: 999px;
    transition: background-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out;
}

.academy-learner-search:focus-within[b-smhsinm8di] {
    background: var(--rz-base-background-color);
    box-shadow: 0 0 0 2px var(--rz-primary-lighter);
}

.academy-learner-search[b-smhsinm8di]  .academy-learner-search-icon {
    color: var(--rz-text-tertiary-color);
    font-size: 1.125rem;
}

.academy-learner-search-input[b-smhsinm8di] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--rz-text-color);
    font-size: 0.875rem;
    font-family: inherit;
}

.academy-learner-search-input[b-smhsinm8di]::placeholder {
    color: var(--rz-text-tertiary-color);
}

.academy-learner-hits[b-smhsinm8di] {
    display: flex;
    flex-direction: column;
    max-width: 26rem;
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

.academy-learner-hit[b-smhsinm8di] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-bottom: 1px solid var(--rz-base-100);
    background: transparent;
    text-align: start;
    cursor: pointer;
    font-family: inherit;
}

.academy-learner-hit:last-child[b-smhsinm8di] {
    border-bottom: 0;
}

.academy-learner-hit:hover[b-smhsinm8di] {
    background: var(--rz-base-100);
}

.academy-learner-hit-name[b-smhsinm8di] {
    font-size: 0.875rem;
    color: var(--rz-text-color);
}

.academy-learner-hit-mail[b-smhsinm8di] {
    color: var(--rz-text-tertiary-color);
    font-size: 0.75rem;
}

.academy-learner-page[b-smhsinm8di]  .academy-learner-empty {
    color: var(--rz-text-secondary-color);
    margin: 0;
}

.academy-learner-course[b-smhsinm8di] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--rz-base-200);
}

.academy-learner-course:last-child[b-smhsinm8di] {
    border-bottom: 0;
}

.academy-learner-course-main[b-smhsinm8di] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.academy-learner-course-title[b-smhsinm8di] {
    font-weight: 600;
    line-height: 1.3;
}

.academy-learner-course-slug[b-smhsinm8di] {
    font-family: var(--rz-code-font-family, ui-monospace, monospace);
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

/* Señales de la fila. Gris deliberado: informan, no reclaman atención — quien
   mira esta pantalla viene a marcar casillas, no a leer etiquetas. */
.academy-chip[b-smhsinm8di] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.academy-chip-none[b-smhsinm8di] {
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
}

.academy-chip-open[b-smhsinm8di] {
    background: var(--rz-base-100);
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/Academy/Admin/CourseDashboard.razor.rz.scp.css */
/* Estilos propios de CourseDashboard — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-admin.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.academy-admin-count[b-pxcndxioe1] {
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
}

/* ────────────── Course editor — details card ────────────── */
[b-pxcndxioe1] .academy-admin-card {
    padding: 1.25rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
}

.academy-admin-row-actions[b-pxcndxioe1] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    white-space: nowrap;
}

.academy-admin-empty[b-pxcndxioe1] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    border: 1px dashed var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
}

/* ────────────── Questions editor dialog ────────────── */
.academy-admin-question-list[b-pxcndxioe1] {
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
    overflow: hidden;
}

.academy-admin-question-row[b-pxcndxioe1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid color-mix(in srgb, var(--rz-base-300) 55%, transparent);
}

.academy-admin-question-row:last-child[b-pxcndxioe1] {
    border-bottom: none;
}

.academy-admin-question-statement[b-pxcndxioe1] {
    flex: 1;
    min-width: 0;
    color: var(--rz-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ────────────── KPI strip ────────────── */
.academy-kpi-strip[b-pxcndxioe1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.academy-kpi[b-pxcndxioe1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 76px;
    padding: 12px 16px;
    background: var(--rz-content-background-color);
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
}

.academy-kpi-label[b-pxcndxioe1] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rz-text-secondary-color);
}

.academy-kpi-num[b-pxcndxioe1] {
    font-size: 1.45rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-title-color);
}

.academy-instr-stat-sub[b-pxcndxioe1] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color, var(--rz-text-secondary-color));
}

/* ────────────── Course dashboard — funnel ────────────── */
.academy-instr-funnel[b-pxcndxioe1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.academy-instr-funnel-row[b-pxcndxioe1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.academy-instr-funnel-label[b-pxcndxioe1] {
    flex: 0 0 11rem;
    font-size: 0.85rem;
    color: var(--rz-text-color);
}

.academy-instr-funnel-bar[b-pxcndxioe1] {
    flex: 1;
    height: 14px;
    border-radius: 7px;
    background: var(--rz-base-300);
    overflow: hidden;
}

.academy-instr-funnel-fill[b-pxcndxioe1] {
    height: 100%;
    border-radius: 7px;
    background: var(--rz-primary);
    transition: width 0.3s ease;
}


/* ══ De wwwroot/css/academy/academy.css (tanda 2 de la migración) ══ */

/* ────────────── Chips ────────────── */
.academy-chip[b-pxcndxioe1] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academy-chip[b-pxcndxioe1]  .rzi {
    font-size: 0.9rem;
}

.academy-chip-level[b-pxcndxioe1] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
}

/* ────────────── Empty / error state ────────────── */
/* /Components/Pages/Academy/Admin/CourseFormDialog.razor.rz.scp.css */
/* Estilos propios de CourseFormDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-admin.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.academy-admin-hint[b-bfuhi0fsxy] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/Academy/Admin/CourseStudentRecord.razor.rz.scp.css */
/* Estilos propios de CourseStudentRecord — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-admin.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.academy-admin-count[b-gd47oo9w2r] {
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
}

/* ────────────── Course editor — details card ────────────── */
[b-gd47oo9w2r] .academy-admin-card {
    padding: 1.25rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
}

/* ────────────── Course editor — content tree ────────────── */
.academy-admin-module[b-gd47oo9w2r] {
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
    overflow: hidden;
}

.academy-admin-module-header[b-gd47oo9w2r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: color-mix(in srgb, var(--rz-base-200) 55%, var(--rz-content-background-color));
    border-bottom: 1px solid var(--rz-base-300);
}

.academy-admin-empty[b-gd47oo9w2r] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    border: 1px dashed var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
}

.academy-admin-final-exam .academy-admin-module-header[b-gd47oo9w2r] {
    border-bottom: none;
}

.academy-admin-question-index[b-gd47oo9w2r] {
    min-width: 1.6rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
}

.academy-admin-question-points[b-gd47oo9w2r] {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Instructor dashboards (students / record / analytics / sql-review / dashboard)
   TicketList kpi-strip pattern rebuilt on Radzen tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────── Shared: amber state chip (icon + text, never color alone) ────────────── */
.academy-chip-warning[b-gd47oo9w2r] {
    background: color-mix(in srgb, var(--rz-warning) 16%, var(--rz-content-background-color));
    color: color-mix(in srgb, var(--rz-warning-dark, var(--rz-warning)) 85%, var(--rz-text-color));
}

.academy-instr-student-email[b-gd47oo9w2r] {
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-instr-score-pass[b-gd47oo9w2r] {
    color: var(--rz-success);
    font-weight: 600;
}

.academy-instr-score-fail[b-gd47oo9w2r] {
    color: var(--rz-danger);
    font-weight: 600;
}

/* ────────────── Student record (drill-down) ────────────── */
.academy-instr-attempt-row[b-gd47oo9w2r] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--rz-base-300) 55%, transparent);
    flex-wrap: wrap;
}

.academy-instr-attempt-empty[b-gd47oo9w2r] {
    padding: 0.75rem 0.85rem;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
}

.academy-instr-attempt-duration[b-gd47oo9w2r] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
}

.academy-instr-breakdown[b-gd47oo9w2r] {
    padding: 0.5rem 0.85rem 0.85rem 2.6rem;
    overflow-x: auto;
    background: color-mix(in srgb, var(--rz-base-200) 30%, var(--rz-content-background-color));
    border-bottom: 1px solid color-mix(in srgb, var(--rz-base-300) 55%, transparent);
}

.academy-instr-breakdown-table[b-gd47oo9w2r] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.academy-instr-breakdown-table th[b-gd47oo9w2r] {
    text-align: left;
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rz-text-secondary-color);
    border-bottom: 1px solid var(--rz-base-300);
}

.academy-instr-breakdown-table td[b-gd47oo9w2r] {
    padding: 0.4rem 0.6rem;
    vertical-align: top;
    color: var(--rz-text-color);
    border-bottom: 1px solid color-mix(in srgb, var(--rz-base-300) 40%, transparent);
}

.academy-instr-break-statement[b-gd47oo9w2r] {
    max-width: 22rem;
}

.academy-instr-sql[b-gd47oo9w2r] {
    margin: 0;
    padding: 0.4rem 0.6rem;
    max-width: 26rem;
    max-height: 10rem;
    overflow: auto;
    font-family: var(--rz-font-family-monospace, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-base-200) 60%, var(--rz-content-background-color));
    color: var(--rz-text-color);
}


/* ══ De wwwroot/css/academy/academy.css (tanda 2 de la migración) ══ */

/* ────────────── Chips ────────────── */
.academy-chip[b-gd47oo9w2r] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academy-chip[b-gd47oo9w2r]  .rzi {
    font-size: 0.9rem;
}

.academy-chip-level[b-gd47oo9w2r] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
}

.academy-chip-prereq[b-gd47oo9w2r] {
    background: color-mix(in srgb, var(--rz-warning) 15%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 70%, var(--rz-text-color));
    align-self: flex-start;
}

.academy-chip-completed[b-gd47oo9w2r] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: var(--rz-success);
}

/* ────────────── Empty / error state ────────────── */
.academy-module-title[b-gd47oo9w2r] {
    font-weight: 600;
    color: var(--rz-text-title-color);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-module-count[b-gd47oo9w2r] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}
/* /Components/Pages/Academy/Admin/CourseStudents.razor.rz.scp.css */
/* Estilos propios de CourseStudents — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-admin.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   Academy module — instructor admin pages (/admin/academy, course editor).
   Token-only styling: every color comes from Radzen theme tokens (--rz-*) or
   a color-mix() over them, so the pages follow theme hot-reload automatically.
   Chips (.academy-chip-*) are shared with academy.css, loaded on every page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────── Courses grid page ────────────── */
[b-dcqs7f678h] .academy-admin-grid .academy-admin-slug {
    font-family: var(--rz-font-family-monospace, ui-monospace, monospace);
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

[b-dcqs7f678h] .academy-admin-grid .academy-admin-course-title {
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.academy-admin-count[b-dcqs7f678h] {
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Instructor dashboards (students / record / analytics / sql-review / dashboard)
   TicketList kpi-strip pattern rebuilt on Radzen tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────── Shared: amber state chip (icon + text, never color alone) ────────────── */
.academy-chip-warning[b-dcqs7f678h] {
    background: color-mix(in srgb, var(--rz-warning) 16%, var(--rz-content-background-color));
    color: color-mix(in srgb, var(--rz-warning-dark, var(--rz-warning)) 85%, var(--rz-text-color));
}

/* ────────────── KPI strip ────────────── */
.academy-kpi-strip[b-dcqs7f678h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.academy-kpi[b-dcqs7f678h] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 76px;
    padding: 12px 16px;
    background: var(--rz-content-background-color);
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
}

.academy-kpi-label[b-dcqs7f678h] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rz-text-secondary-color);
}

.academy-kpi-num[b-dcqs7f678h] {
    font-size: 1.45rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-title-color);
}

/* ────────────── Students grid ────────────── */
.academy-instr-student-cell[b-dcqs7f678h] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.academy-instr-student-email[b-dcqs7f678h] {
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-instr-progress[b-dcqs7f678h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.academy-instr-progress-bar[b-dcqs7f678h] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--rz-base-300);
    overflow: hidden;
}

.academy-instr-progress-fill[b-dcqs7f678h] {
    height: 100%;
    border-radius: 3px;
    background: var(--rz-primary);
}

.academy-instr-score-pass[b-dcqs7f678h] {
    color: var(--rz-success);
    font-weight: 600;
}

.academy-instr-score-fail[b-dcqs7f678h] {
    color: var(--rz-danger);
    font-weight: 600;
}

.academy-instr-csv-link[b-dcqs7f678h] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--rz-primary);
    border: 1px solid var(--rz-primary);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
}

.academy-instr-csv-link:hover[b-dcqs7f678h] {
    background: color-mix(in srgb, var(--rz-primary) 10%, var(--rz-content-background-color));
}


/* ══ De wwwroot/css/academy/academy.css (tanda 2 de la migración) ══ */

/* ────────────── Chips ────────────── */
.academy-chip[b-dcqs7f678h] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academy-chip[b-dcqs7f678h]  .rzi {
    font-size: 0.9rem;
}

.academy-chip-level[b-dcqs7f678h] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
}

.academy-chip-prereq[b-dcqs7f678h] {
    background: color-mix(in srgb, var(--rz-warning) 15%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 70%, var(--rz-text-color));
    align-self: flex-start;
}

.academy-chip-completed[b-dcqs7f678h] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: var(--rz-success);
}

/* ────────────── Empty / error state ────────────── */
/* /Components/Pages/Academy/Admin/LessonEditorDialog.razor.rz.scp.css */
/* Estilos propios de LessonEditorDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-admin.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.academy-admin-hint[b-1yio7zdki3] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* ────────────── Lesson editor dialog ────────────── */
[b-1yio7zdki3] .academy-admin-md-editor {
    width: 100%;
    font-family: var(--rz-font-family-monospace, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.85rem;
    line-height: 1.5;
    tab-size: 4;
}

.academy-admin-md-preview[b-1yio7zdki3] {
    min-height: 18rem;
    max-height: 24rem;
    overflow: auto;
    padding: 0.85rem 1rem;
    border: 1px dashed var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
    color: var(--rz-text-color);
}

.academy-admin-md-preview[b-1yio7zdki3]  pre {
    overflow-x: auto;
    padding: 0.6rem 0.8rem;
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-base-200) 60%, var(--rz-content-background-color));
}
/* /Components/Pages/Academy/Admin/ModuleFormDialog.razor.rz.scp.css */
/* Estilos propios de ModuleFormDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-admin.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.academy-admin-hint[b-36qf17y3m7] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/Academy/Admin/QuestionFormDialog.razor.rz.scp.css */
/* Estilos propios de QuestionFormDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-admin.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.academy-admin-hint[b-4uuxxaxj94] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* ────────────── Question form dialog — options editor ────────────── */
.academy-admin-options[b-4uuxxaxj94] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.academy-admin-option-row[b-4uuxxaxj94] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.academy-admin-option-radio[b-4uuxxaxj94] {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    accent-color: var(--rz-primary);
    cursor: pointer;
}

.academy-admin-option-fixed[b-4uuxxaxj94] {
    flex: 1;
    color: var(--rz-text-color);
}

/* Validation feedback: always icon + text, never color alone (accessibility). */
.academy-admin-validation[b-4uuxxaxj94] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--rz-danger);
}


/* ══ De wwwroot/css/academy/academy-playground.css (tanda 2 de la migración) ══ */

.academy-playground-meta[b-4uuxxaxj94] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    color: var(--rz-text-secondary-color);
    font-size: 0.8rem;
}

.academy-chip-truncated[b-4uuxxaxj94] {
    background: color-mix(in srgb, var(--rz-warning) 15%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 70%, var(--rz-text-color));
}

.academy-chip-spec-fixed[b-4uuxxaxj94] {
    background: color-mix(in srgb, var(--rz-success) 14%, transparent);
    color: var(--rz-success);
}

.academy-chip-spec-stale[b-4uuxxaxj94] {
    background: color-mix(in srgb, var(--rz-warning) 15%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 70%, var(--rz-text-color));
}

/* ────────────── Result grid (dynamic columns) ────────────── */
.academy-sql-result[b-4uuxxaxj94] {
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    overflow-x: auto;
    background: var(--rz-content-background-color);
}

.academy-sql-result[b-4uuxxaxj94]  .rz-data-grid {
    border: none;
}

.academy-sql-null[b-4uuxxaxj94] {
    color: var(--rz-text-disabled-color, var(--rz-text-secondary-color));
    font-style: italic;
}

.academy-sql-cell[b-4uuxxaxj94] {
    font-family: var(--rz-font-family-monospace, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ────────────── SQL error box (number + line + message) ────────────── */
.academy-sql-error[b-4uuxxaxj94] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.7rem 0.9rem;
    border-radius: var(--rz-border-radius);
    border: 1px solid color-mix(in srgb, var(--rz-danger) 35%, transparent);
    background: color-mix(in srgb, var(--rz-danger) 8%, transparent);
    color: var(--rz-text-color);
    font-size: 0.85rem;
}

.academy-sql-error[b-4uuxxaxj94]  .rzi {
    color: var(--rz-danger);
    font-size: 1.1rem;
}

.academy-sql-error code[b-4uuxxaxj94] {
    font-family: var(--rz-font-family-monospace, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.8rem;
    word-break: break-word;
}

/* ────────────── Instructor: SQL spec editor ────────────── */
.academy-admin-sql-spec[b-4uuxxaxj94] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px dashed var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-base-200) 30%, transparent);
}

[b-4uuxxaxj94] .academy-admin-sql-canonical textarea,
[b-4uuxxaxj94] textarea.academy-admin-sql-canonical {
    font-family: var(--rz-font-family-monospace, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.82rem;
    line-height: 1.45;
}

.academy-admin-sql-switches[b-4uuxxaxj94] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.academy-admin-sql-switch[b-4uuxxaxj94] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--rz-text-color);
}


/* ══ De wwwroot/css/academy/academy.css (tanda 2 de la migración) ══ */

/* ────────────── Chips ────────────── */
.academy-chip[b-4uuxxaxj94] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academy-chip[b-4uuxxaxj94]  .rzi {
    font-size: 0.9rem;
}
/* /Components/Pages/Academy/Admin/QuestionsEditorDialog.razor.rz.scp.css */
/* Estilos propios de QuestionsEditorDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-admin.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.academy-admin-reorder[b-bryq74ga5v] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.academy-admin-reorder[b-bryq74ga5v]  .rz-button {
    padding: 0;
    min-width: 1.4rem;
    height: 1.1rem;
    line-height: 1;
}

.academy-admin-row-actions[b-bryq74ga5v] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    white-space: nowrap;
}

.academy-admin-empty[b-bryq74ga5v] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    border: 1px dashed var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
}

/* ────────────── Questions editor dialog ────────────── */
.academy-admin-question-list[b-bryq74ga5v] {
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
    overflow: hidden;
}

.academy-admin-question-row[b-bryq74ga5v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid color-mix(in srgb, var(--rz-base-300) 55%, transparent);
}

.academy-admin-question-row:last-child[b-bryq74ga5v] {
    border-bottom: none;
}

.academy-admin-question-index[b-bryq74ga5v] {
    min-width: 1.6rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
}

.academy-admin-question-statement[b-bryq74ga5v] {
    flex: 1;
    min-width: 0;
    color: var(--rz-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-admin-question-points[b-bryq74ga5v] {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}


/* ══ De wwwroot/css/academy/academy.css (tanda 2 de la migración) ══ */

/* ────────────── Chips ────────────── */
.academy-chip[b-bryq74ga5v] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academy-chip[b-bryq74ga5v]  .rzi {
    font-size: 0.9rem;
}

.academy-chip-level[b-bryq74ga5v] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
}

.academy-chip-enrolled[b-bryq74ga5v] {
    background: color-mix(in srgb, var(--rz-info) 12%, transparent);
    color: var(--rz-info);
}
/* /Components/Pages/Academy/Admin/SqlReview.razor.rz.scp.css */
/* Estilos propios de SqlReview — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-admin.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   Academy module — instructor admin pages (/admin/academy, course editor).
   Token-only styling: every color comes from Radzen theme tokens (--rz-*) or
   a color-mix() over them, so the pages follow theme hot-reload automatically.
   Chips (.academy-chip-*) are shared with academy.css, loaded on every page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────── Courses grid page ────────────── */
[b-xsefnemb6z] .academy-admin-grid .academy-admin-slug {
    font-family: var(--rz-font-family-monospace, ui-monospace, monospace);
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

[b-xsefnemb6z] .academy-admin-grid .academy-admin-course-title {
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.academy-admin-count[b-xsefnemb6z] {
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
}

/* ────────────── Course editor — details card ────────────── */
[b-xsefnemb6z] .academy-admin-card {
    padding: 1.25rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
}

.academy-admin-empty[b-xsefnemb6z] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    border: 1px dashed var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
}

/* Validation feedback: always icon + text, never color alone (accessibility). */
.academy-admin-validation[b-xsefnemb6z] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--rz-danger);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Instructor dashboards (students / record / analytics / sql-review / dashboard)
   TicketList kpi-strip pattern rebuilt on Radzen tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────── Shared: amber state chip (icon + text, never color alone) ────────────── */
.academy-chip-warning[b-xsefnemb6z] {
    background: color-mix(in srgb, var(--rz-warning) 16%, var(--rz-content-background-color));
    color: color-mix(in srgb, var(--rz-warning-dark, var(--rz-warning)) 85%, var(--rz-text-color));
}

.academy-kpi-label[b-xsefnemb6z] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rz-text-secondary-color);
}

.academy-instr-sql[b-xsefnemb6z] {
    margin: 0;
    padding: 0.4rem 0.6rem;
    max-width: 26rem;
    max-height: 10rem;
    overflow: auto;
    font-family: var(--rz-font-family-monospace, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-base-200) 60%, var(--rz-content-background-color));
    color: var(--rz-text-color);
}

/* ────────────── SQL review (master-detail) ────────────── */
.academy-instr-review-layout[b-xsefnemb6z] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1100px) {
.academy-instr-review-layout[b-xsefnemb6z] {
        grid-template-columns: 1fr;
    }
}

.academy-instr-review-list[b-xsefnemb6z] {
    min-width: 0;
}

.academy-instr-review-detail[b-xsefnemb6z] {
    min-width: 0;
    position: sticky;
    top: 0.5rem;
}

.academy-instr-detail-meta[b-xsefnemb6z] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.academy-instr-sql-compare[b-xsefnemb6z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 720px) {
.academy-instr-sql-compare[b-xsefnemb6z] {
        grid-template-columns: 1fr;
    }
}

.academy-instr-sql-panel[b-xsefnemb6z] {
    max-width: none;
    max-height: 16rem;
    margin-top: 0.25rem;
}


/* ══ De wwwroot/css/academy/academy.css (tanda 2 de la migración) ══ */

/* ────────────── Chips ────────────── */
.academy-chip[b-xsefnemb6z] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academy-chip[b-xsefnemb6z]  .rzi {
    font-size: 0.9rem;
}

.academy-chip-prereq[b-xsefnemb6z] {
    background: color-mix(in srgb, var(--rz-warning) 15%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 70%, var(--rz-text-color));
    align-self: flex-start;
}

.academy-chip-completed[b-xsefnemb6z] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: var(--rz-success);
}

/* ────────────── Empty / error state ────────────── */
/* /Components/Pages/Academy/Admin/TestAnalytics.razor.rz.scp.css */
/* Estilos propios de TestAnalytics — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-admin.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.academy-admin-count[b-uptgd7quvq] {
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
}

/* ────────────── Course editor — details card ────────────── */
[b-uptgd7quvq] .academy-admin-card {
    padding: 1.25rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
}

/* ────────────── Course editor — content tree ────────────── */
.academy-admin-module[b-uptgd7quvq] {
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
    overflow: hidden;
}

.academy-admin-module-header[b-uptgd7quvq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: color-mix(in srgb, var(--rz-base-200) 55%, var(--rz-content-background-color));
    border-bottom: 1px solid var(--rz-base-300);
}

.academy-admin-empty[b-uptgd7quvq] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    border: 1px dashed var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
}

.academy-admin-final-exam .academy-admin-module-header[b-uptgd7quvq] {
    border-bottom: none;
}

.academy-admin-question-index[b-uptgd7quvq] {
    min-width: 1.6rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
}

.academy-admin-question-statement[b-uptgd7quvq] {
    flex: 1;
    min-width: 0;
    color: var(--rz-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-admin-question-points[b-uptgd7quvq] {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Instructor dashboards (students / record / analytics / sql-review / dashboard)
   TicketList kpi-strip pattern rebuilt on Radzen tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────── Shared: amber state chip (icon + text, never color alone) ────────────── */
.academy-chip-warning[b-uptgd7quvq] {
    background: color-mix(in srgb, var(--rz-warning) 16%, var(--rz-content-background-color));
    color: color-mix(in srgb, var(--rz-warning-dark, var(--rz-warning)) 85%, var(--rz-text-color));
}

.academy-kpi-label[b-uptgd7quvq] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rz-text-secondary-color);
}

.academy-kpi-num[b-uptgd7quvq] {
    font-size: 1.45rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-title-color);
}

/* ────────────── Analytics ────────────── */
.academy-instr-note[b-uptgd7quvq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    border: 1px dashed var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
}

.academy-instr-question-body[b-uptgd7quvq] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 0.85rem;
}

.academy-instr-stat[b-uptgd7quvq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}

.academy-instr-stat-sub[b-uptgd7quvq] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color, var(--rz-text-secondary-color));
}

.academy-instr-distractors[b-uptgd7quvq] {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 260px;
}

.academy-instr-distractor-row[b-uptgd7quvq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.academy-instr-distractor-text[b-uptgd7quvq] {
    flex: 0 1 40%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.83rem;
    color: var(--rz-text-color);
}

.academy-instr-distractor-bar[b-uptgd7quvq] {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--rz-base-300);
    overflow: hidden;
}

.academy-instr-distractor-fill[b-uptgd7quvq] {
    height: 100%;
    border-radius: 4px;
    background: color-mix(in srgb, var(--rz-text-secondary-color) 55%, transparent);
}

.academy-instr-distractor-fill.is-correct[b-uptgd7quvq] {
    background: var(--rz-success);
}


/* ══ De wwwroot/css/academy/academy.css (tanda 2 de la migración) ══ */

/* ────────────── Chips ────────────── */
.academy-chip[b-uptgd7quvq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academy-chip[b-uptgd7quvq]  .rzi {
    font-size: 0.9rem;
}

.academy-chip-level[b-uptgd7quvq] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
}

.academy-chip-prereq[b-uptgd7quvq] {
    background: color-mix(in srgb, var(--rz-warning) 15%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 70%, var(--rz-text-color));
    align-self: flex-start;
}

.academy-chip-enrolled[b-uptgd7quvq] {
    background: color-mix(in srgb, var(--rz-info) 12%, transparent);
    color: var(--rz-info);
}

/* ────────────── Empty / error state ────────────── */
/* /Components/Pages/Academy/Admin/TestFormDialog.razor.rz.scp.css */
/* Estilos propios de TestFormDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-admin.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.academy-admin-hint[b-9vmjr18n7p] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/Academy/CertificateCard.razor.rz.scp.css */
/* Estilos propios de CertificateCard — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-certificates.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   Academy — certificates (F6).
   1) Student certificate card (CourseDetail full / MyCourses dense).
   2) PUBLIC verification page /academy/certificates/verify/{code}.
   Token-only styling: every color derives from Radzen theme tokens (--rz-*)
   or a color-mix() over them, so both surfaces follow theme hot-reload.
   Chips (.academy-chip-*) are shared with academy.css, loaded on every page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────── Student certificate card ────────────── */
.academy-cert-card[b-rml27rk0qq] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--rz-success) 35%, var(--rz-base-300));
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-success) 5%, var(--rz-content-background-color));
}

.academy-cert-card-dense[b-rml27rk0qq] {
    margin-top: 0.75rem;
    padding: 0.7rem 0.85rem;
    gap: 0.6rem;
}

[b-rml27rk0qq] .academy-cert-icon {
    color: var(--rz-success);
    font-size: 1.75rem;
    flex-shrink: 0;
}

.academy-cert-card-dense[b-rml27rk0qq]  .academy-cert-icon {
    font-size: 1.35rem;
}

.academy-cert-body[b-rml27rk0qq] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.academy-cert-title-row[b-rml27rk0qq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.academy-cert-title[b-rml27rk0qq] {
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.academy-cert-card-dense .academy-cert-title[b-rml27rk0qq] {
    font-size: 0.85rem;
}

.academy-cert-meta[b-rml27rk0qq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Verification code — always monospace, selectable in one triple-click */
.academy-cert-code[b-rml27rk0qq] {
    display: inline-block;
    font-family: ui-monospace, "Cascadia Code", "Geist Mono", Consolas, monospace;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--rz-text-color);
    background: color-mix(in srgb, var(--rz-base-200) 70%, transparent);
    border: 1px solid var(--rz-base-300);
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
    -webkit-user-select: all;
    user-select: all;
}

.academy-cert-verify-row[b-rml27rk0qq] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

[b-rml27rk0qq] .academy-cert-verify-icon {
    font-size: 1rem;
    color: var(--rz-text-tertiary-color);
    flex-shrink: 0;
}

.academy-cert-verify-url[b-rml27rk0qq] {
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.academy-cert-actions[b-rml27rk0qq] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* PDF download — anchor styled as a primary pill (on-demand endpoint, new tab) */
.academy-cert-download[b-rml27rk0qq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--rz-border-radius);
    background: var(--rz-primary);
    color: var(--rz-on-primary, #fff);
    font-size: 0.83rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.12s ease;
}

.academy-cert-download:hover[b-rml27rk0qq] {
    filter: brightness(1.08);
    color: var(--rz-on-primary, #fff);
    text-decoration: none;
}

.academy-cert-download[b-rml27rk0qq]  .rzi {
    font-size: 1.05rem;
}

.academy-cert-card-dense .academy-cert-download[b-rml27rk0qq] {
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
}

@media (max-width: 640px) {
.academy-cert-card[b-rml27rk0qq] {
        flex-wrap: wrap;
    }

.academy-cert-actions[b-rml27rk0qq] {
        width: 100%;
        justify-content: flex-start;
    }
}


/* ══ De wwwroot/css/academy/academy.css (tanda 2 de la migración) ══ */

/* ────────────── Chips ────────────── */
.academy-chip[b-rml27rk0qq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academy-chip[b-rml27rk0qq]  .rzi {
    font-size: 0.9rem;
}

.academy-meta-item[b-rml27rk0qq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.academy-meta-item[b-rml27rk0qq]  .rzi {
    font-size: 1rem;
    color: var(--rz-text-tertiary-color);
}

.academy-chip-failed[b-rml27rk0qq] {
    background: color-mix(in srgb, var(--rz-danger) 12%, transparent);
    color: var(--rz-danger);
}

.academy-chip-pending[b-rml27rk0qq] {
    background: color-mix(in srgb, var(--rz-warning) 15%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 70%, var(--rz-text-color));
}
/* /Components/Pages/Academy/CourseCatalog.razor.rz.scp.css */
/* Estilos propios de CourseCatalog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   Academy module — catalog / my-courses / course-detail pages.
   Token-only styling: every color comes from Radzen theme tokens (--rz-*) or
   a color-mix() over them, so the pages follow theme hot-reload automatically.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────── Card grid (catalog + my courses) ────────────── */
.academy-grid[b-xb5yszstdw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

[b-xb5yszstdw] .academy-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

[b-xb5yszstdw] .academy-card:hover {
    border-color: color-mix(in srgb, var(--rz-primary) 40%, var(--rz-base-300));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--rz-primary) 10%, transparent);
}

[b-xb5yszstdw] .academy-card-title {
    margin: 0;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

[b-xb5yszstdw] .academy-card-desc {
    margin: 0;
    color: var(--rz-text-secondary-color);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ────────────── Chips ────────────── */
.academy-chip[b-xb5yszstdw] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academy-chip[b-xb5yszstdw]  .rzi {
    font-size: 0.9rem;
}

.academy-chip-level[b-xb5yszstdw] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
}

.academy-chip-prereq[b-xb5yszstdw] {
    background: color-mix(in srgb, var(--rz-warning) 15%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 70%, var(--rz-text-color));
    align-self: flex-start;
}

.academy-chip-enrolled[b-xb5yszstdw] {
    background: color-mix(in srgb, var(--rz-info) 12%, transparent);
    color: var(--rz-info);
}

.academy-chip-completed[b-xb5yszstdw] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: var(--rz-success);
}

/* ────────────── Meta rows (hours / modules / lessons) ────────────── */
.academy-meta[b-xb5yszstdw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.academy-meta-item[b-xb5yszstdw] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.academy-meta-item[b-xb5yszstdw]  .rzi {
    font-size: 1rem;
    color: var(--rz-text-tertiary-color);
}

/* ────────────── Empty / error state ────────────── */

/* ────────────── Rutas del catálogo ──────────────
   La cabecera es lo único que divide visualmente: la rejilla de tarjetas no cambia.
   Deliberadamente discreta — informa de a qué ruta pertenece el bloque, no compite
   con los títulos de los cursos. */
.academy-track + .academy-track[b-xb5yszstdw] {
    margin-top: 2.25rem;
}

.academy-track-title[b-xb5yszstdw] {
    margin: 0 0 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rz-base-300);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/Academy/CourseDetail.razor.rz.scp.css */
/* Estilos propios de CourseDetail — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ────────────── Chips ────────────── */
.academy-chip[b-wcop57phan] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academy-chip[b-wcop57phan]  .rzi {
    font-size: 0.9rem;
}

.academy-chip-level[b-wcop57phan] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
}

.academy-chip-prereq[b-wcop57phan] {
    background: color-mix(in srgb, var(--rz-warning) 15%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 70%, var(--rz-text-color));
    align-self: flex-start;
}

.academy-chip-completed[b-wcop57phan] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: var(--rz-success);
}

.academy-meta-item[b-wcop57phan] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.academy-meta-item[b-wcop57phan]  .rzi {
    font-size: 1rem;
    color: var(--rz-text-tertiary-color);
}

/* ────────────── Course detail ────────────── */
[b-wcop57phan] .academy-detail-header {
    padding: 1.25rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
}

.academy-module[b-wcop57phan] {
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
    overflow: hidden;
}

.academy-module-locked[b-wcop57phan] {
    opacity: 0.65;
}

.academy-module-header[b-wcop57phan] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    background: color-mix(in srgb, var(--rz-base-200) 55%, var(--rz-content-background-color));
    border-bottom: 1px solid var(--rz-base-300);
}

[b-wcop57phan] .academy-module-state-icon {
    color: var(--rz-text-tertiary-color);
    font-size: 1.2rem;
}

.academy-module-title[b-wcop57phan] {
    font-weight: 600;
    color: var(--rz-text-title-color);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-module-count[b-wcop57phan] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* ────────────── Module state badges ────────────── */
.academy-state-badge[b-wcop57phan] {
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.academy-state-locked[b-wcop57phan] {
    background: color-mix(in srgb, var(--rz-base-400) 20%, transparent);
    color: var(--rz-text-secondary-color);
}

.academy-state-available[b-wcop57phan] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
}

.academy-state-inprogress[b-wcop57phan] {
    background: color-mix(in srgb, var(--rz-info) 14%, transparent);
    color: var(--rz-info);
}

.academy-state-completed[b-wcop57phan] {
    background: color-mix(in srgb, var(--rz-success) 14%, transparent);
    color: var(--rz-success);
}

/* ────────────── Lesson rows ────────────── */
.academy-lesson-list[b-wcop57phan] {
    display: flex;
    flex-direction: column;
}

.academy-lesson-row[b-wcop57phan] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--rz-base-300) 55%, transparent);
}

.academy-lesson-row:last-child[b-wcop57phan] {
    border-bottom: none;
}

[b-wcop57phan] .academy-lesson-check {
    font-size: 1.1rem;
    color: var(--rz-text-tertiary-color);
}

[b-wcop57phan] .academy-lesson-check.completed {
    color: var(--rz-success);
}

.academy-lesson-title[b-wcop57phan] {
    flex: 1;
    min-width: 0;
    color: var(--rz-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-lesson-meta[b-wcop57phan] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

.academy-lesson-meta[b-wcop57phan]  .rzi {
    font-size: 0.95rem;
}

/* Lesson rows that link to the viewer (unlocked modules, enrolled user) */
.academy-lesson-link[b-wcop57phan] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.12s ease;
}

.academy-lesson-link:hover[b-wcop57phan] {
    background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
}

.academy-lesson-link[b-wcop57phan]  .academy-lesson-open {
    font-size: 1.05rem;
    color: var(--rz-text-tertiary-color);
    opacity: 0;
    transition: opacity 0.12s ease;
}

.academy-lesson-link:hover[b-wcop57phan]  .academy-lesson-open {
    opacity: 1;
    color: var(--rz-primary);
}

/* ────────────── Extra chips ────────────── */
.academy-chip-practice[b-wcop57phan] {
    background: color-mix(in srgb, var(--rz-info) 12%, transparent);
    color: var(--rz-info);
}

.academy-chip-exam[b-wcop57phan] {
    background: color-mix(in srgb, var(--rz-danger) 12%, transparent);
    color: var(--rz-danger);
}

.academy-chip-pending[b-wcop57phan] {
    background: color-mix(in srgb, var(--rz-warning) 15%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 70%, var(--rz-text-color));
}

.academy-chip-none[b-wcop57phan] {
    background: color-mix(in srgb, var(--rz-base-400) 18%, transparent);
    color: var(--rz-text-secondary-color);
}

/* ────────────── Course detail: module test row + final exam ────────────── */
.academy-test-row[b-wcop57phan] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.7rem 1.1rem;
    border-top: 1px dashed color-mix(in srgb, var(--rz-base-300) 75%, transparent);
    background: color-mix(in srgb, var(--rz-base-200) 30%, var(--rz-content-background-color));
}

.academy-course-page[b-wcop57phan]  .academy-test-row-icon

    color: var(--rz-primary);
    font-size: 1.15rem;
}

.academy-test-row-label[b-wcop57phan] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--rz-text-title-color);
}

.academy-test-row-action[b-wcop57phan] {
    margin-left: auto;
}

.academy-final-exam[b-wcop57phan] {
    border: 1px solid color-mix(in srgb, var(--rz-primary) 35%, var(--rz-base-300));
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
    overflow: hidden;
}

.academy-final-exam-body[b-wcop57phan] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
}

.academy-final-exam-locked[b-wcop57phan] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
}

.academy-final-exam-locked[b-wcop57phan]  .rzi {
    font-size: 1.05rem;
}

/* ────────────── Responsive ────────────── */
@media (max-width: 640px) {
.academy-test-row-action[b-wcop57phan] {
        margin-left: 0;
        width: 100%;
    }
}

/* ────────────── Course detail: discreet mark on the lesson row ────────────── */
.academy-lesson-lab-mark[b-wcop57phan] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: var(--rz-info);
}

.academy-lesson-lab-mark[b-wcop57phan]  .rzi {
    font-size: 0.95rem;
}

.academy-lesson-lab-mark-off[b-wcop57phan] {
    color: var(--rz-text-tertiary-color);
}
/* /Components/Pages/Academy/LabRunner.razor.rz.scp.css */
/* Estilos propios de LabRunner — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-labs.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   Academy labs — learner runner (/academy/lab/{slug}) + instructor grid
   (/admin/academy/labs).
   Token-only styling: every color comes from Radzen theme tokens (--rz-*) or a
   color-mix() over them, so both pages follow theme hot-reload automatically.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════ Runner — shell ════════════════════════ */
.academy-lab-page[b-pupfndqg0d] {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1rem 2.5rem;
    background: var(--rz-body-background-color);
    min-height: 100vh;
}

.academy-lab-container[b-pupfndqg0d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
    flex: 1;
}

/* ──────────── Lab header card ──────────── */
.academy-lab-header[b-pupfndqg0d] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.25rem;
}

.academy-lab-header-top[b-pupfndqg0d] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

[b-pupfndqg0d] .academy-lab-header-icon {
    color: var(--rz-primary);
    font-size: 1.6rem;
}

.academy-lab-page[b-pupfndqg0d]  .academy-lab-title

    margin: 0;
    color: var(--rz-text-title-color);
    font-weight: 600;
}

[b-pupfndqg0d] .academy-lab-description {
    margin: 0;
    color: var(--rz-text-secondary-color);
    white-space: pre-line;
}

.academy-lab-meta[b-pupfndqg0d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
}

/* ──────────── Permanent "this is disposable" notice ──────────── */
.academy-lab-ephemeral[b-pupfndqg0d] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--rz-warning) 45%, var(--rz-base-300));
    border-left-width: 4px;
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-warning) 8%, var(--rz-content-background-color));
    color: var(--rz-text-color);
    font-size: 0.9rem;
    line-height: 1.45;
}

.academy-lab-ephemeral[b-pupfndqg0d]  .rzi {
    color: color-mix(in srgb, var(--rz-warning) 80%, var(--rz-text-color));
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* ════════════════════════ Runner — running session ════════════════════════ */
.academy-lab-page[b-pupfndqg0d]  .academy-lab-running

    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.25rem;
}

.academy-lab-clock[b-pupfndqg0d] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.academy-lab-clock-label[b-pupfndqg0d] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--rz-text-secondary-color);
    font-size: 0.9rem;
}

.academy-lab-clock-actions[b-pupfndqg0d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Countdown (cosmetic — the server owns the deadline) */
.academy-lab-timer[b-pupfndqg0d] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.2;
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
    color: var(--rz-primary);
}

.academy-lab-timer[b-pupfndqg0d]  .rzi {
    font-size: 1.35rem;
}

.academy-lab-timer.warning[b-pupfndqg0d] {
    background: color-mix(in srgb, var(--rz-warning) 16%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 75%, var(--rz-text-color));
}

.academy-lab-timer.critical[b-pupfndqg0d] {
    background: color-mix(in srgb, var(--rz-danger) 14%, transparent);
    color: var(--rz-danger);
    animation: academy-lab-pulse-b-pupfndqg0d 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
.academy-lab-timer.critical[b-pupfndqg0d] {
        animation: none;
    }
}

.academy-lab-times[b-pupfndqg0d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
}

.academy-lab-server-note[b-pupfndqg0d] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--rz-text-secondary-color);
    font-size: 0.82rem;
}

.academy-lab-server-note[b-pupfndqg0d]  .rzi {
    font-size: 1rem;
}

.academy-lab-endingsoon[b-pupfndqg0d] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--rz-danger) 45%, var(--rz-base-300));
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-danger) 8%, var(--rz-content-background-color));
    color: var(--rz-danger);
    font-weight: 500;
    font-size: 0.9rem;
}

/* ════════════════════════ Runner — credentials ════════════════════════ */
[b-pupfndqg0d] .academy-lab-credentials {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem;
}

.academy-lab-credentials-header[b-pupfndqg0d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--rz-text-title-color);
}

.academy-lab-credentials-header[b-pupfndqg0d]  .rzi {
    color: var(--rz-primary);
}

.academy-lab-field[b-pupfndqg0d] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-background-color, var(--rz-content-background-color));
}

.academy-lab-field-label[b-pupfndqg0d] {
    min-width: 7.5rem;
    color: var(--rz-text-secondary-color);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.academy-lab-field-value[b-pupfndqg0d] {
    flex: 1;
    min-width: 0;
    color: var(--rz-text-color);
    overflow-wrap: anywhere;
}

.academy-lab-field-value.mono[b-pupfndqg0d] {
    font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
}

.academy-lab-credentials-actions[b-pupfndqg0d] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.35rem;
}

.academy-lab-portal-link[b-pupfndqg0d] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.12s ease;
}

.academy-lab-portal-link:hover[b-pupfndqg0d] {
    background: color-mix(in srgb, var(--rz-primary) 20%, transparent);
}

.academy-lab-credentials-hint[b-pupfndqg0d] {
    color: var(--rz-text-secondary-color);
    font-size: 0.82rem;
}

/* ════════════════════════ Runner — closed session / start panel ════════════════════════ */
[b-pupfndqg0d] .academy-lab-closed {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem;
}

.academy-lab-closed-header[b-pupfndqg0d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--rz-text-title-color);
}

.academy-lab-closed-header[b-pupfndqg0d]  .rzi {
    color: var(--rz-text-secondary-color);
    font-size: 1.4rem;
}

[b-pupfndqg0d] .academy-lab-closed-notice {
    margin: 0;
    color: var(--rz-text-secondary-color);
}

.academy-lab-failure[b-pupfndqg0d] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--rz-danger) 40%, var(--rz-base-300));
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-danger) 7%, var(--rz-content-background-color));
    color: var(--rz-text-color);
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.academy-lab-failure[b-pupfndqg0d]  .rzi {
    color: var(--rz-danger);
    flex-shrink: 0;
}

.academy-lab-start[b-pupfndqg0d] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.25rem;
}

.academy-lab-blocked[b-pupfndqg0d] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--rz-info) 40%, var(--rz-base-300));
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-info) 8%, var(--rz-content-background-color));
    color: var(--rz-text-color);
    font-size: 0.92rem;
}

.academy-lab-blocked[b-pupfndqg0d]  .rzi {
    color: var(--rz-info);
    flex-shrink: 0;
}

.academy-lab-start-actions[b-pupfndqg0d] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ════════════════════════ Small screens ════════════════════════ */
@media (max-width: 640px) {
.academy-lab-page[b-pupfndqg0d] {
        padding: 1rem 0.75rem 2rem;
    }

.academy-lab-clock-actions[b-pupfndqg0d] {
        margin-left: 0;
        width: 100%;
    }

.academy-lab-field[b-pupfndqg0d] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

.academy-lab-field-label[b-pupfndqg0d] {
        min-width: 100%;
    }
}

@keyframes academy-lab-pulse-b-pupfndqg0d {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.62; }
}


/* ══ De wwwroot/css/academy/academy.css (tanda 2 de la migración) ══ */

/* ────────────── Chips ────────────── */
.academy-chip[b-pupfndqg0d] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academy-chip[b-pupfndqg0d]  .rzi {
    font-size: 0.9rem;
}

.academy-chip-enrolled[b-pupfndqg0d] {
    background: color-mix(in srgb, var(--rz-info) 12%, transparent);
    color: var(--rz-info);
}

.academy-chip-completed[b-pupfndqg0d] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: var(--rz-success);
}

.academy-meta-item[b-pupfndqg0d] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.academy-meta-item[b-pupfndqg0d]  .rzi {
    font-size: 1rem;
    color: var(--rz-text-tertiary-color);
}

/* ────────────── Breadcrumb ────────────── */
.academy-lesson-breadcrumb[b-pupfndqg0d] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    margin-bottom: 1rem;
}

.academy-lesson-breadcrumb a[b-pupfndqg0d] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--rz-text-secondary-color);
    text-decoration: none;
    font-weight: 500;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-lesson-breadcrumb a:hover[b-pupfndqg0d] {
    color: var(--rz-primary);
    text-decoration: underline;
}

.academy-lesson-breadcrumb a[b-pupfndqg0d]  .rzi {
    font-size: 1rem;
}

[b-pupfndqg0d] .academy-lesson-breadcrumb-sep {
    font-size: 1rem;
    color: var(--rz-text-tertiary-color);
}

.academy-lesson-breadcrumb-current[b-pupfndqg0d] {
    color: var(--rz-text-color);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 18rem;
}

/* Screen-reader-only live region (countdown announcements) */
.academy-sr-only[b-pupfndqg0d] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.academy-chip-failed[b-pupfndqg0d] {
    background: color-mix(in srgb, var(--rz-danger) 12%, transparent);
    color: var(--rz-danger);
}

.academy-chip-pending[b-pupfndqg0d] {
    background: color-mix(in srgb, var(--rz-warning) 15%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 70%, var(--rz-text-color));
}
/* /Components/Pages/Academy/LessonViewer.razor.rz.scp.css */
/* Estilos propios de LessonViewer — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ────────────── Chips ────────────── */
.academy-chip[b-u6gi6lrm9e] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academy-chip[b-u6gi6lrm9e]  .rzi {
    font-size: 0.9rem;
}

.academy-chip-level[b-u6gi6lrm9e] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
}

.academy-chip-completed[b-u6gi6lrm9e] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: var(--rz-success);
}

.academy-meta-item[b-u6gi6lrm9e] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.academy-meta-item[b-u6gi6lrm9e]  .rzi {
    font-size: 1rem;
    color: var(--rz-text-tertiary-color);
}

/* ────────────── Empty / error state ────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   Lesson viewer (/academy/lesson/{id})
   ═══════════════════════════════════════════════════════════════════════════ */
.academy-lesson-page[b-u6gi6lrm9e] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 1.25rem 1.5rem 0;
    background: var(--rz-body-background-color);
}

/* Reading column */
.academy-lesson-container[b-u6gi6lrm9e] {
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
    flex: 1;
}

/* ────────────── Breadcrumb ────────────── */
.academy-lesson-breadcrumb[b-u6gi6lrm9e] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    margin-bottom: 1rem;
}

.academy-lesson-breadcrumb a[b-u6gi6lrm9e] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--rz-text-secondary-color);
    text-decoration: none;
    font-weight: 500;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-lesson-breadcrumb a:hover[b-u6gi6lrm9e] {
    color: var(--rz-primary);
    text-decoration: underline;
}

.academy-lesson-breadcrumb a[b-u6gi6lrm9e]  .rzi {
    font-size: 1rem;
}

[b-u6gi6lrm9e] .academy-lesson-breadcrumb-sep {
    font-size: 1rem;
    color: var(--rz-text-tertiary-color);
}

.academy-lesson-breadcrumb-module[b-u6gi6lrm9e] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14rem;
}

.academy-lesson-breadcrumb-current[b-u6gi6lrm9e] {
    color: var(--rz-text-color);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 18rem;
}

/* ────────────── Header ────────────── */
.academy-lesson-header[b-u6gi6lrm9e] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--rz-base-300);
}

.academy-lesson-header-meta[b-u6gi6lrm9e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.academy-lesson-progress[b-u6gi6lrm9e] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.academy-lesson-progress-label[b-u6gi6lrm9e] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* ────────────── Rendered body ────────────── */
.academy-lesson-body[b-u6gi6lrm9e] {
    color: var(--rz-text-color);
    line-height: 1.7;
    font-size: 0.95rem;
    padding-bottom: 1.5rem;
    overflow-wrap: break-word;
}

.academy-lesson-body[b-u6gi6lrm9e]  h1,
.academy-lesson-body[b-u6gi6lrm9e]  h2,
.academy-lesson-body[b-u6gi6lrm9e]  h3,
.academy-lesson-body[b-u6gi6lrm9e]  h4 {
    color: var(--rz-text-title-color);
    font-weight: 600;
    margin: 1.4em 0 0.5em;
    line-height: 1.3;
}

.academy-lesson-body[b-u6gi6lrm9e]  h1 { font-size: 1.5rem; }

.academy-lesson-body[b-u6gi6lrm9e]  h2 { font-size: 1.25rem; }

.academy-lesson-body[b-u6gi6lrm9e]  h3 { font-size: 1.1rem; }

.academy-lesson-body[b-u6gi6lrm9e]  h4 { font-size: 1rem; }

.academy-lesson-body[b-u6gi6lrm9e]  p {
    margin: 0 0 0.9em;
}

.academy-lesson-body[b-u6gi6lrm9e]  a {
    color: var(--rz-primary);
}

.academy-lesson-body[b-u6gi6lrm9e]  ul,
.academy-lesson-body[b-u6gi6lrm9e]  ol {
    margin: 0 0 0.9em;
    padding-left: 1.5rem;
}

.academy-lesson-body[b-u6gi6lrm9e]  li {
    margin-bottom: 0.25em;
}

.academy-lesson-body[b-u6gi6lrm9e]  blockquote {
    margin: 0 0 0.9em;
    padding: 0.4rem 1rem;
    border-left: 3px solid color-mix(in srgb, var(--rz-primary) 55%, transparent);
    background: color-mix(in srgb, var(--rz-base-200) 45%, transparent);
    border-radius: 0 var(--rz-border-radius) var(--rz-border-radius) 0;
    color: var(--rz-text-secondary-color);
}

.academy-lesson-body[b-u6gi6lrm9e]  img {
    max-width: 100%;
    height: auto;
    border-radius: var(--rz-border-radius);
}

.academy-lesson-body[b-u6gi6lrm9e]  hr {
    border: none;
    border-top: 1px solid var(--rz-base-300);
    margin: 1.5rem 0;
}

/* Code — inline + blocks (blocks scroll horizontally, never the page) */
.academy-lesson-body[b-u6gi6lrm9e]  code {
    font-family: ui-monospace, "Cascadia Code", "Geist Mono", Consolas, monospace;
    font-size: 0.85em;
    background: color-mix(in srgb, var(--rz-base-200) 70%, transparent);
    border-radius: 4px;
    padding: 0.1em 0.35em;
}

.academy-lesson-body[b-u6gi6lrm9e]  pre {
    background: color-mix(in srgb, var(--rz-base-200) 60%, var(--rz-content-background-color));
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    padding: 0.85rem 1rem;
    overflow-x: auto;
    margin: 0 0 1em;
}

.academy-lesson-body[b-u6gi6lrm9e]  pre code {
    background: transparent;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1.55;
}

/* Mermaid blocks — plain canvas, centered SVG, still scrollable when wide */
.academy-lesson-body pre.mermaid[b-u6gi6lrm9e] {
    display: flex;
    justify-content: center;
    background: transparent;
    border: none;
    overflow-x: auto;
}

.academy-lesson-body pre.mermaid[b-u6gi6lrm9e]  svg {
    max-width: 100%;
    height: auto;
}

/* Tables — pipe tables from Markdig; scroll inside their own box */
.academy-lesson-body[b-u6gi6lrm9e]  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 1em;
}

.academy-lesson-body[b-u6gi6lrm9e]  th,
.academy-lesson-body[b-u6gi6lrm9e]  td {
    border: 1px solid var(--rz-base-300);
    padding: 0.45rem 0.75rem;
    text-align: left;
}

.academy-lesson-body[b-u6gi6lrm9e]  th {
    background: color-mix(in srgb, var(--rz-base-200) 55%, var(--rz-content-background-color));
    color: var(--rz-text-title-color);
    font-weight: 600;
}

/* ────────────── Video lessons ────────────── */
[b-u6gi6lrm9e] .academy-lesson-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--rz-border-radius);
    overflow: hidden;
    background: var(--rz-base-900);
    margin-bottom: 1.5rem;
}

[b-u6gi6lrm9e] .academy-lesson-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

[b-u6gi6lrm9e] .academy-lesson-video-file {
    width: 100%;
    max-height: 70vh;
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-900);
    margin-bottom: 1.5rem;
}

/* Invalid video URL notice */
.academy-lesson-body-notice[b-u6gi6lrm9e] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    border: 1px dashed color-mix(in srgb, var(--rz-warning) 55%, var(--rz-base-300));
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-warning) 8%, transparent);
    color: var(--rz-text-secondary-color);
    margin-bottom: 1.5rem;
}

.academy-lesson-body-notice[b-u6gi6lrm9e]  .rzi {
    color: var(--rz-warning);
    font-size: 1.4rem;
}

/* ────────────── Sticky bottom action bar ────────────── */
.academy-lesson-footer[b-u6gi6lrm9e] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: auto -1.5rem 0;
    border-top: 1px solid var(--rz-base-300);
    background: color-mix(in srgb, var(--rz-content-background-color) 94%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.academy-lesson-footer-inner[b-u6gi6lrm9e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
    padding: 0.7rem 1.5rem;
}

.academy-lesson-footer-badge[b-u6gi6lrm9e] {
    font-size: 0.85rem;
    padding: 0.35rem 0.9rem;
}

@media (max-width: 640px) {
.academy-lesson-page[b-u6gi6lrm9e] {
        padding: 1rem 1rem 0;
    }

.academy-lesson-footer[b-u6gi6lrm9e] {
        margin: auto -1rem 0;
    }

.academy-lesson-footer-inner[b-u6gi6lrm9e] {
        padding: 0.6rem 1rem;
    }

.academy-lesson-progress[b-u6gi6lrm9e] {
        margin-left: 0;
    }
}

.academy-chip-none[b-u6gi6lrm9e] {
    background: color-mix(in srgb, var(--rz-base-400) 18%, transparent);
    color: var(--rz-text-secondary-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Lab entry point — the third kind of activity, next to lesson and test.
   Two surfaces:
     · the lesson viewer, where the learner actually starts the environment
       (.academy-lesson-lab), styled as a sibling of .academy-final-exam so the
       three activities read as one family;
     · the course detail, where it is only a mark on the lesson row
       (.academy-lesson-lab-mark) — information, never a call to action.
   Token-only colors (theme hot-reload safe); every state ships icon + text, so
   nothing is signalled by color alone.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────── Lesson viewer: entry point card ────────────── */
.academy-lesson-lab[b-u6gi6lrm9e] {
    border: 1px solid color-mix(in srgb, var(--rz-info) 35%, var(--rz-base-300));
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

/* Switched off: present and explained, never hidden — hence muted, not absent. */
.academy-lesson-lab-off[b-u6gi6lrm9e] {
    border-color: var(--rz-base-300);
    background: color-mix(in srgb, var(--rz-base-200) 35%, var(--rz-content-background-color));
}

.academy-lesson-lab-header[b-u6gi6lrm9e] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.7rem 1.1rem;
    border-bottom: 1px dashed color-mix(in srgb, var(--rz-base-300) 75%, transparent);
    background: color-mix(in srgb, var(--rz-base-200) 30%, var(--rz-content-background-color));
}

[b-u6gi6lrm9e] .academy-lesson-lab-icon {
    color: var(--rz-info);
    font-size: 1.15rem;
}

.academy-lesson-lab-off[b-u6gi6lrm9e]  .academy-lesson-lab-icon {
    color: var(--rz-text-tertiary-color);
}

.academy-lesson-lab-label[b-u6gi6lrm9e] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--rz-text-title-color);
}

.academy-lesson-lab-body[b-u6gi6lrm9e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.9rem 1.1rem;
}

.academy-lesson-lab-title[b-u6gi6lrm9e] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.academy-lesson-lab-meta[b-u6gi6lrm9e] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.academy-lesson-lab-hint[b-u6gi6lrm9e] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--rz-text-secondary-color);
}

.academy-lesson-lab-action[b-u6gi6lrm9e] {
    margin-top: 0.35rem;
}

/* Chip for "you already have one running" */
.academy-chip-running[b-u6gi6lrm9e] {
    background: color-mix(in srgb, var(--rz-info) 14%, transparent);
    color: var(--rz-info);
}
/* /Components/Pages/Academy/MyCourses.razor.rz.scp.css */
/* Estilos propios de MyCourses — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   Academy module — catalog / my-courses / course-detail pages.
   Token-only styling: every color comes from Radzen theme tokens (--rz-*) or
   a color-mix() over them, so the pages follow theme hot-reload automatically.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────── Card grid (catalog + my courses) ────────────── */
.academy-grid[b-q1c9hy64i9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

[b-q1c9hy64i9] .academy-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

[b-q1c9hy64i9] .academy-card:hover {
    border-color: color-mix(in srgb, var(--rz-primary) 40%, var(--rz-base-300));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--rz-primary) 10%, transparent);
}

[b-q1c9hy64i9] .academy-card-title {
    margin: 0;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

/* ────────────── Chips ────────────── */
.academy-chip[b-q1c9hy64i9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academy-chip[b-q1c9hy64i9]  .rzi {
    font-size: 0.9rem;
}

.academy-chip-level[b-q1c9hy64i9] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
}

.academy-chip-completed[b-q1c9hy64i9] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: var(--rz-success);
}

/* ────────────── Meta rows (hours / modules / lessons) ────────────── */
.academy-meta[b-q1c9hy64i9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.academy-meta-item[b-q1c9hy64i9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.academy-meta-item[b-q1c9hy64i9]  .rzi {
    font-size: 1rem;
    color: var(--rz-text-tertiary-color);
}

/* ────────────── Empty / error state ────────────── */
/* /Components/Pages/Academy/Playground.razor.rz.scp.css */
/* Estilos propios de Playground — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-playground.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   Academy SQL playground — /academy/playground page, the SQL question panel of
   the test runner and the instructor SQL-spec editor of the question dialog.
   Token-only styling: every color comes from Radzen theme tokens (--rz-*) or a
   color-mix() over them, so it follows theme hot-reload automatically.
   Shares chips / feedback boxes with css/academy/academy.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────── Page layout: editor + schema, stacked on mobile ────────────── */
.academy-playground[b-292wvhgjm6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 900px) {
.academy-playground[b-292wvhgjm6] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.academy-playground-main[b-292wvhgjm6] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

/* ────────────── Monaco host ────────────── */
.academy-sql-editor[b-292wvhgjm6] {
    height: 240px;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

.academy-sql-editor:focus-within[b-292wvhgjm6] {
    border-color: color-mix(in srgb, var(--rz-primary) 55%, var(--rz-base-300));
}

.academy-playground .academy-sql-editor[b-292wvhgjm6] {
    height: 320px;
}

/* Fallback while Monaco is loading (or if it failed): keep the box visible. */
.academy-sql-editor:empty[b-292wvhgjm6]::before {
    content: "";
    display: block;
    height: 100%;
    background: color-mix(in srgb, var(--rz-base-200) 50%, transparent);
}

/* ────────────── Toolbar under the editor ────────────── */
.academy-playground-toolbar[b-292wvhgjm6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.academy-playground-meta[b-292wvhgjm6] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    color: var(--rz-text-secondary-color);
    font-size: 0.8rem;
}

.academy-chip-truncated[b-292wvhgjm6] {
    background: color-mix(in srgb, var(--rz-warning) 15%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 70%, var(--rz-text-color));
}

/* ────────────── Result grid (dynamic columns) ────────────── */
.academy-sql-result[b-292wvhgjm6] {
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    overflow-x: auto;
    background: var(--rz-content-background-color);
}

.academy-sql-result[b-292wvhgjm6]  .rz-data-grid {
    border: none;
}

.academy-sql-coltype[b-292wvhgjm6] {
    display: block;
    font-weight: 400;
    font-size: 0.68rem;
    color: var(--rz-text-secondary-color);
    text-transform: lowercase;
}

.academy-sql-null[b-292wvhgjm6] {
    color: var(--rz-text-disabled-color, var(--rz-text-secondary-color));
    font-style: italic;
}

.academy-sql-cell[b-292wvhgjm6] {
    font-family: var(--rz-font-family-monospace, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ────────────── SQL error box (number + line + message) ────────────── */
.academy-sql-error[b-292wvhgjm6] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.7rem 0.9rem;
    border-radius: var(--rz-border-radius);
    border: 1px solid color-mix(in srgb, var(--rz-danger) 35%, transparent);
    background: color-mix(in srgb, var(--rz-danger) 8%, transparent);
    color: var(--rz-text-color);
    font-size: 0.85rem;
}

.academy-sql-error[b-292wvhgjm6]  .rzi {
    color: var(--rz-danger);
    font-size: 1.1rem;
}

.academy-sql-error code[b-292wvhgjm6] {
    font-family: var(--rz-font-family-monospace, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.8rem;
    word-break: break-word;
}

/* Friendly (non-error) notice: rate limit / sandbox not configured. */
.academy-sql-notice[b-292wvhgjm6] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.7rem 0.9rem;
    border-radius: var(--rz-border-radius);
    border: 1px solid color-mix(in srgb, var(--rz-info) 30%, transparent);
    background: color-mix(in srgb, var(--rz-info) 8%, transparent);
    color: var(--rz-text-color);
    font-size: 0.85rem;
}

.academy-sql-notice[b-292wvhgjm6]  .rzi {
    color: var(--rz-info);
    font-size: 1.1rem;
}

/* ────────────── Schema panel (collapsible) ────────────── */
.academy-sql-schema[b-292wvhgjm6] {
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
    overflow: hidden;
}

.academy-sql-schema-toggle[b-292wvhgjm6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: none;
    background: color-mix(in srgb, var(--rz-base-200) 55%, transparent);
    color: var(--rz-text-title-color);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
}

.academy-sql-schema-toggle[b-292wvhgjm6]  .rzi {
    font-size: 1.1rem;
    color: var(--rz-primary);
}

.academy-sql-schema-toggle[b-292wvhgjm6]  .academy-sql-schema-caret {
    margin-left: auto;
    color: var(--rz-text-secondary-color);
    transition: transform 0.15s ease;
}

.academy-sql-schema-toggle[aria-expanded="true"][b-292wvhgjm6]  .academy-sql-schema-caret {
    transform: rotate(180deg);
}

.academy-sql-schema-body[b-292wvhgjm6] {
    max-height: 420px;
    overflow-y: auto;
    padding: 0.5rem 0.75rem 0.75rem;
}

.academy-sql-schema-table[b-292wvhgjm6] {
    margin-top: 0.5rem;
}

.academy-sql-schema-table summary[b-292wvhgjm6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-family: var(--rz-font-family-monospace, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
    padding: 0.2rem 0;
    list-style: none;
}

.academy-sql-schema-table summary[b-292wvhgjm6]::-webkit-details-marker {
    display: none;
}

.academy-sql-schema-table summary[b-292wvhgjm6]  .rzi {
    font-size: 0.95rem;
    color: var(--rz-secondary);
}

.academy-sql-schema-cols[b-292wvhgjm6] {
    margin: 0.15rem 0 0.3rem;
    padding-left: 1.4rem;
    list-style: none;
}

.academy-sql-schema-cols li[b-292wvhgjm6] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-family: var(--rz-font-family-monospace, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.75rem;
    color: var(--rz-text-color);
    padding: 0.1rem 0;
}

.academy-sql-schema-cols li span:last-child[b-292wvhgjm6] {
    color: var(--rz-text-secondary-color);
}


/* ══ De wwwroot/css/academy/academy.css (tanda 2 de la migración) ══ */

/* ────────────── Chips ────────────── */
.academy-chip[b-292wvhgjm6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academy-chip[b-292wvhgjm6]  .rzi {
    font-size: 0.9rem;
}

/* ────────────── Acceso desde cliente de escritorio ──────────────
   Vive dentro del panel lateral, debajo del esquema: es la misma idea
   —"esto es lo que hay al otro lado"— pero para conectarse de verdad. */
.academy-sql-desktop[b-292wvhgjm6] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rz-base-300);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.academy-sql-desktop-head[b-292wvhgjm6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color);
}

.academy-sql-desktop-intro[b-292wvhgjm6],
.academy-sql-desktop-note[b-292wvhgjm6] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--rz-text-tertiary-color);
}

/* Los datos de conexion se COPIAN a mano en el cliente, asi que se leen en
   monoespaciada y se pueden seleccionar de un golpe. */
.academy-sql-desktop-data[b-292wvhgjm6] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.75rem;
    margin: 0;
    padding: 0.625rem 0.75rem;
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
}

.academy-sql-desktop-data dt[b-292wvhgjm6] {
    font-size: 0.6875rem;
    color: var(--rz-text-tertiary-color);
    white-space: nowrap;
}

.academy-sql-desktop-data dd[b-292wvhgjm6] {
    margin: 0;
    font-family: var(--rz-code-font-family, ui-monospace, monospace);
    font-size: 0.75rem;
    color: var(--rz-text-color);
    overflow-wrap: anywhere;
    user-select: all;
}
/* /Components/Pages/Academy/TestRunner.razor.rz.scp.css */
/* Estilos propios de TestRunner — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-playground.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ────────────── Monaco host ────────────── */
.academy-sql-editor[b-288ji63i0g] {
    height: 240px;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

.academy-sql-editor:focus-within[b-288ji63i0g] {
    border-color: color-mix(in srgb, var(--rz-primary) 55%, var(--rz-base-300));
}

.academy-playground .academy-sql-editor[b-288ji63i0g] {
    height: 320px;
}

/* Fallback while Monaco is loading (or if it failed): keep the box visible. */
.academy-sql-editor:empty[b-288ji63i0g]::before {
    content: "";
    display: block;
    height: 100%;
    background: color-mix(in srgb, var(--rz-base-200) 50%, transparent);
}

.academy-playground-meta[b-288ji63i0g] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    color: var(--rz-text-secondary-color);
    font-size: 0.8rem;
}

.academy-chip-truncated[b-288ji63i0g] {
    background: color-mix(in srgb, var(--rz-warning) 15%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 70%, var(--rz-text-color));
}

.academy-chip-registered[b-288ji63i0g] {
    background: color-mix(in srgb, var(--rz-info) 12%, transparent);
    color: var(--rz-info);
}

.academy-chip-offline[b-288ji63i0g] {
    background: color-mix(in srgb, var(--rz-warning) 15%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 70%, var(--rz-text-color));
}

/* ────────────── Result grid (dynamic columns) ────────────── */
.academy-sql-result[b-288ji63i0g] {
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    overflow-x: auto;
    background: var(--rz-content-background-color);
}

.academy-sql-result[b-288ji63i0g]  .rz-data-grid {
    border: none;
}

.academy-sql-coltype[b-288ji63i0g] {
    display: block;
    font-weight: 400;
    font-size: 0.68rem;
    color: var(--rz-text-secondary-color);
    text-transform: lowercase;
}

.academy-sql-null[b-288ji63i0g] {
    color: var(--rz-text-disabled-color, var(--rz-text-secondary-color));
    font-style: italic;
}

.academy-sql-cell[b-288ji63i0g] {
    font-family: var(--rz-font-family-monospace, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ────────────── SQL error box (number + line + message) ────────────── */
.academy-sql-error[b-288ji63i0g] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.7rem 0.9rem;
    border-radius: var(--rz-border-radius);
    border: 1px solid color-mix(in srgb, var(--rz-danger) 35%, transparent);
    background: color-mix(in srgb, var(--rz-danger) 8%, transparent);
    color: var(--rz-text-color);
    font-size: 0.85rem;
}

.academy-sql-error[b-288ji63i0g]  .rzi {
    color: var(--rz-danger);
    font-size: 1.1rem;
}

.academy-sql-error code[b-288ji63i0g] {
    font-family: var(--rz-font-family-monospace, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.8rem;
    word-break: break-word;
}

/* Friendly (non-error) notice: rate limit / sandbox not configured. */
.academy-sql-notice[b-288ji63i0g] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.7rem 0.9rem;
    border-radius: var(--rz-border-radius);
    border: 1px solid color-mix(in srgb, var(--rz-info) 30%, transparent);
    background: color-mix(in srgb, var(--rz-info) 8%, transparent);
    color: var(--rz-text-color);
    font-size: 0.85rem;
}

.academy-sql-notice[b-288ji63i0g]  .rzi {
    color: var(--rz-info);
    font-size: 1.1rem;
}

/* ────────────── Schema panel (collapsible) ────────────── */
.academy-sql-schema[b-288ji63i0g] {
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
    overflow: hidden;
}

.academy-sql-schema-toggle[b-288ji63i0g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: none;
    background: color-mix(in srgb, var(--rz-base-200) 55%, transparent);
    color: var(--rz-text-title-color);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
}

.academy-sql-schema-toggle[b-288ji63i0g]  .rzi {
    font-size: 1.1rem;
    color: var(--rz-primary);
}

.academy-sql-schema-toggle[b-288ji63i0g]  .academy-sql-schema-caret {
    margin-left: auto;
    color: var(--rz-text-secondary-color);
    transition: transform 0.15s ease;
}

.academy-sql-schema-toggle[aria-expanded="true"][b-288ji63i0g]  .academy-sql-schema-caret {
    transform: rotate(180deg);
}

.academy-sql-schema-body[b-288ji63i0g] {
    max-height: 420px;
    overflow-y: auto;
    padding: 0.5rem 0.75rem 0.75rem;
}

.academy-sql-schema-table[b-288ji63i0g] {
    margin-top: 0.5rem;
}

.academy-sql-schema-table summary[b-288ji63i0g] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-family: var(--rz-font-family-monospace, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
    padding: 0.2rem 0;
    list-style: none;
}

.academy-sql-schema-table summary[b-288ji63i0g]::-webkit-details-marker {
    display: none;
}

.academy-sql-schema-table summary[b-288ji63i0g]  .rzi {
    font-size: 0.95rem;
    color: var(--rz-secondary);
}

.academy-sql-schema-cols[b-288ji63i0g] {
    margin: 0.15rem 0 0.3rem;
    padding-left: 1.4rem;
    list-style: none;
}

.academy-sql-schema-cols li[b-288ji63i0g] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-family: var(--rz-font-family-monospace, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.75rem;
    color: var(--rz-text-color);
    padding: 0.1rem 0;
}

.academy-sql-schema-cols li span:last-child[b-288ji63i0g] {
    color: var(--rz-text-secondary-color);
}

/* ────────────── Runner: SQL question panel ────────────── */
.academy-runner-sql[b-288ji63i0g] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.academy-runner-sql-actions[b-288ji63i0g] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Practice feedback: the (max 3) surplus rows of the student's OWN result. */
.academy-sql-extra-rows[b-288ji63i0g] {
    width: 100%;
    border-collapse: collapse;
}

.academy-sql-extra-rows td[b-288ji63i0g] {
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid var(--rz-base-200);
    white-space: nowrap;
}

.academy-sql-extra-rows tr:last-child td[b-288ji63i0g] {
    border-bottom: none;
}

/* Student's saved SQL shown in the post-submit review. */
.academy-sql-review-query[b-288ji63i0g] {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-base-200) 45%, transparent);
    font-family: var(--rz-font-family-monospace, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--rz-text-color);
    overflow-x: auto;
}


/* ══ De wwwroot/css/academy/academy.css (tanda 2 de la migración) ══ */

/* ────────────── Chips ────────────── */
.academy-chip[b-288ji63i0g] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academy-chip[b-288ji63i0g]  .rzi {
    font-size: 0.9rem;
}

.academy-chip-completed[b-288ji63i0g] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: var(--rz-success);
}

.academy-meta-item[b-288ji63i0g] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.academy-meta-item[b-288ji63i0g]  .rzi {
    font-size: 1rem;
    color: var(--rz-text-tertiary-color);
}

/* ────────────── Course detail ────────────── */
[b-288ji63i0g] .academy-detail-header {
    padding: 1.25rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
}

/* ────────────── Breadcrumb ────────────── */
.academy-lesson-breadcrumb[b-288ji63i0g] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    margin-bottom: 1rem;
}

.academy-lesson-breadcrumb a[b-288ji63i0g] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--rz-text-secondary-color);
    text-decoration: none;
    font-weight: 500;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-lesson-breadcrumb a:hover[b-288ji63i0g] {
    color: var(--rz-primary);
    text-decoration: underline;
}

.academy-lesson-breadcrumb a[b-288ji63i0g]  .rzi {
    font-size: 1rem;
}

[b-288ji63i0g] .academy-lesson-breadcrumb-sep {
    font-size: 1rem;
    color: var(--rz-text-tertiary-color);
}

.academy-lesson-breadcrumb-current[b-288ji63i0g] {
    color: var(--rz-text-color);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 18rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Test runner (/academy/test/{id}) + course-detail test rows — Phase 3.
   Token-only: colors always derive from --rz-* tokens (theme hot-reload safe).
   Feedback is never color-only: every state ships icon + text (accessibility).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────── Page scaffold ────────────── */
.academy-runner-page[b-288ji63i0g] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 1.25rem 1.5rem 2rem;
    background: var(--rz-body-background-color);
}

.academy-runner-container[b-288ji63i0g] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
    flex: 1;
}

/* Screen-reader-only live region (countdown announcements) */
.academy-sr-only[b-288ji63i0g] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ────────────── Extra chips ────────────── */
.academy-chip-practice[b-288ji63i0g] {
    background: color-mix(in srgb, var(--rz-info) 12%, transparent);
    color: var(--rz-info);
}

.academy-chip-exam[b-288ji63i0g] {
    background: color-mix(in srgb, var(--rz-danger) 12%, transparent);
    color: var(--rz-danger);
}

.academy-chip-failed[b-288ji63i0g] {
    background: color-mix(in srgb, var(--rz-danger) 12%, transparent);
    color: var(--rz-danger);
}

.academy-chip-points[b-288ji63i0g] {
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
    color: var(--rz-primary);
}

.academy-chip-unanswered[b-288ji63i0g] {
    background: color-mix(in srgb, var(--rz-warning) 15%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 70%, var(--rz-text-color));
}

/* ────────────── Intro card ────────────── */
.academy-runner-intro[b-288ji63i0g] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

.academy-runner-intro-header[b-288ji63i0g] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.academy-runner-page[b-288ji63i0g]  .academy-runner-intro-icon

    color: var(--rz-primary);
    font-size: 1.6rem;
}

.academy-runner-intro-meta[b-288ji63i0g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
}

.academy-runner-intro-actions[b-288ji63i0g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Notice boxes: exam server-time warning / expired notice */
.academy-runner-warning[b-288ji63i0g] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--rz-warning) 45%, var(--rz-base-300));
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-warning) 10%, transparent);
    color: var(--rz-text-color);
    font-size: 0.875rem;
}

.academy-runner-warning[b-288ji63i0g]  .rzi {
    color: color-mix(in srgb, var(--rz-warning) 80%, var(--rz-text-color));
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* Block reason (cannot start) */
.academy-runner-blocked[b-288ji63i0g] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border: 1px dashed var(--rz-base-400);
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-base-200) 55%, transparent);
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
}

.academy-runner-blocked[b-288ji63i0g]  .rzi {
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* ────────────── Attempt history ────────────── */
.academy-runner-history[b-288ji63i0g] {
    border-top: 1px solid var(--rz-base-300);
    padding-top: 0.9rem;
}

.academy-runner-history-row[b-288ji63i0g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--rz-base-300) 55%, transparent);
    font-size: 0.85rem;
}

.academy-runner-history-row:last-child[b-288ji63i0g] {
    border-bottom: none;
}

.academy-runner-history-date[b-288ji63i0g] {
    color: var(--rz-text-secondary-color);
    min-width: 8.5rem;
}

.academy-runner-history-status[b-288ji63i0g] {
    color: var(--rz-text-color);
    font-weight: 500;
}

.academy-runner-history-score[b-288ji63i0g] {
    font-weight: 700;
    color: var(--rz-text-title-color);
}

/* ────────────── Running header ────────────── */
.academy-runner-header[b-288ji63i0g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.academy-runner-header-title[b-288ji63i0g] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex-wrap: wrap;
}

.academy-runner-header-side[b-288ji63i0g] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-left: auto;
}

/* Subtle exam autosave indicator */
.academy-runner-save-indicator[b-288ji63i0g] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    min-width: 6rem;
    justify-content: flex-end;
}

.academy-runner-save-indicator[b-288ji63i0g]  .rzi {
    font-size: 1rem;
}

/* Countdown (cosmetic — server enforces the deadline) */
.academy-runner-timer[b-288ji63i0g] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.95rem;
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
    color: var(--rz-primary);
}

.academy-runner-timer[b-288ji63i0g]  .rzi {
    font-size: 1.1rem;
}

.academy-runner-timer.warning[b-288ji63i0g] {
    background: color-mix(in srgb, var(--rz-warning) 16%, transparent);
    color: color-mix(in srgb, var(--rz-warning) 75%, var(--rz-text-color));
}

.academy-runner-timer.critical[b-288ji63i0g] {
    background: color-mix(in srgb, var(--rz-danger) 14%, transparent);
    color: var(--rz-danger);
}

/* ────────────── Question paginator chips ────────────── */
.academy-runner-chips[b-288ji63i0g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.academy-runner-chip[b-288ji63i0g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    border: 1.5px solid var(--rz-base-300);
    background: var(--rz-content-background-color);
    color: var(--rz-text-secondary-color);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.academy-runner-chip[b-288ji63i0g]  .rzi {
    font-size: 0.95rem;
}

.academy-runner-chip:hover[b-288ji63i0g] {
    border-color: color-mix(in srgb, var(--rz-primary) 45%, var(--rz-base-300));
    color: var(--rz-primary);
}

.academy-runner-chip:focus-visible[b-288ji63i0g] {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

/* Answered: filled + check icon */
.academy-runner-chip.answered[b-288ji63i0g] {
    background: color-mix(in srgb, var(--rz-success) 14%, transparent);
    border-color: color-mix(in srgb, var(--rz-success) 45%, var(--rz-base-300));
    color: color-mix(in srgb, var(--rz-success) 80%, var(--rz-text-color));
}

/* Current: primary border */
.academy-runner-chip.current[b-288ji63i0g] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
    box-shadow: 0 0 0 1px var(--rz-primary) inset;
}

.academy-runner-chip.answered.current[b-288ji63i0g] {
    color: color-mix(in srgb, var(--rz-success) 80%, var(--rz-text-color));
    border-color: var(--rz-primary);
}

/* ────────────── Question card ────────────── */
.academy-runner-question[b-288ji63i0g] {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}

.academy-runner-question-header[b-288ji63i0g] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.academy-runner-question-counter[b-288ji63i0g] {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
}

/* ────────────── Options ────────────── */
.academy-runner-options[b-288ji63i0g] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.academy-runner-option[b-288ji63i0g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
    color: var(--rz-text-color);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.academy-runner-option:hover:not(.locked)[b-288ji63i0g] {
    border-color: color-mix(in srgb, var(--rz-primary) 45%, var(--rz-base-300));
}

.academy-runner-option input[b-288ji63i0g] {
    accent-color: var(--rz-primary);
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    cursor: inherit;
}

.academy-runner-option.selected[b-288ji63i0g] {
    border-color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 6%, var(--rz-content-background-color));
}

.academy-runner-option.locked[b-288ji63i0g] {
    cursor: default;
}

.academy-runner-option-text[b-288ji63i0g] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: left;
}

.academy-runner-page[b-288ji63i0g]  .academy-runner-option-state-icon

    font-size: 1.15rem;
    color: var(--rz-text-tertiary-color);
    flex-shrink: 0;
}

/* Feedback states — border+background AND icon+text tag (never color alone) */
.academy-runner-option.is-correct[b-288ji63i0g] {
    border-color: color-mix(in srgb, var(--rz-success) 65%, var(--rz-base-300));
    background: color-mix(in srgb, var(--rz-success) 9%, var(--rz-content-background-color));
}

.academy-runner-page[b-288ji63i0g]  .academy-runner-option.is-correct .academy-runner-option-state-icon

    color: var(--rz-success);
}

.academy-runner-option.is-wrong[b-288ji63i0g] {
    border-color: color-mix(in srgb, var(--rz-danger) 65%, var(--rz-base-300));
    background: color-mix(in srgb, var(--rz-danger) 8%, var(--rz-content-background-color));
}

.academy-runner-page[b-288ji63i0g]  .academy-runner-option.is-wrong .academy-runner-option-state-icon

    color: var(--rz-danger);
}

.academy-runner-option.is-missed[b-288ji63i0g] {
    border-color: color-mix(in srgb, var(--rz-warning) 60%, var(--rz-base-300));
    background: color-mix(in srgb, var(--rz-warning) 9%, var(--rz-content-background-color));
}

.academy-runner-page[b-288ji63i0g]  .academy-runner-option.is-missed .academy-runner-option-state-icon

    color: color-mix(in srgb, var(--rz-warning) 80%, var(--rz-text-color));
}

/* Inline feedback tag: icon + text */
.academy-runner-feedback[b-288ji63i0g] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    margin-left: auto;
}

.academy-runner-feedback[b-288ji63i0g]  .rzi {
    font-size: 0.95rem;
}

.academy-runner-feedback.ok[b-288ji63i0g] {
    color: var(--rz-success);
}

.academy-runner-feedback.ko[b-288ji63i0g] {
    color: var(--rz-danger);
}

.academy-runner-feedback.missed[b-288ji63i0g] {
    color: color-mix(in srgb, var(--rz-warning) 80%, var(--rz-text-color));
}

/* ────────────── True/False big toggle buttons ────────────── */
.academy-runner-tf[b-288ji63i0g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.academy-runner-tf-btn[b-288ji63i0g] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.1rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    text-align: center;
}

.academy-runner-tf-btn:disabled[b-288ji63i0g] {
    cursor: default;
}

.academy-runner-tf-btn:focus-visible[b-288ji63i0g] {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

.academy-runner-tf-btn .academy-runner-option-text[b-288ji63i0g] {
    flex: 0 1 auto;
    text-align: center;
}

.academy-runner-tf-btn .academy-runner-feedback[b-288ji63i0g] {
    margin-left: 0;
}

/* ────────────── Practice confirm + feedback box ────────────── */
.academy-runner-confirm[b-288ji63i0g] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.academy-runner-feedback-box[b-288ji63i0g] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--rz-border-radius);
    font-weight: 600;
}

.academy-runner-feedback-box[b-288ji63i0g]  .rzi {
    font-size: 1.35rem;
    flex-shrink: 0;
}

.academy-runner-feedback-box.ok[b-288ji63i0g] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: color-mix(in srgb, var(--rz-success) 80%, var(--rz-text-color));
    border: 1px solid color-mix(in srgb, var(--rz-success) 40%, var(--rz-base-300));
}

.academy-runner-feedback-box.ko[b-288ji63i0g] {
    background: color-mix(in srgb, var(--rz-danger) 10%, transparent);
    color: color-mix(in srgb, var(--rz-danger) 85%, var(--rz-text-color));
    border: 1px solid color-mix(in srgb, var(--rz-danger) 40%, var(--rz-base-300));
}

/* Explanation box (practice feedback + result review) */
.academy-runner-explanation[b-288ji63i0g] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid color-mix(in srgb, var(--rz-info) 60%, transparent);
    border-radius: 0 var(--rz-border-radius) var(--rz-border-radius) 0;
    background: color-mix(in srgb, var(--rz-info) 7%, transparent);
    color: var(--rz-text-color);
    font-size: 0.875rem;
    line-height: 1.55;
}

.academy-runner-explanation[b-288ji63i0g]  .rzi {
    color: var(--rz-info);
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.academy-runner-explanation-title[b-288ji63i0g] {
    display: block;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
    margin-bottom: 0.15rem;
}

/* ────────────── Bottom bar ────────────── */
.academy-runner-footer[b-288ji63i0g] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-content-background-color) 94%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.academy-runner-footer-progress[b-288ji63i0g] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* ────────────── Result view ────────────── */
.academy-runner-result[b-288ji63i0g] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
}

.academy-runner-result-score-block[b-288ji63i0g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.academy-runner-result-score[b-288ji63i0g] {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.academy-runner-result-score.passed[b-288ji63i0g] {
    color: var(--rz-success);
}

.academy-runner-result-score.failed[b-288ji63i0g] {
    color: var(--rz-danger);
}

.academy-runner-result-badge[b-288ji63i0g] {
    font-size: 0.85rem;
    padding: 0.35rem 0.9rem;
}

.academy-runner-result-meta[b-288ji63i0g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.academy-runner-result-actions[b-288ji63i0g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    border-top: 1px solid var(--rz-base-300);
    padding-top: 1rem;
}

.academy-runner-page[b-288ji63i0g]  .academy-runner-review-item

    margin-top: 0.25rem;
}

/* ────────────── Responsive ────────────── */
@media (max-width: 640px) {
.academy-runner-page[b-288ji63i0g] {
        padding: 1rem 1rem 1.5rem;
    }

.academy-runner-result-score[b-288ji63i0g] {
        font-size: 2.4rem;
    }

.academy-runner-footer[b-288ji63i0g] {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* /Components/Pages/Academy/VerifyCertificate.razor.rz.scp.css */
/* Estilos propios de VerifyCertificate — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/academy/academy-certificates.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   PUBLIC verification page — minimal elegant centered card. No portal chrome
   (EmptyLayout); works for anonymous visitors regardless of module visibility.
   Feedback is never color-only: every verdict ships icon + text.
   ═══════════════════════════════════════════════════════════════════════════ */
.academy-verify-page[b-zx1dwvrpba] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--rz-body-background-color);
}

.academy-verify-card[b-zx1dwvrpba] {
    width: 100%;
    max-width: 34rem;
    background: var(--rz-content-background-color);
    border: 1px solid var(--rz-base-300);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 18px 40px color-mix(in srgb, var(--rz-base-900) 12%, transparent);
}

.academy-verify-brand[b-zx1dwvrpba] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--rz-base-300);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

[b-zx1dwvrpba] .academy-verify-brand-icon {
    color: var(--rz-primary);
    font-size: 1.5rem;
}

.academy-verify-brand-sub[b-zx1dwvrpba] {
    color: var(--rz-text-secondary-color);
    font-weight: 400;
}

.academy-verify-heading[b-zx1dwvrpba] {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--rz-text-title-color);
    letter-spacing: -0.01em;
}

.academy-verify-code[b-zx1dwvrpba] {
    display: inline-block;
    font-family: ui-monospace, "Cascadia Code", "Geist Mono", Consolas, monospace;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--rz-text-color);
    background: color-mix(in srgb, var(--rz-base-200) 70%, transparent);
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    padding: 0.3rem 0.75rem;
    margin-bottom: 1.25rem;
    overflow-wrap: anywhere;
    -webkit-user-select: all;
    user-select: all;
}

/* ────────────── Verdict block (icon + title + optional hint) ────────────── */
.academy-verify-state[b-zx1dwvrpba] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 1.25rem 0.75rem;
}

.academy-verify-state h2[b-zx1dwvrpba] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--rz-text-title-color);
}

.academy-verify-state p[b-zx1dwvrpba] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
}

.academy-verify-state[b-zx1dwvrpba]  .rzi {
    font-size: 3rem;
}

.academy-verify-state-valid[b-zx1dwvrpba]  .rzi {
    color: var(--rz-success);
}

.academy-verify-state-revoked[b-zx1dwvrpba]  .rzi {
    color: var(--rz-danger);
}

.academy-verify-state-revoked h2[b-zx1dwvrpba] {
    color: var(--rz-danger);
}

.academy-verify-state-notfound[b-zx1dwvrpba]  .rzi {
    color: var(--rz-text-tertiary-color);
}

.academy-verify-state-warning[b-zx1dwvrpba]  .rzi {
    color: color-mix(in srgb, var(--rz-warning) 80%, var(--rz-text-color));
}

/* Under-review notice — the certificate stays presented as valid */
.academy-verify-review-notice[b-zx1dwvrpba] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    border: 1px solid color-mix(in srgb, var(--rz-warning) 45%, var(--rz-base-300));
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-warning) 10%, transparent);
    color: var(--rz-text-color);
    font-size: 0.85rem;
}

.academy-verify-review-notice[b-zx1dwvrpba]  .rzi {
    color: color-mix(in srgb, var(--rz-warning) 80%, var(--rz-text-color));
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* ────────────── Detail rows (valid / under review) ────────────── */
.academy-verify-details[b-zx1dwvrpba] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.45rem 1.25rem;
    margin: 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--rz-base-300);
}

.academy-verify-details dt[b-zx1dwvrpba] {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
    align-self: center;
}

.academy-verify-details dd[b-zx1dwvrpba] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--rz-text-color);
    overflow-wrap: anywhere;
}

.academy-verify-footer[b-zx1dwvrpba] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rz-base-300);
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    text-align: center;
}

@media (max-width: 480px) {
.academy-verify-card[b-zx1dwvrpba] {
        padding: 1.4rem 1.1rem;
    }

.academy-verify-details[b-zx1dwvrpba] {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

.academy-verify-details dd[b-zx1dwvrpba] {
        margin-bottom: 0.55rem;
    }
}
/* /Components/Pages/Account/AccessDenied.razor.rz.scp.css */
/* CRÍTICO — crear AccessDenied.razor.css: /Account/AccessDenied renderiza hoy HTML crudo.
   De wwwroot/css/pages/access-denied.css — duplicado integro (regla 12).
   Todo el marcado de AccessDenied.razor es HTML plano → directo. */
.error-container[b-bz1ukkwzd7] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 40%, #16213e 100%);
    z-index: 1;
}

.error-card[b-bz1ukkwzd7] {
    text-align: center;
    max-width: 460px;
    width: 100%;
    padding: 2.5rem;
    background: rgba(25, 25, 45, 0.96);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.55);
    color: #e2e8f0;
}

.error-icon[b-bz1ukkwzd7] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-icon.denied[b-bz1ukkwzd7] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444 !important;
}

.error-icon.notfound[b-bz1ukkwzd7] {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8 !important;
}

.error-icon.fault[b-bz1ukkwzd7] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b !important;
}

.error-icon svg[b-bz1ukkwzd7] {
    width: 40px;
    height: 40px;
}

.error-card h1[b-bz1ukkwzd7] {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #f8fafc !important;
    margin: 0 0 0.5rem !important;
    letter-spacing: 0;
    line-height: 1.3;
}

.error-card .error-message[b-bz1ukkwzd7] {
    color: #cbd5e1 !important;
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
}

.error-card .error-details[b-bz1ukkwzd7] {
    text-align: left;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.5rem;
}

.error-card .error-details p[b-bz1ukkwzd7] {
    color: #cbd5e1 !important;
    font-size: 0.8rem;
    margin: 0 0 0.5rem;
}

.error-card .error-details ul[b-bz1ukkwzd7] {
    margin: 0;
    padding-left: 1.25rem;
    color: #94a3b8 !important;
    font-size: 0.8rem;
}

.error-card .error-details li[b-bz1ukkwzd7] {
    margin: 0.25rem 0;
    color: #94a3b8 !important;
}

.error-card .error-actions[b-bz1ukkwzd7] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.error-card .btn-primary[b-bz1ukkwzd7],
.error-card .btn-secondary[b-bz1ukkwzd7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.error-card .btn-primary[b-bz1ukkwzd7] {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #ffffff !important;
}

.error-card .btn-primary:hover[b-bz1ukkwzd7] {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
    color: #ffffff !important;
}

.error-card .btn-secondary[b-bz1ukkwzd7] {
    background: transparent;
    border-color: rgba(139, 92, 246, 0.4);
    color: #cbd5e1 !important;
}

.error-card .btn-secondary:hover[b-bz1ukkwzd7] {
    background: rgba(139, 92, 246, 0.12);
    color: #f8fafc !important;
}
/* /Components/Pages/Account/Account.razor.rz.scp.css */
/* Estilos propios de Account — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/pages/account.css. El root .account-page y todo el
   hero (avatar, pills, copy) son HTML plano de Account.razor → b-{hash}
   directo, igual que essential-*, language-* (el option es un <button> plano)
   y capability-*. Las excepciones llevan ::deep ancladas en .account-content
   (div HTML propio ya existente, no hace falta envoltorio nuevo) porque la
   clase va sobre un componente Razor y no recibe el hash:
   .account-card (RadzenCard), .card-header (RadzenStack), .card-icon y
   .language-check (RadzenIcon). El @media 768px viaja tal cual.
   ───────────────────────────────────────────────────────────────────────────── */

.account-page[b-ey379krt7v] {
    min-height: 100%;
    background: var(--rz-body-background-color);
}

.account-hero[b-ey379krt7v] {
    padding: 1.5rem 1rem 0;
}

.account-hero-shell[b-ey379krt7v] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--rz-text-contrast-color) 18%, transparent);
    border-radius: 20px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--rz-primary-darker) 88%, black) 0%, color-mix(in srgb, var(--rz-primary) 78%, var(--rz-base-900)) 100%);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
}

.avatar-container[b-ey379krt7v] {
    flex-shrink: 0;
}

.avatar-image[b-ey379krt7v] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.24);
    object-fit: cover;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.avatar-placeholder[b-ey379krt7v] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    border: 3px solid rgba(255,255,255,0.24);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-initials[b-ey379krt7v] {
    font-size: 2rem;
    font-weight: 600;
    color: var(--rz-text-contrast-color);
    text-transform: uppercase;
}

.hero-copy[b-ey379krt7v] {
    flex: 1;
    min-width: 0;
}

.hero-eyebrow[b-ey379krt7v] {
    display: inline-block;
    margin-bottom: 0.5rem;
    color: rgba(255,255,255,0.72);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.user-name[b-ey379krt7v] {
    margin: 0;
    color: var(--rz-text-contrast-color);
    font-size: clamp(1.65rem, 2vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
}

.user-email[b-ey379krt7v] {
    margin: 0.5rem 0 0;
    color: rgba(255,255,255,0.88);
    font-size: 0.98rem;
}

.hero-pills[b-ey379krt7v] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.hero-pill[b-ey379krt7v] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: var(--rz-text-contrast-color);
    font-size: 0.84rem;
    font-weight: 500;
}

.account-content[b-ey379krt7v] {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1rem 1rem 1.5rem;
}

.account-content[b-ey379krt7v]  .account-card {
    border-radius: 18px;
    border: 1px solid var(--rz-base-200);
    box-shadow: var(--rz-shadow-1);
    background: var(--rz-card-background-color);
}

.account-content[b-ey379krt7v]  .card-header {
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--rz-base-200);
}

.account-content[b-ey379krt7v]  .card-icon {
    font-size: 1.25rem;
    color: var(--rz-primary);
}

.essential-list[b-ey379krt7v] {
    display: grid;
    gap: 0.75rem;
}

.essential-item[b-ey379krt7v] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--rz-base-200);
    border-radius: 14px;
    background: color-mix(in srgb, var(--rz-base-background-color) 92%, var(--rz-primary-lighter));
}

.essential-icon[b-ey379krt7v] {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    flex-shrink: 0;
}

.essential-copy[b-ey379krt7v] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.essential-value[b-ey379krt7v] {
    color: var(--rz-text-title-color);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}

.essential-label[b-ey379krt7v] {
    color: var(--rz-text-secondary-color);
    font-size: 0.78rem;
}

.language-grid[b-ey379krt7v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.language-option[b-ey379krt7v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--rz-base-200);
    border-radius: 14px;
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
    text-align: left;
    transition: border-color var(--rz-transition), background var(--rz-transition), box-shadow var(--rz-transition);
}

.language-option:hover[b-ey379krt7v] {
    border-color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-base-background-color) 90%, var(--rz-primary-lighter));
}

.language-option.selected[b-ey379krt7v] {
    border-color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary-lighter) 68%, var(--rz-base-background-color));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--rz-primary) 25%, transparent);
}

.language-option-main[b-ey379krt7v] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.language-flag[b-ey379krt7v] {
    font-size: 1.25rem;
    line-height: 1;
}

.language-copy[b-ey379krt7v] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.language-name[b-ey379krt7v] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.language-code[b-ey379krt7v] {
    color: var(--rz-text-secondary-color);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.account-content[b-ey379krt7v]  .language-check {
    color: var(--rz-primary);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.capability-grid[b-ey379krt7v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
}

.capability-item[b-ey379krt7v] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--rz-base-200);
    border-radius: 14px;
    background: color-mix(in srgb, var(--rz-base-background-color) 94%, var(--rz-primary-lighter));
}

.capability-icon[b-ey379krt7v] {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    flex-shrink: 0;
}

.capability-name[b-ey379krt7v] {
    color: var(--rz-text-title-color);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .account-hero[b-ey379krt7v] {
        padding-top: 1rem;
    }

    .account-hero-shell[b-ey379krt7v] {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.25rem;
    }

    .hero-pills[b-ey379krt7v] {
        gap: 0.5rem;
    }

    .hero-pill[b-ey379krt7v] {
        width: 100%;
        justify-content: flex-start;
    }

    .language-grid[b-ey379krt7v],
    .capability-grid[b-ey379krt7v] {
        grid-template-columns: 1fr;
    }

    .user-name[b-ey379krt7v] {
        text-align: center;
    }

    .hero-copy[b-ey379krt7v] {
        width: 100%;
        text-align: center;
    }

    .avatar-image[b-ey379krt7v], .avatar-placeholder[b-ey379krt7v] {
        width: 80px;
        height: 80px;
    }

    .avatar-initials[b-ey379krt7v] {
        font-size: 2rem;
    }
}
/* /Components/Pages/Account/Login.razor.rz.scp.css */
/* Estilos propios de Login — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/pages/login.css: 338 lineas que se cargaban en TODAS las
   paginas del portal para una pantalla que, por definicion, solo se ve cuando
   todavia no has entrado.

   De sus 23 clases, 22 van sobre HTML de este marcado y se acotan solas. La que
   no es `login-form`, que cuelga de un <RadzenStack>: a lo que pinta un
   componente no le llega el `b-{hash}`, asi que sus dos reglas —ella y la que
   estiliza los .rz-form-field de dentro— salen por `::deep` desde el
   <div class="login-page"> que si es HTML de aqui.
   ───────────────────────────────────────────────────────────────────────────── */

/* Login Page Base */
.login-page[b-8eeg3jn7b5] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

/* Animated Background Shapes */
.login-background[b-8eeg3jn7b5] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.login-bg-shape[b-8eeg3jn7b5] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: float-b-8eeg3jn7b5 20s infinite ease-in-out;
}

.login-bg-shape-1[b-8eeg3jn7b5] {
    width: 600px;
    height: 600px;
    background: var(--rz-primary);
    top: -200px;
    right: -100px;
    animation-delay: 0s;
}

.login-bg-shape-2[b-8eeg3jn7b5] {
    width: 400px;
    height: 400px;
    background: var(--rz-secondary);
    bottom: -100px;
    left: -100px;
    animation-delay: -5s;
}

.login-bg-shape-3[b-8eeg3jn7b5] {
    width: 300px;
    height: 300px;
    background: var(--rz-info);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -10s;
}

@keyframes float-b-8eeg3jn7b5 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(20px, 30px) scale(1.02); }
}

/* Login Container */
.login-container[b-8eeg3jn7b5] {
    position: relative;
    z-index: 1;
    padding: 2rem;
    width: 100%;
    max-width: 480px;
}

/* Login Card */
.login-card[b-8eeg3jn7b5] {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.1);
    padding: 3rem;
    animation: slideUp-b-8eeg3jn7b5 0.5s ease-out;
}

@keyframes slideUp-b-8eeg3jn7b5 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.login-header[b-8eeg3jn7b5] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.login-logo-container[b-8eeg3jn7b5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-primary-dark) 100%);
    border-radius: 20px;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 40px -10px var(--rz-primary);
}

.login-logo[b-8eeg3jn7b5] {
    width: 48px;
    height: 48px;
    filter: brightness(0) invert(1);
}

.login-title[b-8eeg3jn7b5] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.5px;
}

.login-subtitle[b-8eeg3jn7b5] {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
}

/* Content */
.login-content[b-8eeg3jn7b5] {
    margin-bottom: 2rem;
}

/* Microsoft Login Button */
.microsoft-login-btn[b-8eeg3jn7b5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 24px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.microsoft-login-btn:hover[b-8eeg3jn7b5] {
    background: #f8fafc;
    border-color: #0078d4;
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.15);
    transform: translateY(-1px);
}

.microsoft-login-btn:active[b-8eeg3jn7b5] {
    transform: translateY(0);
}

.microsoft-icon[b-8eeg3jn7b5] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Divider */
.login-divider[b-8eeg3jn7b5] {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: #94a3b8;
    font-size: 0.85rem;
}

.login-divider[b-8eeg3jn7b5]::before,
.login-divider[b-8eeg3jn7b5]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.login-divider span[b-8eeg3jn7b5] {
    padding: 0 1rem;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Email Login Button */
.email-login-btn[b-8eeg3jn7b5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.email-login-btn:hover[b-8eeg3jn7b5] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
}

/* Login Form */
.login-page[b-8eeg3jn7b5]  .login-form {
    width: 100%;
}

.login-page[b-8eeg3jn7b5]  .login-form .rz-form-field {
    --rz-form-field-border-radius: 12px;
}

/* Login Links */
.login-links[b-8eeg3jn7b5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.login-link[b-8eeg3jn7b5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--rz-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-link:hover[b-8eeg3jn7b5] {
    color: var(--rz-primary-dark);
    text-decoration: underline;
}

/* Footer */
.login-footer[b-8eeg3jn7b5] {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
}

.login-footer p[b-8eeg3jn7b5] {
    margin: 0;
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Utility */
.w-100[b-8eeg3jn7b5] {
    width: 100%;
}

/* Responsive */
@media (max-width: 480px) {
    .login-card[b-8eeg3jn7b5] {
        padding: 2rem;
        border-radius: 20px;
    }

    .login-logo-container[b-8eeg3jn7b5] {
        width: 64px;
        height: 64px;
    }

    .login-logo[b-8eeg3jn7b5] {
        width: 36px;
        height: 36px;
    }

    .login-title[b-8eeg3jn7b5] {
        font-size: 1.5rem;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .login-card[b-8eeg3jn7b5] {
        background: rgba(30, 41, 59, 0.95);
    }

    .login-title[b-8eeg3jn7b5] {
        color: #f8fafc;
    }

    .login-subtitle[b-8eeg3jn7b5] {
        color: #94a3b8;
    }

    .microsoft-login-btn[b-8eeg3jn7b5] {
        background: #1e293b;
        border-color: #334155;
        color: #f8fafc;
    }

    .microsoft-login-btn:hover[b-8eeg3jn7b5] {
        background: #334155;
        border-color: #0078d4;
    }

    .email-login-btn[b-8eeg3jn7b5] {
        border-color: #334155;
        color: #94a3b8;
    }

    .email-login-btn:hover[b-8eeg3jn7b5] {
        background: #334155;
        color: #f8fafc;
    }

    .login-divider[b-8eeg3jn7b5]::before,
    .login-divider[b-8eeg3jn7b5]::after {
        background: #334155;
    }

    .login-footer[b-8eeg3jn7b5] {
        border-top-color: #334155;
    }
}
/* /Components/Pages/Account/Logout.razor.rz.scp.css */
/* Estilos propios de Logout — CSS isolation.
   Vienen de wwwroot/css/pages/logout.css, que se cargaba en TODAS las paginas
   del portal para una pantalla que se ve al cerrar sesion.

   Sus colores escritos a pelo se QUEDAN, y es a proposito. El resto de hojas
   migradas se tokenizaron porque un #e9ecef no sigue al color primario del
   cliente ni se pinta en oscuro. Aqui es al reves: la pantalla de cierre de
   sesion es una escena oscura FIJA, igual en claro y en oscuro, y los tokens
   giran con el tema. Cambiar #1a1a2e por --rz-base-100 la volveria clara en
   modo claro, que es justo lo que no debe pasar.
   ───────────────────────────────────────────────────────────────────────── */

/* Logout Page Base */
.logout-page[b-2uec6bjysf] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

/* Animated Background Shapes */
.logout-background[b-2uec6bjysf] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.logout-bg-shape[b-2uec6bjysf] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: logout-float-b-2uec6bjysf 20s infinite ease-in-out;
}

.logout-bg-shape-1[b-2uec6bjysf] {
    width: 600px;
    height: 600px;
    background: var(--rz-primary);
    top: -200px;
    right: -100px;
    animation-delay: 0s;
}

.logout-bg-shape-2[b-2uec6bjysf] {
    width: 400px;
    height: 400px;
    background: var(--rz-secondary);
    bottom: -100px;
    left: -100px;
    animation-delay: -5s;
}

.logout-bg-shape-3[b-2uec6bjysf] {
    width: 300px;
    height: 300px;
    background: var(--rz-info);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -10s;
}

@keyframes logout-float-b-2uec6bjysf {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(20px, 30px) scale(1.02); }
}

/* Logout Container */
.logout-container[b-2uec6bjysf] {
    position: relative;
    z-index: 1;
    padding: 2rem;
    width: 100%;
    max-width: 480px;
}

/* Logout Card */
.logout-card[b-2uec6bjysf] {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.1);
    padding: 3rem;
    animation: logout-slideUp-b-2uec6bjysf 0.5s ease-out;
}

@keyframes logout-slideUp-b-2uec6bjysf {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.logout-header[b-2uec6bjysf] {
    text-align: center;
    margin-bottom: 2rem;
}

.logout-logo-container[b-2uec6bjysf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-primary-dark) 100%);
    border-radius: 20px;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 40px -10px var(--rz-primary);
}

.logout-logo[b-2uec6bjysf] {
    width: 48px;
    height: 48px;
    filter: brightness(0) invert(1);
}

.logout-title[b-2uec6bjysf] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    letter-spacing: -0.5px;
}

/* Content */
.logout-content[b-2uec6bjysf] {
    text-align: center;
    padding: 2rem 0;
}

.logout-message[b-2uec6bjysf] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 1.5rem 0 0.5rem 0;
}

.logout-submessage[b-2uec6bjysf] {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
}

/* Spinner */
.logout-spinner[b-2uec6bjysf] {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto;
}

.spinner-ring[b-2uec6bjysf] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    animation: logout-spin-b-2uec6bjysf 1.5s linear infinite;
}

.spinner-ring:nth-child(1)[b-2uec6bjysf] {
    border-top-color: var(--rz-primary);
    animation-delay: 0s;
}

.spinner-ring:nth-child(2)[b-2uec6bjysf] {
    border-right-color: var(--rz-secondary);
    animation-delay: 0.15s;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
}

.spinner-ring:nth-child(3)[b-2uec6bjysf] {
    border-bottom-color: var(--rz-info);
    animation-delay: 0.3s;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
}

@keyframes logout-spin-b-2uec6bjysf {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Footer */
.logout-footer[b-2uec6bjysf] {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
}

.logout-footer p[b-2uec6bjysf] {
    margin: 0;
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .logout-card[b-2uec6bjysf] {
        background: rgba(30, 41, 59, 0.95);
    }

    .logout-title[b-2uec6bjysf] {
        color: #f8fafc;
    }

    .logout-message[b-2uec6bjysf] {
        color: #f8fafc;
    }

    .logout-submessage[b-2uec6bjysf] {
        color: #94a3b8;
    }

    .logout-footer[b-2uec6bjysf] {
        border-top-color: #334155;
    }
}

/* Responsive */
@media (max-width: 480px) {
    .logout-card[b-2uec6bjysf] {
        padding: 2rem;
        border-radius: 20px;
    }

    .logout-logo-container[b-2uec6bjysf] {
        width: 64px;
        height: 64px;
    }

    .logout-logo[b-2uec6bjysf] {
        width: 36px;
        height: 36px;
    }

    .logout-title[b-2uec6bjysf] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/Admin/AdminTicketCreateDialog.razor.rz.scp.css */
/* Estilos propios de AdminTicketCreateDialog — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Dos bloques, dos procedencias:

   1) wwwroot/css/admin/admin-ticket-create-dialog.css (los atc-* especificos
      del admin: skeleton, secciones de destinatario/organizacion, watchers).
   2) wwwroot/css/servicedesk/ticket-create-dialog.css COMPLETA: la raiz
      `<div id="admin-ticket-create-container" class="tk-scope tc-form">`
      añade `tc-form` y hereda el sistema entero (eyebrow, hero, type-grid,
      fld, prio, footer). Bajo isolation cada componente necesita su copia con
      su hash, asi que este bloque vive DUPLICADO aqui y en
      TicketCreateDialog.razor.css — a proposito (no desduplicar).

   Llevan `::deep` (anclado en el div raiz o en un elemento propio):
     - internos Radzen (.rz-dropdown, .rz-skeleton, .rz-textbox,
       .rz-html-editor*, .rz-message, .rz-fieldset): DOM de Radzen sin hash;
     - `.ctp-trigger`: marcado del HIJO CategoryTreePicker;
     - `input[type="file"]` del drop (lo emite <InputFile>);
     - iconos .rzi/.spin: aqui los emite <RadzenIcon> (runtime, sin hash).

   `ticket-create-field-label` no tiene consumidor (huerfana verificada con
   frontera (?<![\w-])); viaja byte a byte con el resto, como pide el plan.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   Admin create-ticket form — same visual language as the customer dialog.
   ───────────────────────────────────────────────────────────────────────────
   Most of the chrome (eyebrow / hero / type-grid / fld / prio-pick / footer)
   comes from `ticket-create-dialog.css`, which now scopes on `.tc-form`. The
   admin container adds that class and inherits the entire design system; this
   file only contributes the admin-specific bits (skeleton, watcher list,
   recipient + organisation sections).
   ═══════════════════════════════════════════════════════════════════════════ */
#admin-ticket-create-container[b-v68lwirpn9] { min-height: 640px; }

.ticket-create-field-label[b-v68lwirpn9] {
    font-size: 0.72rem;
    color: var(--rz-text-tertiary-color);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

/* Equalise the 3-column row so Type / Category / Priority render at the same
   height (RadzenDropDown's .rz-dropdown + CategoryTreePicker's .ctp-trigger). */
#admin-ticket-create-container[b-v68lwirpn9]  .rz-dropdown,
#admin-ticket-create-container[b-v68lwirpn9]  .ctp-trigger {
    min-height: 38px;
}

/* ─── Admin "section" group — recipient + organisation pickers when the type
       is "Action Required". Soft surface + label so the extra fields don't
       feel like a wall of inputs. ─── */
#admin-ticket-create-container .atc-section[b-v68lwirpn9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 14px 12px;
    background: var(--surface-2, var(--rz-base-50));
    border: 1px solid var(--line, var(--rz-base-200));
    border-radius: 9px;
}

#admin-ticket-create-container .atc-section-title[b-v68lwirpn9] {
    font-size: 11.5px;
    color: var(--ink-2, var(--rz-text-color));
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#admin-ticket-create-container .atc-org-summary[b-v68lwirpn9] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--violet-soft, color-mix(in srgb, var(--rz-primary) 8%, transparent));
    border: 1px solid var(--violet-line, color-mix(in srgb, var(--rz-primary) 24%, transparent));
    border-radius: 8px;
    font-size: 12.5px;
}

.atc-skel-wrap[b-v68lwirpn9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.25rem 0 0;
}

/* RadzenSkeleton renders with a fixed intrinsic width when no width is given,
   which showed as narrow floating bars instead of form-shaped placeholders.
   Stretch width-less skeletons to the field width; inline label widths (style
   attribute) still win over this rule. */
.atc-skel-wrap[b-v68lwirpn9]  .rz-skeleton {
    width: 100%;
}

.atc-skel-row[b-v68lwirpn9] {
    display: grid;
    gap: 1rem;
}

.atc-skel-row-2[b-v68lwirpn9] { grid-template-columns: 1fr 1fr; }
.atc-skel-row-3[b-v68lwirpn9] { grid-template-columns: 1fr 1fr 1fr; }

/* Mirrors the real .atc-section card so the skeleton keeps its silhouette. */
.atc-skel-section[b-v68lwirpn9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
}

.atc-skel-field[b-v68lwirpn9] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.atc-skel-buttons[b-v68lwirpn9] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.atc-watcher-list[b-v68lwirpn9] {
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    max-height: 160px;
    overflow-y: auto;
}

.atc-watcher-row[b-v68lwirpn9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
}

.atc-watcher-row:hover[b-v68lwirpn9] { background: var(--rz-base-background-color); }
.atc-watcher-row--added[b-v68lwirpn9] { background: color-mix(in srgb, var(--rz-success) 8%, transparent); }

.atc-watcher-chips[b-v68lwirpn9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.atc-watcher-chip[b-v68lwirpn9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--rz-primary);
}

.atc-watcher-chip-remove[b-v68lwirpn9] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--rz-primary);
    padding: 0;
    margin-left: 0.1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOQUE 2 — duplicado integro de servicedesk/ticket-create-dialog.css.
   Identico byte a byte al de TicketCreateDialog.razor.css (ver cabecera).
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   TicketCreateDialog — chrome del modal de creación de ticket (FASE 3).
   ───────────────────────────────────────────────────────────────────────────
   Hereda los tokens del .tk-scope (ver tickets-tokens.css). Toda la maquinaria
   visual (eyebrow, hero title, type-grid, prio-pick, fld-acc, footer sticky)
   vive aquí; la lógica sigue en TicketCreateDialog.razor.cs.

   Convenciones:
     - Todo bajo `.tc-form.tk-scope` para no contaminar nada.
     - Selectors específicos con doble clase para sobrescribir Radzen sin
       recurrir a !important.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form.tk-scope[b-v68lwirpn9] {
    min-height: 620px;
    font-family: var(--tk-font-sans);
    color: var(--ink);
    display: flex;
    flex-direction: column;
}

/* ─── Skeleton (inalterable: misma estructura que antes para no tocar timing) ── */
.tc-form .tc-skel-wrap[b-v68lwirpn9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.25rem 0 0;
}

/* RadzenSkeleton falls back to a fixed intrinsic width when none is given, which
   rendered as narrow floating bars instead of form-shaped placeholders. Stretch
   width-less skeletons to their row; inline style widths still win. */
.tc-form .tc-skel-wrap[b-v68lwirpn9]  .rz-skeleton {
    width: 100%;
}

/* Stepper dots row of the wizard's step indicator. */
.tc-form .tc-skel-steps[b-v68lwirpn9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tc-form .tc-skel-steps[b-v68lwirpn9]  .rz-skeleton { width: auto; }

/* Mirrors the type-card grid of wizard step 1 (4 per row, wrapping to 2). */
.tc-form .tc-skel-typegrid[b-v68lwirpn9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

@media (max-width: 900px) {
    .tc-form .tc-skel-typegrid[b-v68lwirpn9] { grid-template-columns: repeat(2, 1fr); }
}

.tc-form .tc-skel-row[b-v68lwirpn9] { display: grid; gap: 1rem; }
.tc-form .tc-skel-row-2[b-v68lwirpn9] { grid-template-columns: 1fr 1fr; }
.tc-form .tc-skel-row-3[b-v68lwirpn9] { grid-template-columns: 1fr 1fr 1fr; }

.tc-form .tc-skel-field[b-v68lwirpn9] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tc-form .tc-skel-buttons[b-v68lwirpn9] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER · eyebrow + hero title
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form .cm-head[b-v68lwirpn9] {
    padding: 4px 0 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
}

.tc-form .cm-eyebrow[b-v68lwirpn9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 6px;
}

.tc-form .cm-eyebrow-dot[b-v68lwirpn9] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--violet);
    flex: none;
}

.tc-form .cm-trail[b-v68lwirpn9] {
    font-family: var(--tk-font-mono);
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-faint);
    font-weight: 400;
    font-size: 11px;
    margin-left: 4px;
}

.tc-form .cm-hero-title[b-v68lwirpn9] {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.3;
}

.tc-form .cm-hero-sub[b-v68lwirpn9] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--ink-dim);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Two-step wizard — progress dots + step panels.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Centered, labelled stepper: [● Tipo] ───── [○ Detalles]. The connector line
   flexes so the group breathes without spanning the full dialog width. */
.tc-form .cm-steps[b-v68lwirpn9] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px auto 4px;
    max-width: 420px;
}

.tc-form .cm-step[b-v68lwirpn9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.tc-form .cm-step-num[b-v68lwirpn9] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    background: var(--surface-2);
    border: 1.5px solid var(--line-strong);
    color: var(--ink-dim);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.tc-form .cm-step-label[b-v68lwirpn9] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-dim);
    transition: color 0.18s ease;
    white-space: nowrap;
}

.tc-form .cm-step.is-active .cm-step-num[b-v68lwirpn9] {
    background: var(--violet);
    border-color: var(--violet);
    color: var(--rz-on-primary);
    /* Soft halo lifts the active step without a hard outline. */
    box-shadow: 0 0 0 4px var(--violet-soft);
}

.tc-form .cm-step.is-active .cm-step-label[b-v68lwirpn9] {
    color: var(--ink);
}

.tc-form .cm-step.is-done .cm-step-num[b-v68lwirpn9] {
    background: var(--violet-soft);
    border-color: var(--violet);
    color: var(--violet);
}

.tc-form .cm-step.is-done .cm-step-label[b-v68lwirpn9] {
    color: var(--violet);
}

.tc-form .cm-step-line[b-v68lwirpn9] {
    height: 2px;
    border-radius: 2px;
    background: var(--line-strong);
    flex: 1 1 40px;
    min-width: 32px;
    transition: background 0.18s ease;
}

.tc-form .cm-step-line.is-done[b-v68lwirpn9] {
    background: var(--violet);
}

/* Each step is its own flex column so the fields inside keep the same 16px
   inter-field rhythm they had when they were direct children of .cm-body. */
.tc-form .cm-step-panel[b-v68lwirpn9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   .cm-info — banner violeta suave (sustituye a RadzenAlert Info)
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form .cm-info[b-v68lwirpn9] {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: var(--violet-soft);
    border: 1px solid var(--violet-line);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.5;
    margin-bottom: 16px;
}

.tc-form .cm-info svg[b-v68lwirpn9] {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--violet);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Form layout
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form .cm-body[b-v68lwirpn9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 80px; /* room for sticky footer */
}

.tc-form .fld[b-v68lwirpn9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tc-form .fld-row[b-v68lwirpn9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 560px) {
    .tc-form .fld-row[b-v68lwirpn9] { grid-template-columns: 1fr; }
}

.tc-form .fld-label[b-v68lwirpn9] {
    font-size: 11.5px;
    color: var(--ink-2);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.tc-form .fld-label .req[b-v68lwirpn9] {
    color: var(--rz-danger);
    margin-left: 2px;
}

.tc-form .fld-label .muted[b-v68lwirpn9],
.tc-form .fld .muted[b-v68lwirpn9] {
    color: var(--ink-faint);
    font-weight: 400;
}

.tc-form .fld-hint[b-v68lwirpn9] {
    font-size: 11.5px;
    color: var(--ink-faint);
    line-height: 1.45;
}

.tc-form .fld-hint-row[b-v68lwirpn9] {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 11.5px;
    color: var(--ink-faint);
}

.tc-form .fld-hint-row .ai-hint-mini[b-v68lwirpn9] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--violet);
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 500;
}

.tc-form .fld-hint-row .ai-hint-mini[b-v68lwirpn9]  .rzi {
    font-size: 12px;
}

.tc-form .fld-hint-row .ai-hint-mini:hover[b-v68lwirpn9] {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Type cards — replaces TicketType dropdown with 4 radio cards.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form .type-grid[b-v68lwirpn9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

@media (max-width: 720px) {
    .tc-form .type-grid[b-v68lwirpn9] { grid-template-columns: repeat(2, 1fr); }
}

.tc-form .type-opt[b-v68lwirpn9] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px 10px 28px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    cursor: pointer;
    background: var(--surface);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    font-family: var(--tk-font-sans);
    text-align: left;
    color: inherit;
    font-size: 12.5px;
}

.tc-form .type-opt:hover[b-v68lwirpn9] {
    border-color: var(--ink-faint);
}

.tc-form .type-opt:disabled[b-v68lwirpn9],
.tc-form .type-opt[aria-disabled="true"][b-v68lwirpn9] {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--surface-2);
}

.tc-form .type-opt .dot[b-v68lwirpn9] {
    position: absolute;
    left: 11px;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-faint);
}

.tc-form .type-opt .name[b-v68lwirpn9] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}

.tc-form .type-opt .help[b-v68lwirpn9] {
    font-size: 11px;
    font-style: normal;
    color: var(--ink-dim);
    line-height: 1.3;
}

.tc-form .type-opt.is-selected[b-v68lwirpn9] {
    border-color: var(--violet);
    background: var(--violet-soft);
    box-shadow: var(--rz-shadow-glow);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dropdown chrome inside the create dialog — flatten Radzen to match design.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form[b-v68lwirpn9]  .rz-dropdown {
    min-height: 38px;
    height: 38px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tc-form[b-v68lwirpn9]  .rz-dropdown:hover {
    border-color: var(--ink-faint);
}

.tc-form[b-v68lwirpn9]  .rz-dropdown:focus-within,
.tc-form[b-v68lwirpn9]  .rz-dropdown.rz-state-focused {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px var(--violet-soft);
}

.tc-form[b-v68lwirpn9]  .rz-dropdown.rz-state-disabled {
    background: var(--surface-2);
    border-color: var(--line);
    cursor: not-allowed;
}

.tc-form[b-v68lwirpn9]  .rz-dropdown .rz-inputtext {
    font-size: 13px;
    color: var(--ink);
}

/* RadzenTextBox */
.tc-form[b-v68lwirpn9]  .rz-textbox {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--ink);
    background: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tc-form[b-v68lwirpn9]  .rz-textbox:hover {
    border-color: var(--ink-faint);
}

.tc-form[b-v68lwirpn9]  .rz-textbox:focus {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px var(--violet-soft);
}

.tc-form[b-v68lwirpn9]  .rz-textbox::placeholder {
    color: var(--ink-faint);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RTE chrome — wrap the RadzenHtmlEditor so it looks like a .rte block.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form .rte[b-v68lwirpn9] {
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tc-form .rte:focus-within[b-v68lwirpn9] {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px var(--violet-soft);
}

.tc-form .rte[b-v68lwirpn9]  .rz-html-editor {
    border: 0;
    border-radius: 8px;
}

.tc-form .rte[b-v68lwirpn9]  .rz-html-editor-toolbar {
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
    padding: 4px 6px;
}

/* Copia deliberada del bloque de TicketCreateDialog.razor.css (ver cabecera del fichero): bajo CSS
   isolation cada componente necesita su propia regla con su hash.

   Los dos selectores de la barra del editor ("Bloque de formato" y "Tamaño de fuente") heredaban el
   chrome de input de formulario del dialogo: 38px de alto, borde y fondo propios, junto a botones de
   icono de 28px. Quedaban como dos cajas desalineadas que dominaban la barra.

   El ancla es el ID del contenedor a proposito: la regla de arriba
   (`#admin-ticket-create-container ::deep .rz-dropdown { min-height: 38px }`) tiene un id y gana a
   cualquier selector de clases, por muy especifico que sea. El `!important` del tamano de letra es
   por la misma razon: theme.css fija `font-size: 13px !important` para todos los inputs. */
#admin-ticket-create-container .rte[b-v68lwirpn9]  .rz-html-editor-toolbar .rz-dropdown {
    min-height: 28px;
    height: 28px;
    /* Radzen renderiza estos dos desplegables con `style="width:120px"` y `width:70px` inline. Un
       `width` en hoja de estilos no puede ganar a eso, pero `min-width` sí: el ancho usado es el
       mayor de los dos. 86px es lo que necesita "Tamaño" para no quedar pegada al chevron. */
    min-width: 86px;
    font-size: 11px !important;
    box-shadow: none;
    align-items: center;
}

/* El padding derecho reserva el ancho del disparador: el disparador va en posicion absoluta sobre
   la caja, asi que sin ese hueco el texto se cuela por debajo del chevron ("Tamañ⌄"). */
#admin-ticket-create-container .rte[b-v68lwirpn9]  .rz-html-editor-toolbar .rz-dropdown .rz-dropdown-label {
    padding: 0 20px 0 6px;
    font-size: 11px !important;
    line-height: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink-soft);
}

/* El chevron es un icono de fuente a 24px. En una barra de 28px hay que ESCALAR el icono, no
   estrechar el disparador: al dejarlo a 24px dentro de un disparador estrecho desbordaba y el
   `overflow: hidden` del propio desplegable lo recortaba — se veia como un triangulo negro pegado
   al borde. */
#admin-ticket-create-container .rte[b-v68lwirpn9]  .rz-html-editor-toolbar .rz-dropdown .rz-dropdown-trigger {
    width: 20px;
}

#admin-ticket-create-container .rte[b-v68lwirpn9]  .rz-html-editor-toolbar .rz-dropdown .rz-dropdown-trigger-icon {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 15px;
}

.tc-form .rte[b-v68lwirpn9]  .rz-html-editor-content {
    min-height: 160px;
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Priority — segmented control.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form .prio-pick[b-v68lwirpn9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 9px;
    max-width: 360px;
}

.tc-form .prio-opt[b-v68lwirpn9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    font-size: 12px;
    color: var(--ink-2);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
    font-weight: 500;
    background: transparent;
    border: 0;
    font-family: var(--tk-font-sans);
}

.tc-form .prio-opt:hover[b-v68lwirpn9] {
    color: var(--ink);
}

.tc-form .prio-opt.is-selected[b-v68lwirpn9] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--rz-shadow-1);
}

.tc-form .pp-dot[b-v68lwirpn9] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.tc-form .pp-dot--low[b-v68lwirpn9]  { background: var(--ticket-priority-low); }
.tc-form .pp-dot--med[b-v68lwirpn9]  { background: var(--ticket-priority-medium); }
.tc-form .pp-dot--high[b-v68lwirpn9] { background: var(--ticket-priority-high); }
.tc-form .pp-dot--urg[b-v68lwirpn9]  { background: var(--ticket-priority-urgent); }
.tc-form .pp-dot--crit[b-v68lwirpn9] { background: var(--ticket-priority-critical); }

/* ═══════════════════════════════════════════════════════════════════════════
   Attachments accordion (collapsible) + drop zone.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form .fld-acc[b-v68lwirpn9] {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    overflow: hidden;
}

.tc-form .fld-acc-summary[b-v68lwirpn9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--ink-2);
    font-weight: 600;
    -webkit-user-select: none;
    user-select: none;
    list-style: none;
    background: var(--surface);
    border: 0;
    width: 100%;
    font-family: var(--tk-font-sans);
    text-align: left;
}

.tc-form .fld-acc-summary[b-v68lwirpn9]::-webkit-details-marker { display: none; }
.tc-form .fld-acc-summary[b-v68lwirpn9]  .rzi { color: var(--ink-faint); font-size: 14px; }
.tc-form .fld-acc-summary .chev[b-v68lwirpn9] {
    margin-left: auto;
    transition: transform 0.2s ease;
    color: var(--ink-faint);
    font-size: 14px;
}
.tc-form .fld-acc[open] .fld-acc-summary .chev[b-v68lwirpn9] { transform: rotate(180deg); }
.tc-form .fld-acc-summary .muted[b-v68lwirpn9] { margin-left: 6px; font-weight: 400; color: var(--ink-faint); }

.tc-form .cm-drop[b-v68lwirpn9] {
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--ink-dim);
    font-size: 12.5px;
    background: var(--surface-2);
    border-top: 1px dashed var(--line);
    text-align: center;
    position: relative;
    cursor: pointer;
}

.tc-form .cm-drop[b-v68lwirpn9]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.tc-form .cm-drop[b-v68lwirpn9]  .rzi {
    font-size: 22px;
    color: var(--ink-faint);
}

.tc-form .cm-drop .browse-link[b-v68lwirpn9] {
    color: var(--violet);
    text-decoration: underline;
    cursor: pointer;
}

.tc-form .cm-pending-list[b-v68lwirpn9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px 12px;
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.tc-form .cm-pending-item[b-v68lwirpn9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--surface-2);
    font-size: 12.5px;
    color: var(--ink-2);
}

.tc-form .cm-pending-item[b-v68lwirpn9]  .rzi {
    font-size: 16px;
    color: var(--ink-faint);
    flex: none;
}

.tc-form .cm-pending-item .name[b-v68lwirpn9] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-form .cm-pending-item .size[b-v68lwirpn9] {
    color: var(--ink-faint);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Footer sticky — auto-save hint + Cancelar / Crear ticket.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form .cm-footer[b-v68lwirpn9] {
    position: sticky;
    bottom: 0;
    margin: 18px -1px 0;
    padding: 14px 0 4px;
    /* Sticky footer fade — uses surface with a transparent top edge so the
       composer body fades into the bar in both light and dark modes. */
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--rz-base-background-color) 60%, transparent) 0%,
        var(--rz-base-background-color) 35%,
        var(--rz-base-background-color) 100%
    );
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
}

.tc-form .cm-footer-hint[b-v68lwirpn9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--ink-faint);
}

.tc-form .cm-footer-hint[b-v68lwirpn9]  .rzi { font-size: 13px; }

.tc-form .cm-footer-actions[b-v68lwirpn9] {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.tc-form .cm-btn[b-v68lwirpn9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    font-family: var(--tk-font-sans);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    line-height: 1;
}

.tc-form .cm-btn--ghost[b-v68lwirpn9] {
    background: transparent;
    color: var(--ink-2);
    border-color: var(--line-strong);
}

.tc-form .cm-btn--ghost:hover[b-v68lwirpn9] {
    background: var(--surface-2);
    border-color: var(--ink-faint);
    color: var(--ink);
}

.tc-form .cm-btn--primary[b-v68lwirpn9] {
    background: var(--violet);
    color: var(--rz-on-primary);
    border-color: var(--violet);
    box-shadow: var(--rz-shadow-glow);
}

.tc-form .cm-btn--primary:hover:not(:disabled)[b-v68lwirpn9] {
    background: var(--rz-primary-dark);
    border-color: var(--rz-primary-dark);
}

.tc-form .cm-btn:disabled[b-v68lwirpn9] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tc-form .cm-btn[b-v68lwirpn9]  .rzi {
    font-size: 14px;
}

/* spinner — keyframe defined locally so it works without depending on the
   global animation set. */
.tc-form .cm-btn[b-v68lwirpn9]  .spin {
    animation: cm-spin-b-v68lwirpn9 0.8s linear infinite;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   Validation messages — keep position:static (already in the Razor). Style
   them as the inline red helper text below each field.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form[b-v68lwirpn9]  .rz-message {
    color: var(--rz-danger);
    font-size: 11.5px;
    margin-top: 4px;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RadzenFieldset (license info) — soften the chrome to match the dialog.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form[b-v68lwirpn9]  .rz-fieldset {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    box-shadow: none;
    padding: 12px 14px;
}

.tc-form[b-v68lwirpn9]  .rz-fieldset .rz-fieldset-legend {
    font-size: 12.5px;
    color: var(--ink-2);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* AI QUALITY NUDGE — advisory card shown once before submit                   */
/* Deliberately low-friction: it sits above the footer, never covers the form, */
/* and the primary action stays "Crear" (a second click always submits).       */
/* ═══════════════════════════════════════════════════════════════════════════ */
.tc-quality-nudge[b-v68lwirpn9] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 0 1.25rem 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--rz-warning-light, #f0c36d);
    border-radius: 10px;
    background: color-mix(in srgb, var(--rz-warning, #f5a623) 8%, transparent);
}

.tc-quality-nudge__icon[b-v68lwirpn9] {
    color: var(--rz-warning, #f5a623);
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.tc-quality-nudge__body[b-v68lwirpn9] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tc-quality-nudge__title[b-v68lwirpn9] {
    font-weight: 600;
    font-size: 0.875rem;
}

.tc-quality-nudge__missing[b-v68lwirpn9] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.tc-quality-nudge__suggestion[b-v68lwirpn9] {
    font-size: 0.8125rem;
    line-height: 1.4;
}

.tc-quality-nudge__hint[b-v68lwirpn9] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.tc-quality-nudge__dismiss[b-v68lwirpn9] {
    flex-shrink: 0;
    align-self: center;
}

/* Gate actions: "Mejorar descripción" is the encouraged path; "Enviar igualmente"
   is a deliberately understated escape so it does not read as the default choice. */
.tc-quality-nudge__actions[b-v68lwirpn9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}

.tc-quality-nudge__send-anyway[b-v68lwirpn9] {
    background: none;
    border: none;
    padding: 0.25rem 0.25rem;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.tc-quality-nudge__send-anyway:hover:not(:disabled)[b-v68lwirpn9] {
    color: var(--rz-text-secondary-color);
}

.tc-quality-nudge__send-anyway:disabled[b-v68lwirpn9] {
    opacity: 0.5;
    cursor: default;
}
/* /Components/Pages/Admin/AI/AIHub.razor.rz.scp.css */
.aih-shell[b-0rn6j5y1t1] {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: calc(100vh - 48px);
    background: var(--rz-body-background-color);
}

.aih-sidebar[b-0rn6j5y1t1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem;
    background: var(--rz-base-background-color);
    border-right: 1px solid var(--rz-base-200);
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
}

.aih-sidebar-brand[b-0rn6j5y1t1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem 1rem;
    border-bottom: 1px solid var(--rz-base-200);
    margin-bottom: 0.5rem;
}

.aih-brand-icon[b-0rn6j5y1t1] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.aih-brand-icon[b-0rn6j5y1t1]  .rzi { font-size: 1.25rem; }

.aih-brand-title[b-0rn6j5y1t1] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--rz-text-title-color);
    line-height: 1.1;
}

.aih-brand-sub[b-0rn6j5y1t1] {
    font-size: 0.7rem;
    color: var(--rz-text-tertiary-color);
    letter-spacing: 0.02em;
}

.aih-nav[b-0rn6j5y1t1] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.aih-nav-item[b-0rn6j5y1t1] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--rz-text-primary-color);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
}

.aih-nav-item:hover[b-0rn6j5y1t1] { background: var(--rz-base-100); }
.aih-nav-item[b-0rn6j5y1t1]  .rzi { font-size: 1.05rem; color: var(--rz-text-secondary-color); }

.aih-nav-item.active[b-0rn6j5y1t1] {
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
    color: var(--rz-primary);
    font-weight: 600;
}

.aih-nav-item.active[b-0rn6j5y1t1]  .rzi { color: var(--rz-primary); }

.aih-sidebar-footer[b-0rn6j5y1t1] {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rz-base-200);
}

.aih-sidebar-link[b-0rn6j5y1t1] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    color: var(--rz-text-tertiary-color);
    text-decoration: none;
    font-size: 0.78rem;
    transition: background 0.12s ease, color 0.12s ease;
}

.aih-sidebar-link:hover[b-0rn6j5y1t1] { background: var(--rz-base-100); color: var(--rz-text-primary-color); }
.aih-sidebar-link[b-0rn6j5y1t1]  .rzi { font-size: 0.95rem; }

.aih-main[b-0rn6j5y1t1] {
    padding: 1.5rem 2rem;
    min-width: 0;
}

@media (max-width: 960px) {
    .aih-shell[b-0rn6j5y1t1] { grid-template-columns: 1fr; }
    .aih-sidebar[b-0rn6j5y1t1] {
        position: relative;
        max-height: unset;
        border-right: none;
        border-bottom: 1px solid var(--rz-base-200);
        flex-direction: row;
        gap: 0.5rem;
        overflow-x: auto;
        padding: 0.75rem 1rem;
    }
    .aih-sidebar-brand[b-0rn6j5y1t1] { display: none; }
    .aih-nav[b-0rn6j5y1t1] { flex-direction: row; flex: 1; }
    .aih-sidebar-footer[b-0rn6j5y1t1] { display: none; }
    .aih-main[b-0rn6j5y1t1] { padding: 1rem; }
}
/* /Components/Pages/Admin/AI/AIHubAgents.razor.rz.scp.css */
/* Estilos propios de AIHubAgents — CSS isolation.
   Vienen de tres hojas globales que se rompen a la vez:
   - wwwroot/css/admin/ai-hub-agents.css (la hoja entera, monoconsumidor);
   - wwwroot/css/admin/ai-hub.css (solo la familia aih-section/-head/-title/-sub
     y aih-loading/aih-empty, las primitivas compartidas del hub — bajo
     isolation cada seccion lleva SU copia, es lo correcto);
   - wwwroot/css/admin/ai-hub-overview.css (el tweak de .aih-section-sub,
     colocado TRAS el bloque base para conservar el orden de fuente).

   Llevan `::deep` (clases cuyo interior pinta un componente Radzen y no
   recibe el `b-{hash}`):
   - `.aih-empty ::deep .rzi` (RadzenIcon del estado vacio);
   - `.aih-agent-avatar ::deep .rzi` (RadzenIcon del avatar).
   Las variantes --disabled/--on/--off se interpolan en C# pero caen sobre
   elementos HTML de este marcado: llevan hash y se acotan solas.
   La raiz es <div class="aih-section"> propio: no hace falta envoltorio.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── ai-hub.css: primitivas de seccion compartidas ── */

.aih-section[b-lxatqmi4ut] { display: flex; flex-direction: column; gap: 1.25rem; }

.aih-section-head[b-lxatqmi4ut] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.aih-section-title[b-lxatqmi4ut] {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--rz-text-title-color);
    letter-spacing: -0.01em;
}

.aih-section-sub[b-lxatqmi4ut] {
    font-size: 0.85rem;
    color: var(--rz-text-tertiary-color);
    margin: 0.25rem 0 0;
}

/* ai-hub-overview.css: tweak que iba despues en el orden de carga */
.aih-section-sub[b-lxatqmi4ut] { margin-top: 0.25rem; }

.aih-loading[b-lxatqmi4ut], .aih-empty[b-lxatqmi4ut] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 240px;
    color: var(--rz-text-tertiary-color);
}
.aih-empty[b-lxatqmi4ut]  .rzi { font-size: 2rem; }

/* ── ai-hub-agents.css: la hoja entera ── */

.aih-agents-grid[b-lxatqmi4ut] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.9rem;
}

.aih-agent-card[b-lxatqmi4ut] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.aih-agent-card:hover[b-lxatqmi4ut] {
    border-color: var(--rz-base-300);
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}

.aih-agent-card--disabled[b-lxatqmi4ut] { opacity: 0.65; }

.aih-agent-head[b-lxatqmi4ut] {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 0.7rem;
}

.aih-agent-avatar[b-lxatqmi4ut] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.aih-agent-avatar[b-lxatqmi4ut]  .rzi { font-size: 1.3rem; }

.aih-agent-avatar--code[b-lxatqmi4ut]      { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.aih-agent-avatar--dataanalyst[b-lxatqmi4ut] { background: linear-gradient(135deg, #10b981, #0ea5e9); }
.aih-agent-avatar--document[b-lxatqmi4ut]    { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.aih-agent-avatar--creative[b-lxatqmi4ut]    { background: linear-gradient(135deg, #ec4899, #f97316); }
.aih-agent-avatar--orchestrator[b-lxatqmi4ut]{ background: linear-gradient(135deg, #1e293b, #6366f1); }

.aih-agent-title-block[b-lxatqmi4ut] { min-width: 0; }

.aih-agent-name[b-lxatqmi4ut] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--rz-text-title-color);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    /* Long single-token names ("Agent_DynamicTableAgent") must break inside
       their 1fr grid column instead of overflowing rightward onto the status
       badge (the "Activo" chip was rendering on top of the name). */
    min-width: 0;
    overflow-wrap: anywhere;
}

.aih-agent-role[b-lxatqmi4ut] {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--rz-text-tertiary-color);
    letter-spacing: 0.04em;
}

.aih-agent-chip[b-lxatqmi4ut] {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--rz-base-200);
    color: var(--rz-text-tertiary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.aih-agent-chip--primary[b-lxatqmi4ut] {
    color: var(--rz-primary);
    border-color: color-mix(in srgb, var(--rz-primary) 25%, transparent);
    background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
}

.aih-agent-status[b-lxatqmi4ut] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
    /* Keep the "Activo/Inactivo" chip on one line and pinned to the top-right
       of the header so it never collides with a wrapping agent name. */
    white-space: nowrap;
    align-self: start;
    justify-self: end;
}

.aih-agent-dot[b-lxatqmi4ut] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.aih-agent-status--on[b-lxatqmi4ut] {
    color: var(--rz-success);
    background: color-mix(in srgb, var(--rz-success) 10%, transparent);
}

.aih-agent-status--off[b-lxatqmi4ut] {
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-100);
}

.aih-agent-desc[b-lxatqmi4ut] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aih-agent-meta[b-lxatqmi4ut] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.aih-agent-model[b-lxatqmi4ut] {
    font-size: 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--rz-text-primary-color);
    padding: 0.1rem 0.5rem;
    border-radius: 6px;
    background: var(--rz-base-100);
}

.aih-agent-stats[b-lxatqmi4ut] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--rz-base-200);
    border-bottom: 1px solid var(--rz-base-200);
}

.aih-agent-stat[b-lxatqmi4ut] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.aih-agent-stat-value[b-lxatqmi4ut] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--rz-text-title-color);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.aih-agent-stat-label[b-lxatqmi4ut] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-tertiary-color);
}

.aih-agent-stat--danger .aih-agent-stat-value[b-lxatqmi4ut] { color: var(--rz-danger); }

.aih-agent-actions[b-lxatqmi4ut] {
    display: flex;
    justify-content: flex-end;
}
/* /Components/Pages/Admin/AI/AIHubConversations.razor.rz.scp.css */
/* Estilos propios de AIHubConversations — CSS isolation.
   Vienen de tres hojas globales que se rompen a la vez:
   - wwwroot/css/admin/ai-hub-conversations.css (la hoja entera; la huerfana
     .aih-conv-agent era regla muerta y se conserva byte a byte);
   - wwwroot/css/admin/ai-hub.css (familia aih-section/-head/-title/-sub,
     aih-kpi-grid y la tabla compartida aih-trace-* que esta seccion tambien
     renderiza — bajo isolation cada seccion lleva SU copia);
   - wwwroot/css/admin/ai-hub-overview.css (tweak de .aih-section-sub, TRAS
     el bloque base para conservar el orden de fuente).

   Llevan `::deep`:
   - `.aih-conv-actions ::deep .rz-button` (RadzenButton de las acciones);
   - `.aih-token-chip ::deep .rzi` (RadzenIcon dentro del chip de tokens).
   La tabla es HTML propio de este marcado (table/thead/td/span): lleva hash
   y se acota sola. status-active/archived/deleted solo existen aqui como
   compuestos .aih-conv-status.status-* sobre un span propio.
   La raiz es <div class="aih-section"> propio: no hace falta envoltorio.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── ai-hub.css: primitivas de seccion + KPI grid + tabla compartida ── */

.aih-section[b-7k9eml42vw] { display: flex; flex-direction: column; gap: 1.25rem; }

.aih-section-head[b-7k9eml42vw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.aih-section-title[b-7k9eml42vw] {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--rz-text-title-color);
    letter-spacing: -0.01em;
}

.aih-section-sub[b-7k9eml42vw] {
    font-size: 0.85rem;
    color: var(--rz-text-tertiary-color);
    margin: 0.25rem 0 0;
}

/* ai-hub-overview.css: tweak que iba despues en el orden de carga */
.aih-section-sub[b-7k9eml42vw] { margin-top: 0.25rem; }

/* KPI grid used across Overview and Conversations */
.aih-kpi-grid[b-7k9eml42vw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* ─── Shared table used by Conversations and Traces ─── */
.aih-trace-filters[b-7k9eml42vw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 10px;
}

.aih-trace-table-wrap[b-7k9eml42vw] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 10px;
    overflow: auto;
}

.aih-trace-table[b-7k9eml42vw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.aih-trace-table thead th[b-7k9eml42vw] {
    text-align: left;
    padding: 0.7rem 0.95rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--rz-text-tertiary-color);
    border-bottom: 1px solid var(--rz-base-200);
    background: var(--rz-base-50, var(--rz-base-100));
    white-space: nowrap;
}

.aih-trace-table tbody td[b-7k9eml42vw] {
    padding: 0.7rem 0.95rem;
    border-bottom: 1px solid var(--rz-base-100);
    color: var(--rz-text-primary-color);
    vertical-align: middle;
}

.aih-trace-table tbody tr:last-child td[b-7k9eml42vw] { border-bottom: none; }

.aih-trace-col-n[b-7k9eml42vw] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.aih-trace-row[b-7k9eml42vw] { cursor: pointer; transition: background 0.1s ease; }
.aih-trace-row:hover td[b-7k9eml42vw] { background: var(--rz-base-50, var(--rz-base-100)); }

.aih-trace-empty[b-7k9eml42vw] {
    text-align: center;
    padding: 2.5rem 1rem !important;
    color: var(--rz-text-tertiary-color);
}

/* ── ai-hub-conversations.css: la hoja entera ── */

.aih-conv-user[b-7k9eml42vw] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.aih-conv-user strong[b-7k9eml42vw] {
    font-weight: 600;
    color: var(--rz-text-primary-color);
    font-size: 0.82rem;
}

.aih-conv-user span[b-7k9eml42vw] {
    font-size: 0.68rem;
    color: var(--rz-text-tertiary-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.aih-conv-title[b-7k9eml42vw] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.2;
}

.aih-conv-title span[b-7k9eml42vw] {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--rz-text-primary-color);
}

.aih-conv-agent[b-7k9eml42vw] {
    font-size: 0.66rem !important;
    font-weight: 600 !important;
    color: var(--rz-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.aih-conv-status[b-7k9eml42vw] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.aih-conv-status.status-active[b-7k9eml42vw] {
    color: var(--rz-success);
    background: color-mix(in srgb, var(--rz-success) 10%, transparent);
}

.aih-conv-status.status-archived[b-7k9eml42vw] {
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-100);
}

.aih-conv-status.status-deleted[b-7k9eml42vw] {
    color: var(--rz-danger);
    background: color-mix(in srgb, var(--rz-danger) 10%, transparent);
    text-decoration: line-through;
}

.aih-conv-table[b-7k9eml42vw] { min-width: 1200px; }

.aih-conv-actions[b-7k9eml42vw] {
    text-align: right;
    white-space: nowrap;
}

.aih-conv-actions[b-7k9eml42vw]  .rz-button {
    margin-left: 0.15rem;
}

/* ── ID chat link ── */
.aih-conv-id-link[b-7k9eml42vw] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rz-primary);
    text-decoration: none;
}

.aih-conv-id-link:hover[b-7k9eml42vw] { text-decoration: underline; }

/* ── Title badges: agent / handoff / reasoning ── */
.aih-conv-title-text[b-7k9eml42vw] {
    font-size: 0.85rem !important;
    font-weight: 500;
    color: var(--rz-text-primary-color);
}

.aih-conv-badges[b-7k9eml42vw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

.aih-tag[b-7k9eml42vw] {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
}

.aih-tag-agent[b-7k9eml42vw] {
    color: var(--rz-text-secondary-color);
    background: var(--rz-base-100);
    border: 1px solid var(--rz-base-200);
}

.aih-tag-handoff[b-7k9eml42vw] {
    color: var(--rz-info);
    background: color-mix(in srgb, var(--rz-info) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-info) 25%, transparent);
}

.aih-tag-reasoning[b-7k9eml42vw] {
    color: var(--rz-secondary);
    background: color-mix(in srgb, var(--rz-secondary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-secondary) 25%, transparent);
}

/* ── Messages pill ── */
.aih-pill-count[b-7k9eml42vw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-info) 12%, transparent);
    color: var(--rz-info);
    font-size: 0.75rem;
    font-weight: 700;
}

/* ── Tokens cell: Σ + ↑/↓ + extras ── */
.aih-conv-tokens[b-7k9eml42vw] { padding-right: 0.5rem; }

.aih-token-cell[b-7k9eml42vw] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    line-height: 1.2;
}

.aih-token-sum[b-7k9eml42vw] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: var(--rz-base-100);
    color: var(--rz-text-primary-color);
    font-size: 0.72rem;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.aih-token-io[b-7k9eml42vw] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--rz-text-tertiary-color);
}

.aih-token-in[b-7k9eml42vw] { color: var(--rz-primary); }
.aih-token-out[b-7k9eml42vw] { color: var(--rz-success); }
.aih-token-sep[b-7k9eml42vw] { color: var(--rz-text-disabled-color); }

.aih-token-extra[b-7k9eml42vw] {
    display: inline-flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.aih-token-chip[b-7k9eml42vw] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--rz-base-100);
    color: var(--rz-text-tertiary-color);
    font-size: 0.64rem;
    font-weight: 600;
}

.aih-token-chip[b-7k9eml42vw]  .rzi { font-size: 0.72rem !important; }

/* ── Stacked date cell ── */
.aih-conv-date[b-7k9eml42vw] { color: var(--rz-text-secondary-color); font-size: 0.78rem; }

.aih-date-stack[b-7k9eml42vw] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.aih-date-sub[b-7k9eml42vw] {
    color: var(--rz-text-tertiary-color);
    font-size: 0.7rem;
}
/* /Components/Pages/Admin/AI/AIHubModels.razor.rz.scp.css */
/* Estilos propios de AIHubModels — CSS isolation.
   Vienen de tres hojas globales que se rompen a la vez:
   - wwwroot/css/admin/ai-hub-models.css (la hoja entera, monoconsumidor;
     incluye SU copia de .aih-agent-dot — duplicarla bajo isolation es lo
     correcto, cada componente con su hash);
   - wwwroot/css/admin/ai-hub.css (familia aih-section/-head/-title/-sub y
     aih-loading/aih-empty, primitivas compartidas del hub);
   - wwwroot/css/admin/ai-hub-overview.css (tweak de .aih-section-sub, TRAS
     el bloque base para conservar el orden de fuente).

   Llevan `::deep`:
   - `.aih-empty ::deep .rzi` (RadzenIcon del estado vacio);
   - `.aih-cap ::deep .rzi` (RadzenIcon dentro del chip de capacidad).
   Las variantes --inactive/--on/--off se interpolan en C# pero caen sobre
   HTML de este marcado: llevan hash y se acotan solas.
   La raiz es <div class="aih-section"> propio: no hace falta envoltorio.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── ai-hub.css: primitivas de seccion compartidas ── */

.aih-section[b-sjvwu2jsa7] { display: flex; flex-direction: column; gap: 1.25rem; }

.aih-section-head[b-sjvwu2jsa7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.aih-section-title[b-sjvwu2jsa7] {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--rz-text-title-color);
    letter-spacing: -0.01em;
}

.aih-section-sub[b-sjvwu2jsa7] {
    font-size: 0.85rem;
    color: var(--rz-text-tertiary-color);
    margin: 0.25rem 0 0;
}

/* ai-hub-overview.css: tweak que iba despues en el orden de carga */
.aih-section-sub[b-sjvwu2jsa7] { margin-top: 0.25rem; }

.aih-loading[b-sjvwu2jsa7], .aih-empty[b-sjvwu2jsa7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 240px;
    color: var(--rz-text-tertiary-color);
}
.aih-empty[b-sjvwu2jsa7]  .rzi { font-size: 2rem; }

/* ── ai-hub-models.css: la hoja entera ── */

.aih-models-grid[b-sjvwu2jsa7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.9rem;
}

.aih-model-card[b-sjvwu2jsa7] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.aih-model-card:hover[b-sjvwu2jsa7] {
    border-color: var(--rz-base-300);
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.aih-model-card--inactive[b-sjvwu2jsa7] { opacity: 0.55; }

.aih-model-head[b-sjvwu2jsa7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.aih-model-status[b-sjvwu2jsa7] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-weight: 600;
}

.aih-model-status--on[b-sjvwu2jsa7]  { color: var(--rz-success); background: color-mix(in srgb, var(--rz-success) 10%, transparent); }
.aih-model-status--off[b-sjvwu2jsa7] { color: var(--rz-text-tertiary-color); background: var(--rz-base-100); }

.aih-model-name[b-sjvwu2jsa7] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--rz-text-title-color);
    word-break: break-word;
}

.aih-model-model[b-sjvwu2jsa7] {
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--rz-text-secondary-color);
}

.aih-model-caps[b-sjvwu2jsa7] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.aih-cap[b-sjvwu2jsa7] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.5rem;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    background: var(--rz-base-100);
    border: 1px solid var(--rz-base-200);
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.aih-cap[b-sjvwu2jsa7]  .rzi { font-size: 0.75rem; }
.aih-cap--reasoning[b-sjvwu2jsa7] { color: #6366f1; background: color-mix(in srgb, #6366f1 8%, transparent); border-color: color-mix(in srgb, #6366f1 25%, transparent); }

.aih-model-quota-head[b-sjvwu2jsa7] {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--rz-text-tertiary-color);
}

.aih-model-quota-val[b-sjvwu2jsa7] { font-variant-numeric: tabular-nums; color: var(--rz-text-primary-color); font-weight: 600; }

.aih-model-usage[b-sjvwu2jsa7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--rz-base-200);
    border-bottom: 1px solid var(--rz-base-200);
}

.aih-model-usage-stat[b-sjvwu2jsa7] { display: flex; flex-direction: column; gap: 0.1rem; }

.aih-model-usage-value[b-sjvwu2jsa7] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--rz-text-title-color);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.aih-model-usage-label[b-sjvwu2jsa7] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-tertiary-color);
}

.aih-model-agents[b-sjvwu2jsa7] { display: flex; flex-direction: column; gap: 0.35rem; }

.aih-model-agents-label[b-sjvwu2jsa7] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-tertiary-color);
    font-weight: 600;
}

.aih-model-agents-list[b-sjvwu2jsa7] { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.aih-model-agent-chip[b-sjvwu2jsa7] {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--rz-base-100);
    color: var(--rz-text-primary-color);
}

.aih-agent-dot[b-sjvwu2jsa7] { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
/* /Components/Pages/Admin/AI/AIHubOverview.razor.rz.scp.css */
/* Estilos propios de AIHubOverview — CSS isolation.
   Vienen de dos hojas globales que se rompen a la vez:
   - wwwroot/css/admin/ai-hub.css (las primitivas del hub que esta seccion
     renderiza: seccion, KPI grid + tarjeta base .aih-kpi del skeleton,
     charts, top-lists, error de carga, tabla de peticiones/dia y su parte
     del @media 960px — bajo isolation cada seccion lleva SU copia);
   - wwwroot/css/admin/ai-hub-overview.css (el tweak de .aih-section-sub,
     TRAS el bloque base para conservar el orden de fuente).

   OJO homonimo: .aih-kpi tambien existia en ai-hub-kpi-card.css (gap .7rem,
   padding .85rem 1rem) y esa GANABA por orden de carga; el skeleton de esta
   pagina pasa a la def de ai-hub.css (gap .85rem, padding 1rem 1.1rem) —
   politica de homonimos, solo visible durante la carga.

   Llevan `::deep`:
   - `.aih-empty ::deep .rzi` y `.aih-card-head ::deep .rzi` (RadzenIcon);
   - `.aih-load-error ::deep > .rz-icon` (RadzenIcon, conserva el `>`).
   `.aih-requests-grid .aih-day-label` funciona sin ::deep: el ancestro va
   sobre RadzenDataGrid (sin hash, valido) y el span del Template es HTML
   propio con hash. La raiz es <div class="aih-section"> propio: sin envoltorio.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── ai-hub.css: primitivas de seccion ── */

.aih-section[b-s9ek4zjk0v] { display: flex; flex-direction: column; gap: 1.25rem; }

.aih-section-head[b-s9ek4zjk0v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.aih-section-title[b-s9ek4zjk0v] {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--rz-text-title-color);
    letter-spacing: -0.01em;
}

.aih-section-sub[b-s9ek4zjk0v] {
    font-size: 0.85rem;
    color: var(--rz-text-tertiary-color);
    margin: 0.25rem 0 0;
}

/* ai-hub-overview.css: tweak que iba despues en el orden de carga */
.aih-section-sub[b-s9ek4zjk0v] { margin-top: 0.25rem; }

.aih-loading[b-s9ek4zjk0v], .aih-empty[b-s9ek4zjk0v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 240px;
    color: var(--rz-text-tertiary-color);
}
.aih-empty[b-s9ek4zjk0v]  .rzi { font-size: 2rem; }

/* KPI grid used across Overview and Conversations */
.aih-kpi-grid[b-s9ek4zjk0v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* KPI card base (KpiCard component reuses the same look). */
.aih-kpi[b-s9ek4zjk0v] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-width: 0;
}

.aih-kpi:hover[b-s9ek4zjk0v] {
    border-color: var(--rz-base-300);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Charts grid for Overview */
.aih-charts-grid[b-s9ek4zjk0v] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.aih-card[b-s9ek4zjk0v] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.aih-card-wide[b-s9ek4zjk0v] { grid-column: span 2; }

.aih-card-head[b-s9ek4zjk0v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--rz-base-200);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--rz-text-primary-color);
    background: var(--rz-base-50, var(--rz-base-100));
}

.aih-card-head[b-s9ek4zjk0v]  .rzi { color: var(--rz-text-tertiary-color); font-size: 1rem; }

.aih-card-hint[b-s9ek4zjk0v] {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--rz-text-tertiary-color);
    font-weight: 400;
}

.aih-card-body[b-s9ek4zjk0v] { padding: 1rem; min-height: 150px; }

.aih-chart-empty[b-s9ek4zjk0v] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    color: var(--rz-text-tertiary-color);
    font-size: 0.8rem;
}

.aih-top-list[b-s9ek4zjk0v] { display: flex; flex-direction: column; gap: 0.55rem; }

.aih-top-row[b-s9ek4zjk0v] {
    display: grid;
    grid-template-columns: minmax(160px, 1.2fr) minmax(80px, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.78rem;
}

.aih-top-label[b-s9ek4zjk0v] { display: flex; align-items: center; gap: 0.5rem; min-width: 0; overflow: hidden; }
.aih-top-name[b-s9ek4zjk0v] { font-weight: 500; color: var(--rz-text-primary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aih-top-bar[b-s9ek4zjk0v] { height: 6px; background: var(--rz-base-100); border-radius: 99px; overflow: hidden; }
.aih-top-fill[b-s9ek4zjk0v] { height: 100%; background: linear-gradient(90deg, var(--rz-primary-lighter), var(--rz-primary)); }
.aih-top-value[b-s9ek4zjk0v] { font-variant-numeric: tabular-nums; color: var(--rz-text-tertiary-color); white-space: nowrap; }

/* ─── Load failure: distinto del vacío, y con salida ─── */
.aih-load-error[b-s9ek4zjk0v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--rz-danger-light);
    border-left: 3px solid var(--rz-danger);
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-danger) 6%, transparent);
    color: var(--rz-text-primary-color);
    font-size: 0.8rem;
}

.aih-load-error[b-s9ek4zjk0v]  > .rz-icon { color: var(--rz-danger); }
.aih-load-error > div[b-s9ek4zjk0v] { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.aih-load-error span[b-s9ek4zjk0v] { color: var(--rz-text-secondary-color); overflow-wrap: anywhere; }

/* ─── Requests-per-day table (replaces the stacked column chart) ─── */
.aih-requests-grid .aih-day-label[b-s9ek4zjk0v] {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--rz-text-primary-color);
    text-transform: capitalize;   /* "mié 13/08" — the abbreviated weekday arrives lowercase */
}

.aih-day-volume[b-s9ek4zjk0v] {
    display: grid;
    grid-template-columns: 3.2rem 1fr;   /* fixed number column so the bars start on one line */
    align-items: center;
    gap: 0.55rem;
}

.aih-day-total[b-s9ek4zjk0v] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
    color: var(--rz-text-primary-color);
}

.aih-day-features[b-s9ek4zjk0v] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.aih-feature-chip[b-s9ek4zjk0v] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.1rem 0.45rem;
    border-radius: 99px;
    background: var(--rz-base-100);
    color: var(--rz-text-secondary-color);
    font-size: 0.72rem;
    white-space: nowrap;
}

.aih-feature-chip b[b-s9ek4zjk0v] {
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-primary-color);
}

@media (max-width: 960px) {
    .aih-charts-grid[b-s9ek4zjk0v] { grid-template-columns: 1fr; }
    .aih-card-wide[b-s9ek4zjk0v] { grid-column: span 1; }
}
/* /Components/Pages/Admin/AI/AIHubTraces.razor.rz.scp.css */
/* Estilos propios de AIHubTraces — CSS isolation.
   Vienen de wwwroot/css/admin/ai-hub-traces.css, que se cargaba en TODAS las paginas del
   portal. Verificado antes de mover: todas sus clases van sobre HTML de este
   marcado, ningun otro componente las usa, y todo el color sale de tokens de
   theme.css — asi que sigue respondiendo al color primario del cliente y al
   modo oscuro igual que antes.
   ───────────────────────────────────────────────────────────────────────── */

/* Table styles live on the AI Hub shell (ai-hub.css) so Conversations and
   Traces share the exact same look. Only the Traces-only drawer stays here. */

/* Drawer */
.aih-drawer-backdrop[b-s4afydkx3t] {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 3000;
}

.aih-drawer[b-s4afydkx3t] {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(720px, 90vw);
    background: var(--rz-base-background-color);
    border-left: 1px solid var(--rz-base-200);
    box-shadow: -8px 0 24px rgba(0,0,0,0.12);
    z-index: 3001;
    display: flex;
    flex-direction: column;
    animation: aih-drawer-in-b-s4afydkx3t 0.2s ease;
}

@keyframes aih-drawer-in-b-s4afydkx3t { from { transform: translateX(100%); } to { transform: translateX(0); } }

.aih-drawer-head[b-s4afydkx3t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--rz-base-200);
}

.aih-drawer-title[b-s4afydkx3t] { font-size: 1.05rem; font-weight: 700; color: var(--rz-text-title-color); }
.aih-drawer-sub[b-s4afydkx3t] { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; font-size: 0.75rem; color: var(--rz-text-secondary-color); }
.aih-drawer-sub code[b-s4afydkx3t] { background: var(--rz-base-100); padding: 0.1rem 0.4rem; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.aih-drawer-body[b-s4afydkx3t] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.aih-drawer-meta[b-s4afydkx3t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--rz-base-50, var(--rz-base-100));
    border-radius: 8px;
}
.aih-drawer-meta div[b-s4afydkx3t] { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; }
.aih-drawer-meta span[b-s4afydkx3t] { color: var(--rz-text-tertiary-color); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; }
.aih-drawer-meta strong[b-s4afydkx3t] { color: var(--rz-text-primary-color); font-size: 0.8rem; }
.aih-drawer-meta code[b-s4afydkx3t] { font-size: 0.7rem; }

.aih-drawer-section[b-s4afydkx3t] { display: flex; flex-direction: column; gap: 0.35rem; }
.aih-drawer-section h3[b-s4afydkx3t] {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rz-text-tertiary-color);
    font-weight: 700;
}
.aih-drawer-section pre[b-s4afydkx3t] {
    margin: 0;
    padding: 0.75rem;
    background: var(--rz-base-50, var(--rz-base-100));
    border-radius: 8px;
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 360px;
    overflow-y: auto;
}

.aih-drawer-section--danger pre[b-s4afydkx3t] {
    background: color-mix(in srgb, var(--rz-danger) 8%, transparent);
    color: var(--rz-danger);
}

/* ── Contribución cross-cluster (de admin/ai-hub.css + admin/ai-hub-overview.css) aplicada por el orquestador ── */
/* Traidas de wwwroot/css/admin/ai-hub.css al romper la hoja global (la cabecera
   de este fichero avisaba de que seccion y tabla vivian alli a proposito). */
.aih-section[b-s4afydkx3t] { display: flex; flex-direction: column; gap: 1.25rem; }

.aih-section-head[b-s4afydkx3t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.aih-section-title[b-s4afydkx3t] {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--rz-text-title-color);
    letter-spacing: -0.01em;
}

.aih-section-sub[b-s4afydkx3t] {
    font-size: 0.85rem;
    color: var(--rz-text-tertiary-color);
    margin: 0.25rem 0 0;
}

/* tweak de wwwroot/css/admin/ai-hub-overview.css (iba despues en el orden de carga) */
.aih-section-sub[b-s4afydkx3t] { margin-top: 0.25rem; }

.aih-load-error[b-s4afydkx3t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--rz-danger-light);
    border-left: 3px solid var(--rz-danger);
    border-radius: var(--rz-border-radius);
    background: color-mix(in srgb, var(--rz-danger) 6%, transparent);
    color: var(--rz-text-primary-color);
    font-size: 0.8rem;
}

.aih-load-error[b-s4afydkx3t]  > .rz-icon { color: var(--rz-danger); }
.aih-load-error > div[b-s4afydkx3t] { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.aih-load-error span[b-s4afydkx3t] { color: var(--rz-text-secondary-color); overflow-wrap: anywhere; }

.aih-trace-filters[b-s4afydkx3t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 10px;
}

.aih-trace-table-wrap[b-s4afydkx3t] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 10px;
    overflow: auto;
}

.aih-trace-table[b-s4afydkx3t] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.aih-trace-table thead th[b-s4afydkx3t] {
    text-align: left;
    padding: 0.7rem 0.95rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--rz-text-tertiary-color);
    border-bottom: 1px solid var(--rz-base-200);
    background: var(--rz-base-50, var(--rz-base-100));
    white-space: nowrap;
}

.aih-trace-table tbody td[b-s4afydkx3t] {
    padding: 0.7rem 0.95rem;
    border-bottom: 1px solid var(--rz-base-100);
    color: var(--rz-text-primary-color);
    vertical-align: middle;
}

.aih-trace-table tbody tr:last-child td[b-s4afydkx3t] { border-bottom: none; }

.aih-trace-col-n[b-s4afydkx3t] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aih-trace-time[b-s4afydkx3t] {
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-tertiary-color);
    white-space: nowrap;
    font-size: 0.76rem;
}

.aih-trace-row[b-s4afydkx3t] { cursor: pointer; transition: background 0.1s ease; }
.aih-trace-row:hover td[b-s4afydkx3t] { background: var(--rz-base-50, var(--rz-base-100)); }

.aih-trace-feature[b-s4afydkx3t] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    background: var(--rz-base-100);
    color: var(--rz-text-primary-color);
}

.aih-trace-model[b-s4afydkx3t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.76rem;
    white-space: nowrap;
}

.aih-trace-empty[b-s4afydkx3t] {
    text-align: center;
    padding: 2.5rem 1rem !important;
    color: var(--rz-text-tertiary-color);
}

.aih-trace-pager[b-s4afydkx3t] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.aih-trace-pager-info[b-s4afydkx3t] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    margin-right: 0.5rem;
}
/* /Components/Pages/Admin/AI/KpiCard.razor.rz.scp.css */
/* Estilos propios de KpiCard — CSS isolation.
   Vienen de wwwroot/css/admin/ai-hub-kpi-card.css (hoja entera).

   El div.aih-kpi raiz es HTML de este marcado; los modificadores
   --danger/--success/--warning llegan por el parametro CssClass interpolado
   sobre ESE MISMO elemento, que si lleva el `b-{hash}` (mismo patron que
   ProviderBadge.razor.css). Solo el icono necesita `::deep`:
   `.aih-kpi-icon ::deep .rzi` (RadzenIcon).

   OJO homonimo: el skeleton de AIHubOverview tambien usa .aih-kpi pero con
   la def de ai-hub.css copiada en SU AIHubOverview.razor.css — cada uno con
   su hash, sin pisarse.
   ───────────────────────────────────────────────────────────────────────────── */

.aih-kpi[b-nq91apsgi3] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-width: 0;
}

.aih-kpi:hover[b-nq91apsgi3] {
    border-color: var(--rz-base-300);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.aih-kpi-icon[b-nq91apsgi3] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rz-base-100);
    color: var(--rz-text-secondary-color);
}

.aih-kpi-icon[b-nq91apsgi3]  .rzi { font-size: 1.2rem; }

.aih-kpi-body[b-nq91apsgi3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.aih-kpi-value[b-nq91apsgi3] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--rz-text-title-color);
    font-variant-numeric: tabular-nums;
}

.aih-kpi-label[b-nq91apsgi3] {
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
    font-weight: 600;
}

.aih-kpi-sub[b-nq91apsgi3] {
    font-size: 0.68rem;
    color: var(--rz-text-tertiary-color);
    margin-top: 0.1rem;
}

.aih-kpi--danger .aih-kpi-icon[b-nq91apsgi3] { color: var(--rz-danger); background: color-mix(in srgb, var(--rz-danger) 10%, var(--rz-base-100)); }
.aih-kpi--danger .aih-kpi-value[b-nq91apsgi3] { color: var(--rz-danger); }

.aih-kpi--success .aih-kpi-icon[b-nq91apsgi3] { color: var(--rz-success); background: color-mix(in srgb, var(--rz-success) 10%, var(--rz-base-100)); }
.aih-kpi--warning .aih-kpi-icon[b-nq91apsgi3] { color: var(--rz-warning); background: color-mix(in srgb, var(--rz-warning) 10%, var(--rz-base-100)); }
/* /Components/Pages/Admin/AI/ProviderBadge.razor.rz.scp.css */
/* Estilos propios de ProviderBadge — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/admin/ai-hub-provider-badge.css.

   Los modificadores (`--azure`, `--openai`, …) no aparecen literales en el
   marcado porque se interpolan: <span class="aih-provider aih-provider--@Kind">.
   Da igual — el <span> SI esta escrito aqui, asi que el compilador le pone el
   `b-{hash}` y la clase que llega en tiempo de ejecucion casa contra el mismo
   elemento ya marcado.

   Los colores de marca (Azure, OpenAI, Anthropic) siguen siendo literales a
   proposito: identifican al proveedor, no al tema del cliente.
   ───────────────────────────────────────────────────────────────────────────── */

.aih-provider[b-qydi7ocvdr] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    border: 1px solid var(--rz-base-200);
    background: var(--rz-base-background-color);
    color: var(--rz-text-primary-color);
    line-height: 1.4;
    white-space: nowrap;
}

.aih-provider--azure[b-qydi7ocvdr]    { color: #0078d4; border-color: color-mix(in srgb, #0078d4 30%, transparent); background: color-mix(in srgb, #0078d4 8%, transparent); }
.aih-provider--openai[b-qydi7ocvdr]   { color: #10a37f; border-color: color-mix(in srgb, #10a37f 30%, transparent); background: color-mix(in srgb, #10a37f 8%, transparent); }
.aih-provider--anthropic[b-qydi7ocvdr]{ color: #d97757; border-color: color-mix(in srgb, #d97757 30%, transparent); background: color-mix(in srgb, #d97757 8%, transparent); }
.aih-provider--unknown[b-qydi7ocvdr]  { color: var(--rz-text-tertiary-color); }

.aih-provider svg[b-qydi7ocvdr] { flex-shrink: 0; }
/* /Components/Pages/Admin/AI/StatusPill.razor.rz.scp.css */
/* Estilos propios de StatusPill — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/admin/ai-hub-status-pill.css. Mismo caso que
   ProviderBadge: los estados (`--started`, `--failed`, …) se interpolan sobre un
   <span> que si esta en este marcado.

   Ojo al mirar quien usa esto: `aih-pill-count`, que es de AIHubConversations,
   NO es de esta hoja. Una busqueda con  lo confunde con `aih-pill` porque 
   rompe entre 'l' y '-'.
   ───────────────────────────────────────────────────────────────────────────── */

.aih-pill[b-10is3ki4ok] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.aih-pill-dot[b-10is3ki4ok] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.aih-pill--started[b-10is3ki4ok]   { color: var(--rz-info);    background: color-mix(in srgb, var(--rz-info) 10%, transparent); }
.aih-pill--completed[b-10is3ki4ok] { color: var(--rz-success); background: color-mix(in srgb, var(--rz-success) 10%, transparent); }
.aih-pill--failed[b-10is3ki4ok]    { color: var(--rz-danger);  background: color-mix(in srgb, var(--rz-danger) 10%, transparent); }
.aih-pill--agentmissing[b-10is3ki4ok] { color: var(--rz-warning); background: color-mix(in srgb, var(--rz-warning) 10%, transparent); }
/* /Components/Pages/Admin/ChatAdminDetail.razor.rz.scp.css */
/* Estilos propios de ChatAdminDetail — CSS isolation.
   Vienen de wwwroot/css/admin/chat-admin-detail.css (hoja entera, 1295 lineas).

   La pagina no tenia raiz HTML propia (arranca en RadzenRow/RadzenColumn), asi
   que el marcado gana un <div class="chat-admin-detail-page"> envoltorio (sin
   regla propia, solo ancla del `b-{hash}`). Desde ese ancla salen por `::deep`
   las clases que caen sobre componentes Radzen:
   - admin-surface-card / -hero(::before) / -main / -side, chat-summary-card,
     quick-overview-card, conversation-card, exec-flow-card,
     selected-trace-card (todas sobre <RadzenCard>);
   - trace-tabs (sobre <RadzenTabs>);
   - los compuestos .overview-card .rz-text-* / .text-muted (RadzenText).
   Tambien los `.rzi` de RadzenIcon dentro de exec-flow-bar-*, exec-flow-handoff,
   exec-flow-tool-chip y exec-flow-metric (`X ::deep .rzi`).

   El resto (140 clases, muchas interpoladas en C#: avatar-*, bubble-*,
   status-*, exec-flow status-status-*, ot-span-bar-*) va sobre HTML propio de
   este marcado — incluidos los templates de RadzenTabsItem, que compilan con
   el hash del padre — y se acota solo. Las reglas huerfanas (overview-card*,
   token-card*, trace-kpi-*, overview-stats-grid) se conservan byte a byte.
   ───────────────────────────────────────────────────────────────────────────── */

.chat-admin-detail-page[b-o6ct3yzhso]  .admin-surface-card {
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 76%, transparent);
    border-radius: 22px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--rz-base-background-color) 96%, transparent),
            color-mix(in srgb, var(--rz-base-100) 40%, var(--rz-base-background-color) 60%));
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--rz-white) 55%, transparent) inset,
        0 18px 40px color-mix(in srgb, var(--rz-base-900) 8%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.chat-admin-detail-page[b-o6ct3yzhso]  .admin-surface-card-hero {
    position: relative;
    overflow: hidden;
}

.chat-admin-detail-page[b-o6ct3yzhso]  .admin-surface-card-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 72px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--rz-primary-lighter) 82%, transparent),
        color-mix(in srgb, var(--rz-info-lighter) 68%, transparent));
    opacity: 0.9;
    pointer-events: none;
}

.chat-admin-detail-page[b-o6ct3yzhso]  .admin-surface-card-main,
.chat-admin-detail-page[b-o6ct3yzhso]  .admin-surface-card-side {
    overflow: hidden;
}

.chat-admin-detail-page[b-o6ct3yzhso]  .chat-summary-card {
    min-height: 100%;
    padding: 1.15rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.chat-summary-eyebrow[b-o6ct3yzhso],
.selected-trace-eyebrow[b-o6ct3yzhso] {
    position: relative;
    z-index: 1;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color);
}

.chat-summary-meta[b-o6ct3yzhso],
.selected-trace-caption[b-o6ct3yzhso] {
    position: relative;
    z-index: 1;
    font-size: 0.82rem;
    color: var(--rz-text-secondary-color);
}

.chat-summary-grid[b-o6ct3yzhso],
.selected-trace-stats[b-o6ct3yzhso],
.overview-stats-grid[b-o6ct3yzhso] {
    display: grid;
    gap: 0.85rem;
}

.chat-summary-grid[b-o6ct3yzhso],
.selected-trace-stats[b-o6ct3yzhso] {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.chat-summary-grid-wide[b-o6ct3yzhso] {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.overview-stats-grid[b-o6ct3yzhso] {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.chat-summary-item[b-o6ct3yzhso],
.selected-trace-stats > div[b-o6ct3yzhso] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding: 0.9rem 0.95rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 72%, transparent);
    background: color-mix(in srgb, var(--rz-base-background-color) 82%, transparent);
}

.chat-summary-label[b-o6ct3yzhso] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rz-text-secondary-color);
}

.chat-summary-value[b-o6ct3yzhso],
.selected-trace-title[b-o6ct3yzhso] {
    color: var(--rz-text-title-color);
    font-weight: 700;
    letter-spacing: -0.02em;
    word-break: break-word;
}

.chat-summary-caption[b-o6ct3yzhso] {
    color: var(--rz-text-secondary-color);
    font-size: 0.82rem;
    word-break: break-word;
}

.chat-admin-detail-page[b-o6ct3yzhso]  .quick-overview-card {
    min-height: 100%;
    padding: 1.15rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

.quick-overview-header[b-o6ct3yzhso] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 0.75rem;
}

.quick-overview-grid[b-o6ct3yzhso] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

.quick-overview-item[b-o6ct3yzhso] {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 72%, transparent);
    background: color-mix(in srgb, var(--rz-base-background-color) 88%, transparent);
}

.quick-overview-value[b-o6ct3yzhso] {
    color: var(--rz-text-title-color);
    font-weight: 700;
    letter-spacing: -0.02em;
    word-break: break-word;
}

.chat-admin-detail-page[b-o6ct3yzhso]  .overview-card {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    border-top-width: 4px;
    border-top-style: solid;
    padding-top: 0.35rem;
}
.overview-card-primary[b-o6ct3yzhso] {
    border-top-color: var(--dalatic-primary);
}
.overview-card-neutral[b-o6ct3yzhso] {
    border-top-color: var(--rz-info);
}
.overview-card-status[b-o6ct3yzhso] {
    border-top-color: var(--rz-warning);
}
.overview-card-token[b-o6ct3yzhso] {
    border-top-color: var(--dalatic-accent-primary);
}
.overview-card-trace[b-o6ct3yzhso] {
    border-top-color: #0ea5e9;
}
.overview-card-cost[b-o6ct3yzhso] {
    border-top-color: var(--dalatic-success);
}
.overview-inline-status[b-o6ct3yzhso] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chat-admin-detail-page[b-o6ct3yzhso]  .overview-card .rz-text-caption,
.chat-admin-detail-page[b-o6ct3yzhso]  .overview-card .text-muted {
    position: relative;
    z-index: 1;
}

.chat-admin-detail-page[b-o6ct3yzhso]  .overview-card .rz-text-h6,
.chat-admin-detail-page[b-o6ct3yzhso]  .overview-card .rz-text-h5 {
    position: relative;
    z-index: 1;
    color: var(--rz-text-title-color);
    letter-spacing: -0.02em;
}

.token-card[b-o6ct3yzhso] {
    transition: transform 0.2s;
}
.token-card:hover[b-o6ct3yzhso] {
    transform: scale(1.02);
}
.token-input[b-o6ct3yzhso] {
    border-top: 4px solid var(--dalatic-accent-primary);
}
.token-output[b-o6ct3yzhso] {
    border-top: 4px solid var(--dalatic-success);
}

.trace-kpi-card[b-o6ct3yzhso] {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
}
.trace-kpi-primary[b-o6ct3yzhso] {
    border-top: 4px solid var(--dalatic-primary);
}
.trace-kpi-info[b-o6ct3yzhso] {
    border-top: 4px solid #0ea5e9;
}
.trace-kpi-warning[b-o6ct3yzhso] {
    border-top: 4px solid var(--rz-warning);
}
.trace-kpi-success[b-o6ct3yzhso] {
    border-top: 4px solid var(--dalatic-success);
}

.trace-selector-header[b-o6ct3yzhso],
.selected-trace-header[b-o6ct3yzhso] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 0.75rem;
}

.trace-selector-list[b-o6ct3yzhso] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.trace-selector-item[b-o6ct3yzhso] {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 70%, transparent);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--rz-base-background-color) 98%, transparent),
            color-mix(in srgb, var(--rz-base-100) 38%, var(--rz-base-background-color) 62%));
    border-radius: 16px;
    padding: 0.95rem 1rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--rz-base-900) 4%, transparent);
}

.trace-selector-item:hover[b-o6ct3yzhso] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--dalatic-primary) 45%, var(--rz-border-color));
    box-shadow: 0 18px 34px color-mix(in srgb, var(--dalatic-primary) 10%, transparent);
}

.trace-selector-item.is-selected[b-o6ct3yzhso] {
    border-color: color-mix(in srgb, var(--dalatic-primary) 65%, transparent);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--dalatic-primary) 8%, var(--rz-base-background-color)),
            color-mix(in srgb, var(--rz-info-lighter) 26%, var(--rz-base-background-color)));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--dalatic-primary) 12%, transparent),
        0 18px 38px color-mix(in srgb, var(--dalatic-primary) 12%, transparent);
}

.trace-selector-top[b-o6ct3yzhso],
.trace-selector-meta[b-o6ct3yzhso] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.trace-selector-top[b-o6ct3yzhso] {
    margin-bottom: 0.35rem;
    align-items: center;
}

.trace-selector-heading[b-o6ct3yzhso] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.2rem;
}

.trace-selector-meta[b-o6ct3yzhso] {
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
}

.trace-selector-agent[b-o6ct3yzhso] {
    font-weight: 700;
    color: var(--rz-text-color);
}

.trace-selector-status[b-o6ct3yzhso] {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.trace-selector-model[b-o6ct3yzhso] {
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    word-break: break-word;
}

.trace-selector-facts[b-o6ct3yzhso] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.trace-meta-pill[b-o6ct3yzhso] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 68%, transparent);
    background: color-mix(in srgb, var(--rz-base-background-color) 84%, transparent);
    color: var(--rz-text-secondary-color);
    font-size: 0.75rem;
}

.chat-admin-detail-page[b-o6ct3yzhso]  .selected-trace-card {
    padding: 1rem 1.05rem;
}

.trace-native-note[b-o6ct3yzhso] {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 70%, transparent);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--rz-primary-lighter) 55%, transparent),
            color-mix(in srgb, var(--rz-info-lighter) 46%, transparent));
    font-size: 0.86rem;
    color: var(--rz-text-secondary-color);
}

.chat-admin-detail-page[b-o6ct3yzhso]  .trace-tabs {
    width: 100%;
}

.trace-tab-panel[b-o6ct3yzhso] {
    padding-top: 0.9rem;
}

.trace-ot-actions[b-o6ct3yzhso] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ot-kpi-grid[b-o6ct3yzhso] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
}

.ot-kpi-card[b-o6ct3yzhso] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.05rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 72%, transparent);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--rz-base-background-color) 98%, transparent),
            color-mix(in srgb, var(--rz-primary-lighter) 18%, var(--rz-base-background-color) 82%));
    box-shadow: 0 14px 28px color-mix(in srgb, var(--rz-base-900) 5%, transparent);
}

.ot-kpi-value[b-o6ct3yzhso] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rz-text-title-color);
    letter-spacing: -0.03em;
}

.ot-layout[b-o6ct3yzhso] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.ot-span-list-panel[b-o6ct3yzhso],
.ot-span-detail-panel[b-o6ct3yzhso] {
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 72%, transparent);
    border-radius: 18px;
    padding: 1rem;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--rz-base-background-color) 97%, transparent),
            color-mix(in srgb, var(--rz-base-100) 36%, var(--rz-base-background-color) 64%));
}

.ot-section-header[b-o6ct3yzhso] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}

.ot-span-list[b-o6ct3yzhso] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.ot-span-row[b-o6ct3yzhso] {
    width: 100%;
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 70%, transparent);
    border-radius: 16px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--rz-base-background-color) 99%, transparent),
            color-mix(in srgb, var(--rz-base-100) 34%, var(--rz-base-background-color) 66%));
    padding: 0.85rem 0.95rem;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.ot-span-row:hover[b-o6ct3yzhso] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--dalatic-primary) 45%, var(--rz-border-color));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--dalatic-primary) 10%, transparent);
}

.ot-span-row.is-selected[b-o6ct3yzhso] {
    border-color: color-mix(in srgb, var(--dalatic-primary) 60%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--dalatic-primary) 20%, transparent);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--dalatic-primary) 8%, var(--rz-base-background-color)),
            color-mix(in srgb, var(--rz-info-lighter) 24%, var(--rz-base-background-color)));
}

.ot-span-row.is-error[b-o6ct3yzhso] {
    border-color: color-mix(in srgb, var(--rz-danger) 38%, var(--rz-border-color));
}

.ot-span-main[b-o6ct3yzhso] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: start;
    margin-bottom: 0.45rem;
}

.ot-span-title-block[b-o6ct3yzhso] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    min-width: 0;
}

.ot-span-name[b-o6ct3yzhso] {
    font-weight: 700;
    color: var(--rz-text-color);
    word-break: break-word;
}

.ot-span-kind[b-o6ct3yzhso],
.ot-span-children[b-o6ct3yzhso] {
    font-size: 0.72rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-primary-lighter) 65%, transparent);
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ot-span-meta[b-o6ct3yzhso] {
    display: inline-flex;
    flex-direction: column;
    align-items: end;
    gap: 0.18rem;
    font-size: 0.74rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

.ot-span-timeline-track[b-o6ct3yzhso] {
    position: relative;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--rz-border-color) 32%, transparent),
            color-mix(in srgb, var(--rz-base-300) 16%, transparent));
}

.ot-span-bar[b-o6ct3yzhso] {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 10px;
    border-radius: 999px;
}

.ot-span-bar-server[b-o6ct3yzhso] {
    background: linear-gradient(90deg, color-mix(in srgb, var(--dalatic-primary) 85%, white 15%), color-mix(in srgb, #0ea5e9 72%, white 28%));
}

.ot-span-bar-client[b-o6ct3yzhso] {
    background: linear-gradient(90deg, color-mix(in srgb, var(--dalatic-success) 84%, white 16%), color-mix(in srgb, #14b8a6 72%, white 28%));
}

.ot-span-bar-internal[b-o6ct3yzhso] {
    background: linear-gradient(90deg, color-mix(in srgb, var(--rz-warning) 80%, white 20%), color-mix(in srgb, #f59e0b 66%, white 34%));
}

.ot-span-bar-producer[b-o6ct3yzhso],
.ot-span-bar-consumer[b-o6ct3yzhso] {
    background: linear-gradient(90deg, color-mix(in srgb, #8b5cf6 78%, white 22%), color-mix(in srgb, #6366f1 68%, white 32%));
}

.ot-span-source[b-o6ct3yzhso] {
    margin-top: 0.45rem;
    font-size: 0.74rem;
    color: var(--rz-text-secondary-color);
    word-break: break-word;
}

.trace-funnel[b-o6ct3yzhso] {
    display: grid;
    gap: 0.9rem;
}

.trace-funnel-stage[b-o6ct3yzhso] {
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 72%, transparent);
    border-radius: 18px;
    padding: 1rem 1.05rem;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--rz-base-background-color) 98%, transparent),
            color-mix(in srgb, var(--rz-primary-lighter) 14%, var(--rz-base-background-color) 86%));
    box-shadow: 0 16px 30px color-mix(in srgb, var(--rz-base-900) 5%, transparent);
}

.trace-funnel-stage.is-muted[b-o6ct3yzhso] {
    opacity: 0.68;
}

.trace-funnel-stage-top[b-o6ct3yzhso] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.trace-funnel-label[b-o6ct3yzhso] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-color);
}

.trace-funnel-value[b-o6ct3yzhso] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--rz-text-title-color);
}

.trace-funnel-bar[b-o6ct3yzhso] {
    height: 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-border-color) 32%, transparent);
    overflow: hidden;
}

.trace-funnel-fill[b-o6ct3yzhso] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--rz-primary) 84%, transparent),
        color-mix(in srgb, var(--rz-info) 74%, transparent),
        color-mix(in srgb, var(--rz-success) 78%, transparent));
    min-width: 8%;
    box-shadow: 0 0 18px color-mix(in srgb, var(--rz-primary) 26%, transparent);
}

.trace-funnel-caption[b-o6ct3yzhso] {
    margin-top: 0.45rem;
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
}

.trace-detail-grid[b-o6ct3yzhso] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.trace-detail-grid > div[b-o6ct3yzhso] {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding: 0.9rem 0.95rem;
    border-radius: 16px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--rz-base-background-color) 99%, transparent),
            color-mix(in srgb, var(--rz-base-100) 34%, var(--rz-base-background-color) 66%));
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 70%, transparent);
}

.trace-detail-label[b-o6ct3yzhso] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
}

.trace-detail-value[b-o6ct3yzhso] {
    font-size: 0.88rem;
    color: var(--rz-text-color);
    word-break: break-word;
}

.trace-detail-value.otel-id[b-o6ct3yzhso] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.trace-detail-value.otel-id code[b-o6ct3yzhso] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.76rem;
    background: var(--rz-base-100);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    word-break: break-all;
}
.otel-copy-btn[b-o6ct3yzhso] {
    border: 1px solid var(--rz-base-200);
    background: var(--rz-base-background-color);
    border-radius: 5px;
    padding: 0.18rem 0.35rem;
    cursor: pointer;
    color: var(--rz-text-tertiary-color);
    display: inline-flex;
    align-items: center;
    transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
    flex-shrink: 0;
}
.otel-copy-btn:hover[b-o6ct3yzhso] {
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    border-color: var(--rz-primary-lighter);
}

.trace-json-panel[b-o6ct3yzhso] {
    margin-top: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 75%, transparent);
    border-radius: 16px;
    padding: 0.9rem;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--rz-base-background-color) 98%, transparent),
            color-mix(in srgb, var(--rz-base-100) 34%, var(--rz-base-background-color) 66%));
}

.trace-json-panel summary[b-o6ct3yzhso] {
    cursor: pointer;
    font-weight: 700;
}

.trace-json-panel pre[b-o6ct3yzhso] {
    margin: 0.75rem 0 0;
    max-height: 240px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.78rem;
}

/* ── Chat container ── */
.chat-container[b-o6ct3yzhso] {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    max-height: calc(100vh - 280px);
    min-height: 520px;
    overflow-y: auto;
    padding: 1.15rem 0.7rem 0.85rem;
    scroll-behavior: smooth;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--rz-info-lighter) 65%, transparent), transparent 28%),
        radial-gradient(circle at top left, color-mix(in srgb, var(--rz-primary-lighter) 70%, transparent), transparent 30%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--rz-base-100) 55%, var(--rz-base-background-color) 45%),
            color-mix(in srgb, var(--rz-base-background-color) 96%, transparent));
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 72%, transparent);
    border-radius: 22px;
}

.chat-admin-detail-page[b-o6ct3yzhso]  .conversation-card {
    height: 100%;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--rz-base-background-color) 98%, transparent),
            color-mix(in srgb, var(--rz-base-100) 44%, var(--rz-base-background-color) 56%));
}

/* ── Bubble rows ── */
.chat-bubble-row[b-o6ct3yzhso] {
    display: flex;
    gap: 0.9rem;
    max-width: 85%;
}
.chat-row-user[b-o6ct3yzhso] {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.chat-row-assistant[b-o6ct3yzhso] {
    align-self: flex-start;
}

/* ── Avatar ── */
.chat-avatar[b-o6ct3yzhso] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 6px;
    box-shadow: 0 14px 26px color-mix(in srgb, var(--rz-base-900) 10%, transparent);
}
.avatar-user[b-o6ct3yzhso] {
    background: linear-gradient(135deg, var(--rz-primary), var(--rz-primary-dark));
    color: var(--rz-on-primary);
}
.avatar-assistant[b-o6ct3yzhso] {
    background: linear-gradient(135deg, var(--rz-info), var(--rz-primary));
    color: var(--rz-on-info);
}

/* ── Bubble ── */
.chat-bubble[b-o6ct3yzhso] {
    border-radius: 20px;
    padding: 0.95rem 1.05rem;
    position: relative;
    min-width: 160px;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--rz-base-900) 6%, transparent);
}
.bubble-trace-selectable[b-o6ct3yzhso] {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.bubble-trace-selectable:hover[b-o6ct3yzhso] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--dalatic-primary) 45%, var(--rz-border-color));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--dalatic-primary) 10%, transparent);
}
.bubble-trace-selected[b-o6ct3yzhso] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--dalatic-primary) 28%, transparent);
    border-color: color-mix(in srgb, var(--dalatic-primary) 55%, transparent);
}
.bubble-user[b-o6ct3yzhso] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--rz-primary) 12%, var(--rz-base-background-color)),
        color-mix(in srgb, var(--rz-info-lighter) 42%, var(--rz-base-background-color)));
    border: 1px solid color-mix(in srgb, var(--rz-primary) 22%, transparent);
    border-top-right-radius: 6px;
}
.bubble-assistant[b-o6ct3yzhso] {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--rz-base-background-color) 100%, transparent),
        color-mix(in srgb, var(--rz-base-100) 34%, var(--rz-base-background-color) 66%));
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 74%, transparent);
    border-top-left-radius: 6px;
}

.chat-bubble-header[b-o6ct3yzhso] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.55rem;
    gap: 0.75rem;
}
.chat-sender[b-o6ct3yzhso] {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--rz-text-title-color);
    letter-spacing: 0.01em;
}
.chat-time[b-o6ct3yzhso] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

.chat-bubble-body[b-o6ct3yzhso] {
    font-size: 0.92rem;
    line-height: 1.62;
    overflow-x: auto;
}
.chat-user-text[b-o6ct3yzhso] {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ── Metrics chips ── */
.chat-metrics[b-o6ct3yzhso] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid color-mix(in srgb, var(--rz-border-color) 50%, transparent);
}
.metric-chip[b-o6ct3yzhso] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
    background: color-mix(in srgb, var(--rz-base-200) 56%, transparent);
    padding: 0.26rem 0.58rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 50%, transparent);
}
.metric-model[b-o6ct3yzhso] {
    background: color-mix(in srgb, var(--rz-primary-lighter) 78%, transparent);
    color: var(--rz-primary-dark);
    font-weight: 600;
}
.metric-link[b-o6ct3yzhso] {
    background: color-mix(in srgb, var(--rz-info-lighter) 82%, transparent);
    color: var(--rz-info-dark);
    font-weight: 600;
}
.metric-total[b-o6ct3yzhso] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
    font-weight: 700;
}
.metric-cost[b-o6ct3yzhso] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: var(--rz-success);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.metric-reasoning[b-o6ct3yzhso] {
    background: color-mix(in srgb, var(--rz-warning) 12%, transparent);
    color: var(--rz-warning);
    font-weight: 600;
}

/* ── Function calls ── */
.chat-fn-calls[b-o6ct3yzhso] {
    margin-top: 0.5rem;
}
.chat-fn-calls details summary[b-o6ct3yzhso] {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--rz-warning-dark);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
}
.fn-json[b-o6ct3yzhso] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0.35rem 0 0;
    max-height: 200px;
    overflow-y: auto;
    background: color-mix(in srgb, var(--rz-warning-lighter) 92%, transparent);
    padding: 0.7rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--rz-warning) 22%, transparent);
}

/* ── System message ── */
.chat-system-msg[b-o6ct3yzhso] {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    background: color-mix(in srgb, var(--rz-info-lighter) 82%, transparent);
    padding: 0.48rem 1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--rz-info) 18%, transparent);
}

/* ── Tool message ── */
.chat-tool-msg[b-o6ct3yzhso] {
    align-self: center;
    max-width: 70%;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--rz-warning-lighter) 84%, transparent),
        color-mix(in srgb, var(--rz-base-background-color) 94%, transparent));
    border: 1px solid color-mix(in srgb, var(--rz-warning) 18%, transparent);
    border-radius: 16px;
    padding: 0.7rem 0.85rem;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--rz-warning) 8%, transparent);
}
.chat-tool-header[b-o6ct3yzhso] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
}
.chat-tool-name[b-o6ct3yzhso] {
    font-weight: 600;
    color: var(--rz-warning);
}
.chat-tool-content[b-o6ct3yzhso] {
    margin-top: 0.35rem;
}
.tool-pre[b-o6ct3yzhso] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    max-height: 150px;
    overflow-y: auto;
    background: color-mix(in srgb, var(--rz-base-background-color) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 62%, transparent);
    border-radius: 12px;
    padding: 0.65rem;
}

.status-active[b-o6ct3yzhso] { color: var(--dalatic-success); font-weight: 600; }
.status-archived[b-o6ct3yzhso] { color: var(--rz-text-disabled-color); }
.status-deleted[b-o6ct3yzhso] { color: var(--rz-danger); text-decoration: line-through; }

@media (max-width: 1279px) {
    .chat-container[b-o6ct3yzhso] {
        max-height: none;
        min-height: 360px;
    }

    .ot-layout[b-o6ct3yzhso] {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   EXECUTION FLOW — Foundry-style swimlanes
   ═══════════════════════════════════════════════════════════════════════ */
.chat-admin-detail-page[b-o6ct3yzhso]  .exec-flow-card {
    padding: 1.1rem 1.35rem 1.25rem;
    border-radius: 14px;
}

.exec-flow-head[b-o6ct3yzhso] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.exec-flow-legend[b-o6ct3yzhso] {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.72rem;
    color: var(--rz-text-tertiary-color);
    letter-spacing: 0.02em;
}

.exec-flow-dot[b-o6ct3yzhso] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.exec-dot-user[b-o6ct3yzhso]    { background: color-mix(in srgb, var(--rz-info) 70%, transparent); }
.exec-dot-agent[b-o6ct3yzhso]   { background: color-mix(in srgb, var(--rz-primary) 75%, transparent); }
.exec-dot-tool[b-o6ct3yzhso]    { background: color-mix(in srgb, var(--rz-warning) 75%, transparent); }
.exec-dot-handoff[b-o6ct3yzhso] { background: color-mix(in srgb, var(--rz-secondary) 75%, transparent); }

.exec-flow-wrap[b-o6ct3yzhso] {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 1rem;
    border: 1px solid var(--rz-base-200);
    border-radius: 12px;
    padding: 0.85rem 0.9rem 0.85rem 0.85rem;
    background: var(--rz-base-background-color);
}

.exec-flow-lanes[b-o6ct3yzhso] {
    display: grid;
    grid-template-rows: 36px 1fr 52px 1fr;
    row-gap: 0.5rem;
    align-items: stretch;
}

.exec-flow-lane-label[b-o6ct3yzhso] {
    display: flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-tertiary-color);
    padding: 0.4rem 0.6rem;
    border-right: 2px solid var(--rz-base-200);
}

.exec-flow-track[b-o6ct3yzhso] {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    align-items: stretch;
}

.exec-flow-track[b-o6ct3yzhso]::-webkit-scrollbar { height: 8px; }
.exec-flow-track[b-o6ct3yzhso]::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--rz-text-tertiary-color) 30%, transparent);
    border-radius: 4px;
}

.exec-flow-turn[b-o6ct3yzhso] {
    display: grid;
    grid-template-rows: 36px 1fr 52px 1fr;
    row-gap: 0.5rem;
    min-width: 210px;
    max-width: 260px;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--rz-base-200);
    border-radius: 10px;
    background: var(--rz-base-background-color);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
    position: relative;
}

.exec-flow-turn:hover[b-o6ct3yzhso] {
    border-color: color-mix(in srgb, var(--rz-primary) 40%, var(--rz-base-200));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--rz-primary) 12%, transparent);
}

.exec-flow-turn.is-selected[b-o6ct3yzhso] {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rz-primary) 18%, transparent);
}

.exec-flow-turn.status-status-active[b-o6ct3yzhso]::before { background: var(--rz-success); }
.exec-flow-turn.status-status-deleted[b-o6ct3yzhso]::before { background: var(--rz-danger); }
.exec-flow-turn.status-status-archived[b-o6ct3yzhso]::before { background: var(--rz-text-disabled-color); }

.exec-flow-turn[b-o6ct3yzhso]::before {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rz-text-tertiary-color);
}

.exec-flow-turn-head[b-o6ct3yzhso] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px dashed var(--rz-base-200);
}

.exec-flow-turn-idx[b-o6ct3yzhso] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
}

.exec-flow-turn-time[b-o6ct3yzhso] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.68rem;
    color: var(--rz-text-tertiary-color);
}

.exec-flow-status[b-o6ct3yzhso] {
    margin-left: auto;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--rz-base-100);
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
}

.exec-flow-bar-user[b-o6ct3yzhso],
.exec-flow-bar-agent[b-o6ct3yzhso],
.exec-flow-bar-tools[b-o6ct3yzhso],
.exec-flow-bar-resp[b-o6ct3yzhso] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.45rem;
    border-radius: 8px;
    font-size: 0.73rem;
    line-height: 1.3;
}

.exec-flow-bar-user[b-o6ct3yzhso] {
    background: color-mix(in srgb, var(--rz-info) 10%, transparent);
    color: var(--rz-text-primary-color);
}

.exec-flow-bar-user[b-o6ct3yzhso]  .rzi {
    font-size: 0.95rem !important;
    color: var(--rz-info);
}

.exec-flow-bar-user span[b-o6ct3yzhso] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
}

.exec-flow-bar-agent[b-o6ct3yzhso] {
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
    color: var(--rz-text-primary-color);
    flex-direction: column;
    align-items: flex-start;
}

.exec-flow-bar-agent[b-o6ct3yzhso]  .rzi {
    font-size: 0.95rem !important;
    color: var(--rz-primary);
}

.exec-flow-agent-name[b-o6ct3yzhso] {
    font-weight: 700;
    font-size: 0.76rem;
}

.exec-flow-model[b-o6ct3yzhso] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.66rem;
    color: var(--rz-text-tertiary-color);
}

.exec-flow-handoff[b-o6ct3yzhso] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.64rem;
    font-weight: 600;
    color: var(--rz-secondary);
    background: color-mix(in srgb, var(--rz-secondary) 12%, transparent);
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
}

.exec-flow-handoff[b-o6ct3yzhso]  .rzi {
    font-size: 0.75rem !important;
    color: var(--rz-secondary) !important;
}

.exec-flow-bar-tools[b-o6ct3yzhso] {
    background: color-mix(in srgb, var(--rz-warning) 10%, transparent);
    min-height: 42px;
    justify-content: center;
}

.exec-flow-tool-chip[b-o6ct3yzhso] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--rz-base-background-color);
    color: var(--rz-warning);
    font-weight: 700;
    font-size: 0.72rem;
    border: 1px solid color-mix(in srgb, var(--rz-warning) 30%, transparent);
}

.exec-flow-tool-chip[b-o6ct3yzhso]  .rzi {
    font-size: 0.8rem !important;
    color: var(--rz-warning) !important;
}

.exec-flow-empty[b-o6ct3yzhso] {
    color: var(--rz-text-disabled-color);
    font-size: 0.72rem;
}

.exec-flow-bar-resp[b-o6ct3yzhso] {
    background: color-mix(in srgb, var(--rz-success) 8%, transparent);
    color: var(--rz-text-primary-color);
}

.exec-flow-metric[b-o6ct3yzhso] {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    font-size: 0.68rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--rz-text-secondary-color);
}

.exec-flow-metric[b-o6ct3yzhso]  .rzi {
    font-size: 0.75rem !important;
    color: var(--rz-success);
}

.exec-flow-connector[b-o6ct3yzhso] {
    width: 24px;
    align-self: center;
    height: 2px;
    background: linear-gradient(to right,
        color-mix(in srgb, var(--rz-primary) 35%, transparent),
        color-mix(in srgb, var(--rz-primary) 10%, transparent));
    position: relative;
}

.exec-flow-connector[b-o6ct3yzhso]::after {
    content: "›";
    position: absolute;
    right: -4px;
    top: -12px;
    color: color-mix(in srgb, var(--rz-primary) 60%, transparent);
    font-size: 1.1rem;
    font-weight: 700;
}

@media (max-width: 860px) {
    .exec-flow-wrap[b-o6ct3yzhso] {
        grid-template-columns: 1fr;
    }
    .exec-flow-lanes[b-o6ct3yzhso] {
        display: none;
    }
}
/* /Components/Pages/Admin/ConsumptionAnalytics.razor.rz.scp.css */
/* Estilos propios de ConsumptionAnalytics — CSS isolation.
   Vienen de wwwroot/css/admin/consumption-analytics.css (gemela byte a byte de
   commerce/customer-consumption-dashboard.css; cada pagina se queda su copia).

   TODO el fichero va con `::deep`: la clase `consumption-pivot-grid` cae sobre
   un <RadzenPivotDataGrid> (componente, no recibe el `b-{hash}`) y las reglas
   apuntan a DOM que genera Radzen en runtime (.rz-pivot-*). La pagina abre con
   <RadzenRow>, sin ningun elemento HTML propio ancestro del grid, asi que el
   ancla es el <div class="consumption-pivot-host"> nuevo en el marcado
   (patron LinkToHoldedDialog). `pivot-aggregate-header` solo existe compuesta
   bajo el grid, va en el mismo bloque.
   ───────────────────────────────────────────────────────────────────────────── */

.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid .rz-pivot-data-grid-table {
    width: 100%;
    table-layout: fixed;
}

.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid .rz-pivot-data-grid-table th,
.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid .rz-pivot-data-grid-table td {
    padding: 0.25rem 0.35rem;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid .rz-pivot-data-grid-table th,
.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid .rz-pivot-data-grid-table td,
.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid .rz-pivot-data-grid-table .rz-cell-data {
    white-space: nowrap;
}

.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid .rz-pivot-data-grid-table th[scope="col"] {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
}

.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid .rz-pivot-row-header.rz-frozen-cell-left-end,
.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid .rz-pivot-footer-header.rz-frozen-cell-left-end {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    inset-inline-start: 0 !important;
}

.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid .rz-pivot-row-header.rz-frozen-cell-left:not(.rz-frozen-cell-left-end),
.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid .rz-pivot-footer-header.rz-frozen-cell-left:not(.rz-frozen-cell-left-end) {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    inset-inline-start: 140px !important;
}

.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid .rz-pivot-row-header .rz-pivot-header-text,
.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid .rz-pivot-row-header,
.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid .rz-pivot-footer-header {
    overflow: hidden;
    text-overflow: ellipsis;
}

.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid .rz-pivot-total-cell.rz-frozen-cell-right,
.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid .rz-pivot-footer-total.rz-frozen-cell-right,
.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid th.rz-frozen-cell-right {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    inset-inline-end: 0 !important;
}

.consumption-pivot-host[b-qlve2s2u3e]  .consumption-pivot-grid .pivot-aggregate-header {
    display: inline-block;
    width: 100%;
    min-height: 1px;
}
/* /Components/Pages/Admin/Groups/AddEntraIdGroupDialog.razor.rz.scp.css */
/* Estilos propios de AddEntraIdGroupDialog — CSS isolation.
   Vienen de wwwroot/css/admin/add-entra-id-group-dialog.css.

   `add-group-dialog` estaba en el <RadzenStack> raiz y a lo que pinta un
   componente no le llega el `b-{hash}`: de ahi el <div> envoltorio nuevo en el
   marcado (patron LinkToHoldedDialog), que ahora es el ancla del ambito.

   Llevan `::deep` desde ese ancla:
   - `.results-fieldset` y sus internos `.rz-fieldset-*`: la clase cae sobre un
     <RadzenFieldset>. OJO: la hoja global ya traia `::deep` escrito — selector
     invalido en CSS plano, asi que esas reglas estaban MUERTAS y cobran vida
     aqui (padding del contenido y tipografia de la legend: la intencion
     original del autor).
   - `.group-icon`, `.check-icon`, `.verified-icon`: caen sobre <RadzenIcon>.
   El resto va sobre HTML propio de este marcado y se acota solo.
   ───────────────────────────────────────────────────────────────────────────── */

.add-group-dialog[b-z345pa4fdw] {
    min-width: 500px;
}

.add-group-dialog[b-z345pa4fdw]  .results-fieldset {
    margin: 0;
}

.add-group-dialog[b-z345pa4fdw]  .results-fieldset .rz-fieldset-content {
    padding: 0.5rem;
}

.add-group-dialog[b-z345pa4fdw]  .results-fieldset .rz-fieldset-legend {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0 0.5rem;
}

.group-list-container[b-z345pa4fdw] {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.group-item[b-z345pa4fdw] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--rz-border-radius);
    cursor: pointer;
    transition: background 0.15s ease;
    background: transparent;
}

.group-item:hover[b-z345pa4fdw] {
    background: var(--rz-base-100);
}

.group-item.selected[b-z345pa4fdw] {
    background: var(--rz-primary-lighter);
    border: 1px solid var(--rz-primary);
}

.group-item.skeleton[b-z345pa4fdw] {
    cursor: default;
}

.add-group-dialog[b-z345pa4fdw]  .group-icon {
    font-size: 1.125rem;
    color: var(--rz-text-secondary-color);
    flex-shrink: 0;
}

.group-info[b-z345pa4fdw] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.group-name[b-z345pa4fdw] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-desc[b-z345pa4fdw] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-group-dialog[b-z345pa4fdw]  .check-icon {
    font-size: 1.125rem;
    color: var(--rz-primary);
    flex-shrink: 0;
}

.selected-group-preview[b-z345pa4fdw] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: var(--rz-success-lighter);
    border: 1px solid var(--rz-success);
    border-radius: var(--rz-border-radius);
}

.add-group-dialog[b-z345pa4fdw]  .verified-icon {
    font-size: 1.25rem;
    color: var(--rz-success);
    flex-shrink: 0;
}

.selected-info[b-z345pa4fdw] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.selected-name[b-z345pa4fdw] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.selected-id[b-z345pa4fdw] {
    font-size: 0.6875rem;
    color: var(--rz-text-secondary-color);
    font-family: var(--rz-code-font-family);
}
/* /Components/Pages/Admin/Groups/GroupRolesDialog.razor.rz.scp.css */
/* Estilos propios de GroupRolesDialog — CSS isolation.
   Vienen de wwwroot/css/admin/group-roles-dialog.css.

   `roles-dialog` estaba en el <RadzenStack> raiz y a lo que pinta un
   componente no le llega el `b-{hash}`: de ahi el <div> envoltorio nuevo en
   el marcado, que sostiene la regla bare (min-width) y hace de ancla.

   Llevan `::deep` desde ese ancla los internos de los <RadzenFieldset>
   (.roles-fieldset / .permissions-fieldset → .rz-fieldset-legend/content).
   OJO: la hoja global ya traia `::deep` escrito — selector invalido en CSS
   plano, esas reglas estaban MUERTAS y cobran vida aqui (padding y tipografia
   de los fieldsets: la intencion original del autor).
   El resto (role-item, badges…, con .assigned interpolada en C# sobre divs
   propios) va sobre HTML de este marcado y se acota solo.
   ───────────────────────────────────────────────────────────────────────────── */

.roles-dialog[b-ora80jofpf] {
    min-width: 450px;
}

.roles-dialog[b-ora80jofpf]  .roles-fieldset .rz-fieldset-legend,
.roles-dialog[b-ora80jofpf]  .permissions-fieldset .rz-fieldset-legend {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0 0.5rem;
}

.roles-dialog[b-ora80jofpf]  .roles-fieldset .rz-fieldset-content,
.roles-dialog[b-ora80jofpf]  .permissions-fieldset .rz-fieldset-content {
    padding: 0.5rem;
}

.roles-list[b-ora80jofpf] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-height: 280px;
    overflow-y: auto;
}

.role-item[b-ora80jofpf] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-50);
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.role-item:hover[b-ora80jofpf] {
    background: var(--rz-base-100);
}

.role-item.assigned[b-ora80jofpf] {
    background: var(--rz-primary-lighter);
    border-color: var(--rz-primary);
}

.role-header[b-ora80jofpf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.role-name[b-ora80jofpf] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.role-badge[b-ora80jofpf] {
    font-size: 0.625rem;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.role-badge.system[b-ora80jofpf] {
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
}

.role-badge.platform[b-ora80jofpf] {
    background: var(--rz-info-lighter);
    color: var(--rz-info-dark);
}

.role-badge.customer[b-ora80jofpf] {
    background: var(--rz-secondary-lighter);
    color: var(--rz-secondary-dark);
}

.role-desc[b-ora80jofpf] {
    font-size: 0.6875rem;
    color: var(--rz-text-secondary-color);
    margin-left: 1.5rem;
    line-height: 1.3;
}

.permissions-list[b-ora80jofpf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.permission-badge[b-ora80jofpf] {
    font-size: 0.625rem;
    font-weight: 500;
    padding: 0.1875rem 0.375rem;
    border-radius: 3px;
    background: var(--rz-base-100);
    color: var(--rz-text-secondary-color);
    border: 1px solid var(--rz-base-200);
}
/* /Components/Pages/Admin/IaasInvoiceSync/IaasSyncHistoryDialog.razor.rz.scp.css */
/* Crear IaasSyncHistoryDialog.razor.css — utilidades bare que consumia via el global borrado. */
.text-danger[b-b3vfmomu30] { color: var(--rz-danger); }
.text-success[b-b3vfmomu30] { color: var(--rz-success); }
/* /Components/Pages/Admin/InvoicesAdmin.razor.rz.scp.css */
/* Estilos propios de InvoicesAdmin — CSS isolation.
   Vienen de wwwroot/css/admin/invoices-admin.css.

   TODO va con `::deep`: las 7 clases kpi-* caen sobre <RadzenCard> (componente,
   no recibe el `b-{hash}`) y la pagina abre con <RadzenRow>, sin ningun elemento
   HTML propio ancestro de las tarjetas. El ancla es el
   <div class="invoices-kpi-host"> nuevo que envuelve las dos filas de KPIs
   (patron LinkToHoldedDialog). Familia :hover incluida.
   ───────────────────────────────────────────────────────────────────────────── */

.invoices-kpi-host[b-fe4e7rvxnf]  .kpi-card {
    cursor: pointer;
    transition: transform 0.2s;
}

.invoices-kpi-host[b-fe4e7rvxnf]  .kpi-card:hover {
    transform: scale(1.02);
}

.invoices-kpi-host[b-fe4e7rvxnf]  .kpi-paid {
    border-left: 4px solid var(--rz-success);
}

.invoices-kpi-host[b-fe4e7rvxnf]  .kpi-pending {
    border-left: 4px solid var(--rz-warning);
}

.invoices-kpi-host[b-fe4e7rvxnf]  .kpi-overdue {
    border-left: 4px solid var(--rz-danger);
}

.invoices-kpi-host[b-fe4e7rvxnf]  .kpi-voided {
    border-left: 4px solid var(--rz-text-disabled-color);
}

.invoices-kpi-host[b-fe4e7rvxnf]  .kpi-draft {
    border-left: 4px solid var(--rz-text-disabled-color);
}

.invoices-kpi-host[b-fe4e7rvxnf]  .kpi-pending-amount {
    border-left: 4px solid var(--rz-warning);
}

/* ── Contribución cross-cluster (de pages/index.css) aplicada por el orquestador ── */
/* Añadir a InvoicesAdmin.razor.css — utilidades bare que consumia via el global borrado. */
.invoices-admin-page[b-fe4e7rvxnf]  .text-danger { color: var(--rz-danger); }
.invoices-admin-page[b-fe4e7rvxnf]  .text-success { color: var(--rz-success); }
/* /Components/Pages/Admin/LicenseAdminDialog.razor.rz.scp.css */
/* Estilos propios de LicenseAdminDialog — CSS isolation.
   Vienen de wwwroot/css/admin/license-admin-dialog.css.

   Las dos reglas van con `::deep`: la clase `license-admin-tabs` cae sobre el
   <RadzenTabs> RAIZ del dialogo (componente, no recibe el `b-{hash}`) y los
   sujetos (.rz-tabview-nav-link, .rzi) son DOM que genera Radzen en runtime.
   Sin ningun elemento HTML propio, el ancla es el
   <div class="license-admin-tabs-host"> nuevo que envuelve el RadzenTabs
   (patron LinkToHoldedDialog). Los !important se conservan tal cual.
   ───────────────────────────────────────────────────────────────────────────── */

.license-admin-tabs-host[b-yxgdcq9gne]  .license-admin-tabs .rz-tabview-nav-link {
    font-size: 0.85rem !important;
    padding: 0.5rem 1rem !important;
}

.license-admin-tabs-host[b-yxgdcq9gne]  .license-admin-tabs .rz-tabview-nav-link .rzi {
    font-size: 1rem !important;
}
/* /Components/Pages/Admin/LicensesAdmin.razor.rz.scp.css */
/* Estilos propios de LicensesAdmin — CSS isolation.
   Vienen de DOS hojas globales:
   - wwwroot/css/admin/licenses-admin.css (stat-card, stat-icon).
   - wwwroot/css/commerce/licenses-list.css (badges badge-status-*: esta pagina
     los genera en LicensesAdmin.razor.cs y los aplica a un <span> propio del
     template del grid — duplicar el bloque aqui es lo correcto bajo isolation,
     cada hoja scoped con su hash).

   `::deep` solo para `stat-card`, que cae sobre <RadzenCard> (componente, no
   recibe el `b-{hash}`); la pagina abre con <RadzenRow>, sin ancla HTML propia,
   asi que se envuelve la fila de estadisticas en el
   <div class="licenses-stats-host"> nuevo (patron LinkToHoldedDialog).
   `stat-icon` es un <div> propio y los badges son <span> propios: reglas
   directas, reciben el hash. OJO homonimo: hasta hoy en /admin/licenses la
   stat-card la pintaba commerce/customer-list.css (ganaba por orden de carga,
   box-shadow literal); al aislar, esta pagina recupera SU definicion
   (box-shadow: var(--rz-shadow-1)) — cambio sutil esperado (regla 11).
   ───────────────────────────────────────────────────────────────────────────── */

.licenses-stats-host[b-2usbyikihb]  .stat-card {
    border: none;
    box-shadow: var(--rz-shadow-1);
}

.stat-icon[b-2usbyikihb] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Status badges */
.badge-status-active[b-2usbyikihb] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: var(--rz-success-lighter); color: var(--rz-success-dark);
    padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.78rem; font-weight: 600;
}
.badge-status-active[b-2usbyikihb]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--rz-success); }
.badge-status-cancelled[b-2usbyikihb], .badge-status-inactive[b-2usbyikihb] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: var(--rz-base-200); color: var(--rz-text-tertiary-color);
    padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.78rem; font-weight: 500;
}
.badge-status-suspended[b-2usbyikihb] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: var(--rz-warning-lighter); color: var(--rz-warning-dark);
    padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.78rem; font-weight: 600;
}
.badge-status-suspended[b-2usbyikihb]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--rz-warning); }
.badge-status-expired[b-2usbyikihb] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: var(--rz-info-lighter); color: var(--rz-info-dark);
    padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.78rem; font-weight: 500;
}
.badge-status-pending[b-2usbyikihb] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: var(--rz-secondary-lighter); color: var(--rz-secondary-dark);
    padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.78rem; font-weight: 500;
}
/* /Components/Pages/Admin/OrchestrationPlanGraph.razor.rz.scp.css */
/* Estilos propios de OrchestrationPlanGraph — CSS isolation.
   Vienen de wwwroot/css/admin/orchestration-plan-graph.css, que se cargaba en TODAS las paginas del
   portal. Verificado antes de mover: todas sus clases van sobre HTML de este
   marcado, ningun otro componente las usa, y todo el color sale de tokens de
   theme.css — asi que sigue respondiendo al color primario del cliente y al
   modo oscuro igual que antes.
   ───────────────────────────────────────────────────────────────────────── */

.trace-graph-shell[b-hrdzvejary] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.trace-graph-summary[b-hrdzvejary] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.trace-graph-summary > div[b-hrdzvejary] {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--rz-base-background-color) 98%, transparent),
            color-mix(in srgb, var(--rz-primary-lighter) 18%, var(--rz-base-background-color) 82%));
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 70%, transparent);
    border-radius: 18px;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    box-shadow: 0 16px 28px color-mix(in srgb, var(--rz-base-900) 5%, transparent);
}

.trace-graph-legend[b-hrdzvejary] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.trace-legend-chip[b-hrdzvejary] {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.68rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 50%, transparent);
    color: var(--rz-text-secondary-color);
    background: color-mix(in srgb, var(--rz-base-background-color) 92%, transparent);
}

.trace-legend-primary[b-hrdzvejary] { background: color-mix(in srgb, var(--rz-primary-lighter) 84%, transparent); color: var(--rz-primary-dark); }
.trace-legend-agent[b-hrdzvejary] { background: color-mix(in srgb, var(--rz-success-lighter) 86%, transparent); color: var(--rz-success-dark); }
.trace-legend-tool[b-hrdzvejary] { background: color-mix(in srgb, var(--rz-warning-lighter) 88%, transparent); color: var(--rz-warning-dark); }
.trace-legend-thinking[b-hrdzvejary] { background: color-mix(in srgb, var(--rz-info-lighter) 88%, transparent); color: var(--rz-info-dark); }
.trace-legend-error[b-hrdzvejary] { background: color-mix(in srgb, var(--rz-danger-lighter) 88%, transparent); color: var(--rz-danger-dark); }

.trace-graph-kpi-label[b-hrdzvejary] {
    color: var(--rz-text-secondary-color);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trace-graph-kpi-value[b-hrdzvejary] {
    color: var(--rz-text-color);
    font-weight: 700;
    font-size: 0.95rem;
}

.trace-graph-canvas-wrap[b-hrdzvejary] {
    overflow-x: auto;
    border-radius: 26px;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 75%, transparent);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--rz-primary-lighter) 82%, transparent), transparent 30%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--rz-info-lighter) 80%, transparent), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--rz-base-100) 55%, var(--rz-base-background-color) 45%), var(--rz-base-background-color));
    padding: 1.15rem;
    box-shadow: 0 18px 36px color-mix(in srgb, var(--rz-base-900) 7%, transparent);
}

.trace-graph-canvas[b-hrdzvejary] {
    width: 100%;
    min-width: 760px;
    display: block;
}

.trace-graph-backdrop[b-hrdzvejary] {
    fill: color-mix(in srgb, var(--rz-base-background-color) 80%, transparent);
    stroke: color-mix(in srgb, var(--rz-border-color) 42%, transparent);
    stroke-width: 1;
}

.trace-grid-line[b-hrdzvejary] {
    stroke: url(#trace-grid-fade);
    stroke-width: 1;
    opacity: 0.55;
    stroke-dasharray: 4 10;
}

.trace-edge[b-hrdzvejary] {
    fill: none;
    stroke-width: 3.5;
    opacity: 0.92;
}

.trace-edge-next[b-hrdzvejary] {
    stroke: color-mix(in srgb, var(--rz-primary) 84%, var(--rz-primary-light) 16%);
}

.trace-edge-branch[b-hrdzvejary] {
    stroke: color-mix(in srgb, var(--rz-info) 78%, var(--rz-primary) 22%);
    stroke-dasharray: 7 5;
}

.trace-edge-error[b-hrdzvejary] {
    stroke: color-mix(in srgb, var(--rz-danger) 85%, white 15%);
    stroke-dasharray: 6 4;
}

.trace-edge-arrow-next[b-hrdzvejary] {
    fill: color-mix(in srgb, var(--rz-primary) 84%, var(--rz-primary-light) 16%);
}

.trace-edge-arrow-branch[b-hrdzvejary] {
    fill: color-mix(in srgb, var(--rz-info) 78%, var(--rz-primary) 22%);
}

.trace-edge-arrow-error[b-hrdzvejary] {
    fill: color-mix(in srgb, var(--rz-danger) 85%, white 15%);
}

.trace-node-card[b-hrdzvejary] {
    stroke-width: 1.4;
    filter: url(#trace-node-shadow);
}

.trace-node-aura[b-hrdzvejary] {
    opacity: 0.9;
}

.trace-node-headline[b-hrdzvejary] {
    fill: color-mix(in srgb, var(--rz-white) 42%, transparent);
    opacity: 0.45;
}

.trace-node-card.trace-node-input[b-hrdzvejary],
.trace-node-card.trace-node-output[b-hrdzvejary] {
    fill: color-mix(in srgb, var(--rz-primary-lighter) 92%, var(--rz-base-background-color));
    stroke: color-mix(in srgb, var(--rz-primary) 30%, transparent);
}

.trace-node-card.trace-node-agent[b-hrdzvejary] {
    fill: color-mix(in srgb, var(--rz-success-lighter) 92%, var(--rz-base-background-color));
    stroke: color-mix(in srgb, var(--rz-success) 30%, transparent);
}

.trace-node-card.trace-node-tool[b-hrdzvejary] {
    fill: color-mix(in srgb, var(--rz-warning-lighter) 92%, var(--rz-base-background-color));
    stroke: color-mix(in srgb, var(--rz-warning) 32%, transparent);
}

.trace-node-card.trace-node-thinking[b-hrdzvejary] {
    fill: color-mix(in srgb, var(--rz-info-lighter) 92%, var(--rz-base-background-color));
    stroke: color-mix(in srgb, var(--rz-info) 34%, transparent);
}

.trace-node-card.trace-node-error[b-hrdzvejary] {
    fill: color-mix(in srgb, var(--rz-danger-lighter) 92%, var(--rz-base-background-color));
    stroke: color-mix(in srgb, var(--rz-danger) 38%, transparent);
}

.trace-node-card.trace-node-muted[b-hrdzvejary] {
    fill: color-mix(in srgb, var(--rz-base-100) 90%, var(--rz-base-background-color));
    stroke: color-mix(in srgb, var(--rz-border-color) 60%, transparent);
}

.trace-node-aura.trace-node-input[b-hrdzvejary],
.trace-node-aura.trace-node-output[b-hrdzvejary] {
    fill: color-mix(in srgb, var(--rz-primary-lighter) 72%, transparent);
}

.trace-node-aura.trace-node-agent[b-hrdzvejary] {
    fill: color-mix(in srgb, var(--rz-success-lighter) 72%, transparent);
}

.trace-node-aura.trace-node-tool[b-hrdzvejary] {
    fill: color-mix(in srgb, var(--rz-warning-lighter) 74%, transparent);
}

.trace-node-aura.trace-node-thinking[b-hrdzvejary] {
    fill: color-mix(in srgb, var(--rz-info-lighter) 74%, transparent);
}

.trace-node-aura.trace-node-error[b-hrdzvejary] {
    fill: color-mix(in srgb, var(--rz-danger-lighter) 76%, transparent);
}

.trace-node-aura.trace-node-muted[b-hrdzvejary] {
    fill: color-mix(in srgb, var(--rz-base-200) 55%, transparent);
}

/* Los tres textos del nodo (`kind`, `label`, `meta`) NO están en este marcado:
   los inyecta BuildSvgText como (MarkupString) desde el code-behind. El
   compilador sólo pone el `b-{hash}` en los elementos que ve escritos en el
   .razor, así que a estos <text> no les llega y una regla `.trace-node-kind`
   se compilaría a `.trace-node-kind[b-hash]`, que no casa con nada — el texto
   del grafo se quedaría con el estilo por defecto del SVG.

   El ancla es el <svg class="trace-graph-canvas"> de este marcado, que sí lo
   lleva; desde ahí `::deep` alcanza a los descendientes vengan de donde vengan.
   Mismo remedio que en OrdersAdmin, por otra causa: allí la clase caía sobre un
   componente de Radzen, aquí sobre HTML creado en tiempo de ejecución. */
.trace-graph-canvas[b-hrdzvejary]  .trace-node-kind {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    fill: color-mix(in srgb, var(--rz-text-secondary-color) 88%, var(--rz-base-800) 12%);
}

.trace-graph-canvas[b-hrdzvejary]  .trace-node-label {
    font-size: 13.5px;
    font-weight: 700;
    fill: var(--rz-text-title-color);
}

.trace-graph-canvas[b-hrdzvejary]  .trace-node-meta {
    font-size: 11px;
    fill: color-mix(in srgb, var(--rz-text-secondary-color) 92%, var(--rz-base-900) 8%);
}
/* /Components/Pages/Admin/OrdersAdmin.razor.rz.scp.css */
/* Estilos propios de OrdersAdmin — CSS isolation, caso Radzen.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/admin/orders-admin.css.

   Aquí no basta con mover la regla. `.stat-card-mini` no se aplica a un <div>:
   se aplica a un <RadzenCard>, y la doc es explícita —

     "Scoped CSS only applies to HTML elements and not to Razor components"

   — así que el compilador NO le pone el `b-{hash}` al elemento que Radzen pinta,
   y una regla `.stat-card-mini` de este fichero se convertiría en
   `.stat-card-mini[b-hash]`, que no casa con nada.

   La salida es `::deep`: el ámbito se ancla en un elemento HTML de ESTE marcado
   (el <div class="orders-stats"> que envuelve la fila) y desde ahí alcanza a lo
   que pintan los componentes de dentro. Por eso el marcado necesitaba ese <div>:
   sin un ancestro HTML propio, `::deep` no tiene dónde agarrarse.

   Ésta es la regla general para migrar el resto: si la clase va sobre HTML,
   se mueve tal cual; si va sobre un componente de Radzen, hace falta envoltorio
   HTML + `::deep`.
   ───────────────────────────────────────────────────────────────────────────── */

.orders-stats[b-dyyjvo2f4h]  .stat-card-mini {
    padding: 1rem;
    border: none;
    box-shadow: var(--rz-shadow-1);
}
/* /Components/Pages/Admin/QueueEditPage.razor.rz.scp.css */
/* Estilos propios de QueueEditPage — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/admin/queue-edit-page.css (hoja completa, 101 clases
   qep-*). Todo el sujeto es marcado HTML propio de la pagina (div raiz
   .qep-root / .qep-loading), asi que recibe el b-{hash} sin envoltorios.

   Dos excepciones con `::deep`:
     - `.qep-breadcrumb-link` cuelga de un <RadzenLink> (componente Razor: el
       compilador no le pone el hash) → sale por ::deep desde el div propio
       .qep-breadcrumb;
     - `.qep-perm-empty .rzi`: el icono lo emite <RadzenIcon> en runtime.

   Las clases condicionales qep-nav-item-active / qep-type-item-active /
   qep-perm-chip-ok / qep-perm-chip-off nacen de expresiones C# EN el propio
   .razor (no en el code-behind), sobre elementos HTML propios: el hash cae en
   el elemento, asi que funcionan sin ::deep.

   @keyframes qep-pulse y la @media 960px viajan tal cual.
   ───────────────────────────────────────────────────────────────────────────── */

.qep-root[b-03lv5ensl7] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height, 64px));
    background: var(--rz-base-50, #fafafa);
}

.qep-loading[b-03lv5ensl7] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* ════════ Header ════════ */

.qep-header[b-03lv5ensl7] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--rz-base-background-color);
    border-bottom: 1px solid var(--rz-base-200);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--rz-text-color) 5%, transparent);
    isolation: isolate;
}

.qep-header-inner[b-03lv5ensl7] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1.75rem 1.1rem;
}

.qep-breadcrumb[b-03lv5ensl7] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    margin-bottom: 0.6rem;
}

/* La clase va sobre <RadzenLink> (componente Razor, sin b-hash): ::deep desde
   el div propio .qep-breadcrumb. */
.qep-breadcrumb[b-03lv5ensl7]  .qep-breadcrumb-link {
    color: var(--rz-text-secondary-color);
    text-decoration: none;
    transition: color 0.15s ease;
}

.qep-breadcrumb[b-03lv5ensl7]  .qep-breadcrumb-link:hover {
    color: var(--rz-primary);
}

.qep-breadcrumb-sep[b-03lv5ensl7] {
    color: var(--rz-text-tertiary-color);
    opacity: 0.6;
}

.qep-breadcrumb-current[b-03lv5ensl7] {
    color: var(--rz-text-color);
    font-weight: 500;
}

.qep-header-main[b-03lv5ensl7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.qep-header-title-block[b-03lv5ensl7] {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    min-width: 0;
    flex: 1 1 auto;
}

.qep-color-chip[b-03lv5ensl7] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--rz-text-color) 8%, transparent);
}

.qep-header-text[b-03lv5ensl7] {
    min-width: 0;
}

.qep-header-eyebrow[b-03lv5ensl7] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rz-text-tertiary-color);
    font-weight: 600;
}

.qep-header-h1[b-03lv5ensl7] {
    font-size: 1.375rem;
    line-height: 1.25;
    font-weight: 600;
    margin: 0.1rem 0 0.15rem;
    color: var(--rz-text-color);
}

.qep-header-subtitle[b-03lv5ensl7] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    max-width: 640px;
}

.qep-header-subtitle.qep-muted[b-03lv5ensl7] {
    color: var(--rz-text-tertiary-color);
    font-style: italic;
}

.qep-header-actions[b-03lv5ensl7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.qep-pending-chip[b-03lv5ensl7] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-warning) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-warning) 35%, transparent);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--rz-warning);
}

.qep-pending-dot[b-03lv5ensl7] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rz-warning);
    animation: qep-pulse-b-03lv5ensl7 1.5s ease-in-out infinite;
}

@keyframes qep-pulse-b-03lv5ensl7 {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ════════ Body: nav + main ════════ */

.qep-body[b-03lv5ensl7] {
    display: flex;
    gap: 1.5rem;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1.75rem 3rem;
    flex: 1 1 auto;
    align-items: flex-start;
}

.qep-nav[b-03lv5ensl7] {
    flex: 0 0 240px;
    position: sticky;
    top: 132px;
}

.qep-nav-inner[b-03lv5ensl7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qep-nav-item[b-03lv5ensl7] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--rz-text-secondary-color);
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.qep-nav-item:hover[b-03lv5ensl7] {
    background: color-mix(in srgb, var(--rz-text-color) 4%, transparent);
    color: var(--rz-text-color);
}

.qep-nav-item-active[b-03lv5ensl7] {
    background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
    color: var(--rz-primary);
    border-left-color: var(--rz-primary);
}

.qep-nav-item-active:hover[b-03lv5ensl7] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
}

.qep-main[b-03lv5ensl7] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ════════ Cards ════════ */

.qep-card[b-03lv5ensl7] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--rz-text-color) 4%, transparent);
    overflow: hidden;
}

.qep-card-head[b-03lv5ensl7] {
    padding: 1rem 1.25rem 0.85rem;
    border-bottom: 1px solid var(--rz-base-200);
}

.qep-card-head-inline[b-03lv5ensl7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.qep-card-head-actions[b-03lv5ensl7] {
    display: flex;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.qep-card-title[b-03lv5ensl7] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rz-text-color);
    line-height: 1.3;
}

.qep-card-hint[b-03lv5ensl7] {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: var(--rz-text-tertiary-color);
    line-height: 1.4;
}

.qep-card-body[b-03lv5ensl7] {
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.qep-card-placeholder[b-03lv5ensl7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem;
    color: var(--rz-text-tertiary-color);
    font-size: 0.8125rem;
}

.qep-card-empty[b-03lv5ensl7] {
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.qep-empty-icon[b-03lv5ensl7] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--rz-text-color) 4%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rz-text-tertiary-color);
    font-size: 1.8rem;
}

.qep-empty-title[b-03lv5ensl7] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.qep-empty-hint[b-03lv5ensl7] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    max-width: 380px;
}

/* ════════ Toggles ════════ */

.qep-toggle-row[b-03lv5ensl7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--rz-base-200);
}

.qep-toggle-row:last-child[b-03lv5ensl7] {
    border-bottom: none;
}

.qep-toggle-text[b-03lv5ensl7] {
    min-width: 0;
    flex: 1 1 auto;
}

.qep-toggle-title[b-03lv5ensl7] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--rz-text-color);
}

.qep-toggle-hint[b-03lv5ensl7] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    line-height: 1.4;
    margin-top: 0.2rem;
}

.qep-suffixed[b-03lv5ensl7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.qep-suffix[b-03lv5ensl7] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    font-weight: 500;
}

/* ════════ Types section (master-detail) ════════ */

.qep-types-split[b-03lv5ensl7] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.qep-types-list[b-03lv5ensl7] {
    flex: 0 0 320px;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--rz-text-color) 4%, transparent);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.qep-type-item[b-03lv5ensl7] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.8rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--rz-base-100);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.qep-type-item:last-of-type[b-03lv5ensl7] {
    border-bottom: none;
}

.qep-type-item:hover[b-03lv5ensl7] {
    background: color-mix(in srgb, var(--rz-text-color) 3%, transparent);
}

.qep-type-item-active[b-03lv5ensl7] {
    background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
    border-left-color: var(--rz-primary);
}

.qep-type-item-active:hover[b-03lv5ensl7] {
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
}

.qep-type-item-body[b-03lv5ensl7] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.qep-type-item-name[b-03lv5ensl7] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--rz-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qep-type-item-pill[b-03lv5ensl7] {
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    background: color-mix(in srgb, var(--rz-text-color) 5%, transparent);
    border-radius: 4px;
    color: var(--rz-text-tertiary-color);
    align-self: flex-start;
}

.qep-type-item-count[b-03lv5ensl7] {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rz-text-tertiary-color);
    background: color-mix(in srgb, var(--rz-text-color) 4%, transparent);
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
}

.qep-type-add[b-03lv5ensl7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.8rem;
    border: none;
    background: transparent;
    color: var(--rz-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border-top: 1px dashed var(--rz-base-200);
}

.qep-type-add:hover[b-03lv5ensl7] {
    background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
}

.qep-type-editor[b-03lv5ensl7] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.qep-type-editor-placeholder[b-03lv5ensl7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    background: var(--rz-base-background-color);
    border: 1px dashed var(--rz-base-200);
    border-radius: 8px;
    color: var(--rz-text-tertiary-color);
    font-size: 0.85rem;
}

.qep-type-danger-zone[b-03lv5ensl7] {
    display: flex;
    justify-content: flex-end;
}

/* ════════ Categories tree ════════ */

.qep-cat-grid[b-03lv5ensl7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.9rem;
}

.qep-cat-group[b-03lv5ensl7] {
    background: color-mix(in srgb, var(--rz-text-color) 1.5%, transparent);
    border: 1px solid var(--rz-base-200);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
}

.qep-cat-root[b-03lv5ensl7] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--rz-text-color);
    cursor: pointer;
}

.qep-cat-children[b-03lv5ensl7] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.45rem;
    padding-left: 1.25rem;
}

.qep-cat-child[b-03lv5ensl7] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
}

.qep-cat-tree[b-03lv5ensl7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.qep-cat-branch[b-03lv5ensl7] {
    display: flex;
    flex-direction: column;
}

.qep-cat-row[b-03lv5ensl7] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.qep-cat-row:hover[b-03lv5ensl7] {
    background: color-mix(in srgb, var(--rz-text-color) 3%, transparent);
}

.qep-cat-row-edit[b-03lv5ensl7] {
    background: color-mix(in srgb, var(--rz-text-color) 2%, transparent);
}

.qep-cat-row-child[b-03lv5ensl7] {
    margin-left: 1.5rem;
    font-size: 0.82rem;
}

.qep-cat-name[b-03lv5ensl7] {
    flex: 1 1 auto;
    font-size: 0.875rem;
    color: var(--rz-text-color);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qep-cat-actions[b-03lv5ensl7] {
    display: flex;
    gap: 0.15rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.qep-cat-row:hover .qep-cat-actions[b-03lv5ensl7],
.qep-cat-row-edit .qep-cat-actions[b-03lv5ensl7] {
    opacity: 1;
}

.qep-cat-child-list[b-03lv5ensl7] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.1rem;
}

/* ════════ Inline add ════════ */

.qep-inline-add[b-03lv5ensl7] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ════════ Drag & drop ════════ */

.qep-type-item-wrap[b-03lv5ensl7] {
    position: relative;
}

.qep-drag-handle[b-03lv5ensl7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rz-text-tertiary-color);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    cursor: grab;
    font-size: 1.05rem;
}

.qep-drag-handle:active[b-03lv5ensl7] {
    cursor: grabbing;
}

.qep-type-item:hover .qep-drag-handle[b-03lv5ensl7],
.qep-cat-row:hover .qep-drag-handle[b-03lv5ensl7] {
    opacity: 0.75;
}

.qep-dragging[b-03lv5ensl7] {
    opacity: 0.4;
}

/* Top / bottom 2px indicator bars. Use box-shadow so we don't disturb layout. */
.qep-drop-indicator-above[b-03lv5ensl7] {
    box-shadow: inset 0 2px 0 0 var(--rz-primary);
}

.qep-drop-indicator-below[b-03lv5ensl7] {
    box-shadow: inset 0 -2px 0 0 var(--rz-primary);
}

.qep-drop-indicator-into[b-03lv5ensl7] {
    outline: 2px dashed var(--rz-primary);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
}

.qep-drop-forbidden[b-03lv5ensl7] {
    outline: 2px dashed var(--rz-danger);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--rz-danger) 6%, transparent);
    cursor: not-allowed;
}

/* ════════ Permissions section ════════ */

.qep-perm-search[b-03lv5ensl7] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.qep-perm-suggestion[b-03lv5ensl7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0;
}

.qep-perm-suggestion-avatar[b-03lv5ensl7] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
}

.qep-perm-suggestion-text[b-03lv5ensl7] {
    min-width: 0;
}

.qep-perm-suggestion-name[b-03lv5ensl7] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--rz-text-color);
}

.qep-perm-suggestion-email[b-03lv5ensl7] {
    font-size: 0.72rem;
    color: var(--rz-text-tertiary-color);
}

.qep-perm-empty[b-03lv5ensl7] {
    flex-direction: column;
    padding: 2rem 1rem;
    gap: 0.45rem;
    text-align: center;
}

/* Icono emitido por <RadzenIcon> (runtime, sin b-hash) → ::deep. */
.qep-perm-empty[b-03lv5ensl7]  .rzi {
    font-size: 1.6rem;
    opacity: 0.6;
}

.qep-perm-table[b-03lv5ensl7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.qep-perm-table thead th[b-03lv5ensl7] {
    text-align: left;
    padding: 0.5rem 0.65rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--rz-text-tertiary-color);
    border-bottom: 1px solid var(--rz-base-200);
}

.qep-perm-table tbody td[b-03lv5ensl7] {
    padding: 0.65rem;
    border-bottom: 1px solid var(--rz-base-100);
    vertical-align: middle;
}

.qep-perm-table tbody tr:last-child td[b-03lv5ensl7] {
    border-bottom: none;
}

.qep-perm-col-user[b-03lv5ensl7] {
    min-width: 220px;
}

.qep-perm-col-status[b-03lv5ensl7] {
    width: 140px;
}

.qep-perm-col-load[b-03lv5ensl7] {
    width: 110px;
    color: var(--rz-text-secondary-color);
}

.qep-perm-col-actions[b-03lv5ensl7] {
    width: 90px;
    text-align: right;
}

.qep-perm-user[b-03lv5ensl7] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.qep-perm-avatar[b-03lv5ensl7] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
}

.qep-perm-user-text[b-03lv5ensl7] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.qep-perm-user-name[b-03lv5ensl7] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--rz-text-color);
}

.qep-perm-user-email[b-03lv5ensl7] {
    font-size: 0.72rem;
    color: var(--rz-text-tertiary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qep-perm-lead-badge[b-03lv5ensl7] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--rz-primary) 15%, transparent);
    color: var(--rz-primary);
}

.qep-perm-chip[b-03lv5ensl7] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
}

.qep-perm-chip-dot[b-03lv5ensl7] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.qep-perm-chip-ok[b-03lv5ensl7] {
    background: color-mix(in srgb, var(--rz-success) 10%, transparent);
    color: var(--rz-success);
}

.qep-perm-chip-ok .qep-perm-chip-dot[b-03lv5ensl7] {
    background: var(--rz-success);
}

.qep-perm-chip-off[b-03lv5ensl7] {
    background: color-mix(in srgb, var(--rz-text-tertiary-color) 12%, transparent);
    color: var(--rz-text-secondary-color);
}

.qep-perm-chip-off .qep-perm-chip-dot[b-03lv5ensl7] {
    background: var(--rz-text-tertiary-color);
}

.qep-perm-load[b-03lv5ensl7] {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.qep-perm-actions[b-03lv5ensl7] {
    display: flex;
    gap: 0.15rem;
    justify-content: flex-end;
}

/* ════════ Responsive ════════ */

@media (max-width: 960px) {
    .qep-body[b-03lv5ensl7] {
        flex-direction: column;
    }

    .qep-nav[b-03lv5ensl7] {
        position: static;
        flex: 0 0 auto;
        width: 100%;
    }

    .qep-nav-inner[b-03lv5ensl7] {
        flex-direction: row;
        overflow-x: auto;
        gap: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .qep-nav-item[b-03lv5ensl7] {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .qep-types-split[b-03lv5ensl7] {
        flex-direction: column;
    }

    .qep-types-list[b-03lv5ensl7] {
        flex: 0 0 auto;
        width: 100%;
    }

    .qep-header-main[b-03lv5ensl7] {
        flex-direction: column;
        align-items: stretch;
    }

    .qep-header-actions[b-03lv5ensl7] {
        justify-content: flex-end;
    }
}
/* /Components/Pages/Admin/QueuesAdmin.razor.rz.scp.css */
/* Estilos propios de QueuesAdmin (/admin/queues) — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/servicedesk/queue-list.css (hoja completa). El prefijo
   `.tk-scope` se conserva byte a byte: el div raiz `<div class="tk-scope">` es
   marcado propio y compila a `.tk-scope .x[b-hash]`. Todo el marcado es HTML
   literal (divs, buttons, svg inline, tabla), asi que no hace falta ::deep.

   OJO con la familia `.av` (avatares de paleta): HOY no matchea nada — la
   pagina renderiza avatares con el componente <UserAvatar> (clase .ua, hoja
   shared/user-avatar.css). Se conserva byte a byte porque asi estaba (muerta
   tambien como hoja global) y AvatarColorFor() en el code-behind aun la cita;
   si algun dia vuelve a usarse sobre marcado de un hijo, necesitara ::deep.

   is-paused / ql-hidden / ql-num-warn / ql-num-bad nacen de condicionales de
   la propia pagina sobre HTML propio: el hash cae en el elemento, sin ::deep.
   @keyframes ql-pulse viaja tal cual.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   ServiceDesk · Queues — FASE 6
   ───────────────────────────────────────────────────────────────────────────
   CSS scoped to `.tk-scope` for the redesigned "Colas de servicio" page
   (cards / table sub-views). Tokens come from tickets-tokens.css. The
   stacked load-bar is the signature element of this view — copy preserved
   verbatim from the design mock.
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── PAGE HEAD ───────────────────────────────────────────────────────── */
.tk-scope .ql-page-head[b-8oppj931b1] {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.tk-scope .ql-page-icon[b-8oppj931b1] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(180deg, var(--tk-av-teal-bg), var(--tk-av-teal-bg));
    display: grid;
    place-items: center;
    color: var(--tk-av-teal-fg);
    flex: none;
    border: 1px solid var(--tk-av-teal-bg);
}

.tk-scope .ql-page-icon svg[b-8oppj931b1] { width: 20px; height: 20px; }

.tk-scope .ql-page-title h1[b-8oppj931b1] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.2;
}

.tk-scope .ql-page-title p[b-8oppj931b1] {
    margin: 3px 0 0;
    color: var(--ink-dim);
    font-size: 13px;
    max-width: 780px;
}

.tk-scope .ql-page-actions[b-8oppj931b1] {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Misma regla que `.page-head` en theme.css: en móvil las acciones bajan a su
   propia línea. Aquí eran 279 px de botones contra 358 px de contenido, con el
   título delante — la fila se salía 123 px y arrastraba el shell de lado. */
@media (max-width: 640px) {
    .tk-scope .ql-page-head[b-8oppj931b1] { flex-wrap: wrap; gap: 12px; }

    .tk-scope .ql-page-title[b-8oppj931b1] { min-width: 0; }

    .tk-scope .ql-page-actions[b-8oppj931b1] {
        margin-left: 0;
        width: 100%;
        flex-wrap: wrap;
    }
}

/* ─── VIEW SEGMENT TOGGLE (Cards / Tabla) ────────────────────────────── */
.tk-scope .qview-seg[b-8oppj931b1] {
    display: inline-flex;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 3px;
    box-shadow: var(--shadow-sm);
}

.tk-scope .qview-seg button[b-8oppj931b1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 7px;
    font-size: 12.5px;
    color: var(--ink-2);
    font-weight: 500;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.tk-scope .qview-seg button svg[b-8oppj931b1] { width: 13px; height: 13px; }

.tk-scope .qview-seg button.on[b-8oppj931b1] {
    background: var(--violet-soft);
    color: var(--violet);
    box-shadow: var(--rz-shadow-1);
}

/* ─── QUEUE GRID (cards layout) ──────────────────────────────────────── */
.tk-scope .q-grid[b-8oppj931b1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.tk-scope .q-card[b-8oppj931b1] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.tk-scope .q-card:hover[b-8oppj931b1] {
    border-color: var(--line-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.tk-scope .q-card.is-paused[b-8oppj931b1] {
    opacity: 0.85;
}

.tk-scope .q-card-head[b-8oppj931b1] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tk-scope .q-mark[b-8oppj931b1] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--violet-soft);
    color: var(--violet);
    display: grid;
    place-items: center;
    font-family: var(--tk-font-mono);
    font-weight: 600;
    font-size: 12px;
    flex: none;
    border: 1px solid var(--violet-line);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tk-scope .q-meta[b-8oppj931b1] { flex: 1; min-width: 0; }

.tk-scope .q-name[b-8oppj931b1] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-scope .q-code[b-8oppj931b1] {
    font-family: var(--tk-font-mono);
    font-size: 11px;
    color: var(--ink-dim);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-scope .q-sub[b-8oppj931b1] {
    font-size: 11.5px;
    color: var(--ink-dim);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-scope .q-state[b-8oppj931b1] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--st-done-bg);
    color: var(--st-done);
    border: 1px solid var(--st-done-line);
    flex: none;
}

.tk-scope .q-state .d[b-8oppj931b1] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--st-done);
    box-shadow: 0 0 0 3px var(--st-done-bg);
    animation: ql-pulse-b-8oppj931b1 1.6s ease-in-out infinite;
}

.tk-scope .q-state.is-paused[b-8oppj931b1] {
    background: var(--st-wait-bg);
    color: var(--st-wait);
    border-color: var(--st-wait-line);
}

.tk-scope .q-state.is-paused .d[b-8oppj931b1] {
    background: var(--st-wait);
    box-shadow: none;
    animation: none;
}

@keyframes ql-pulse-b-8oppj931b1 {
    0%, 100% { box-shadow: 0 0 0 3px var(--st-done-bg); }
    50%      { box-shadow: 0 0 0 6px var(--st-done-line); }
}

/* ─── KPI grid 2x2 inside card ───────────────────────────────────────── */
.tk-scope .q-stats[b-8oppj931b1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 10px 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

.tk-scope .q-stat[b-8oppj931b1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-right: 1px solid var(--line-soft);
    padding: 2px 8px;
}

.tk-scope .q-stat:last-child[b-8oppj931b1] { border-right: 0; }

.tk-scope .q-stat .l[b-8oppj931b1] {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tk-scope .q-stat .v[b-8oppj931b1] {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.tk-scope .q-stat .v.small[b-8oppj931b1] { font-size: 13px; }
.tk-scope .q-stat .v.bad[b-8oppj931b1]   { color: var(--st-sla); }
.tk-scope .q-stat .v.warn[b-8oppj931b1]  { color: var(--st-prog); }
.tk-scope .q-stat .v.muted[b-8oppj931b1] { color: var(--ink-faint); }

/* ─── STACKED LOAD BAR ───────────────────────────────────────────────── */
.tk-scope .load-bar[b-8oppj931b1] {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--line-soft);
}

.tk-scope .load-bar i[b-8oppj931b1] {
    display: block;
    height: 100%;
}

.tk-scope .load-bar i.new[b-8oppj931b1]  { background: var(--st-new); }
.tk-scope .load-bar i.open[b-8oppj931b1] { background: var(--st-open); }
.tk-scope .load-bar i.prog[b-8oppj931b1] { background: var(--st-prog); }
.tk-scope .load-bar i.wait[b-8oppj931b1] { background: var(--st-wait); }
.tk-scope .load-bar i.bad[b-8oppj931b1]  { background: var(--st-sla); }

.tk-scope .load-bar.placeholder[b-8oppj931b1] {
    background: repeating-linear-gradient(
        135deg,
        var(--line-soft) 0,
        var(--line-soft) 6px,
        var(--surface-2) 6px,
        var(--surface-2) 12px
    );
}

.tk-scope .load-legend[b-8oppj931b1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--ink-dim);
}

.tk-scope .load-legend span[b-8oppj931b1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tk-scope .load-legend i[b-8oppj931b1] {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    display: inline-block;
}

.tk-scope .q-load-total[b-8oppj931b1] {
    margin-left: auto;
    font-family: var(--tk-font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.tk-scope .q-card-load-row[b-8oppj931b1] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.tk-scope .q-card-load-row .lbl[b-8oppj931b1] {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-dim);
    flex: none;
}

.tk-scope .q-card-load-row .load-bar[b-8oppj931b1] {
    flex: 1;
    min-width: 0;
}

/* ─── CARD FOOT (agents + actions) ───────────────────────────────────── */
.tk-scope .q-foot[b-8oppj931b1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tk-scope .q-agents[b-8oppj931b1] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.tk-scope .q-agents-meta[b-8oppj931b1] {
    font-size: 11.5px;
    color: var(--ink-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-scope .q-agents-meta b[b-8oppj931b1] {
    color: var(--ink-2);
    font-weight: 600;
}

.tk-scope .q-act[b-8oppj931b1] {
    display: flex;
    gap: 4px;
    flex: none;
}

/* ─── AVATAR STACK ───────────────────────────────────────────────────── */
.tk-scope .av-stack[b-8oppj931b1] {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.tk-scope .av-stack .av[b-8oppj931b1] { margin-left: -6px; }
.tk-scope .av-stack .av:first-child[b-8oppj931b1] { margin-left: 0; }

.tk-scope .av[b-8oppj931b1] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tk-av-default-bg);
    color: var(--tk-av-default-fg);
    display: inline-grid;
    place-items: center;
    font-size: 10.5px;
    font-weight: 600;
    flex: none;
    border: 2px solid var(--rz-base-background-color);
    box-shadow: 0 0 0 1px var(--line);
    font-family: var(--tk-font-sans);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.tk-scope .av.amber[b-8oppj931b1]  { background: var(--tk-av-amber-bg);  color: var(--tk-av-amber-fg); }
.tk-scope .av.green[b-8oppj931b1]  { background: var(--tk-av-green-bg);  color: var(--tk-av-green-fg); }
.tk-scope .av.violet[b-8oppj931b1] { background: var(--violet-soft);     color: var(--violet); }
.tk-scope .av.rose[b-8oppj931b1]   { background: var(--tk-av-rose-bg);   color: var(--tk-av-rose-fg); }
.tk-scope .av.teal[b-8oppj931b1]   { background: var(--tk-av-teal-bg);   color: var(--tk-av-teal-fg); }
.tk-scope .av.slate[b-8oppj931b1]  { background: var(--tk-av-slate-bg);  color: var(--tk-av-slate-fg); }

.tk-scope .av-stack .av-add[b-8oppj931b1] {
    margin-left: 2px;
    height: 24px;
    padding: 0 9px;
    border-radius: 12px;
    border: 1px dashed var(--line-strong);
    background: transparent;
    color: var(--ink-dim);
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tk-scope .av-stack .av-add:hover[b-8oppj931b1] {
    border-color: var(--violet);
    color: var(--violet);
    background: var(--violet-soft);
    border-style: solid;
}

.tk-scope .av-stack .av-add svg[b-8oppj931b1] { width: 11px; height: 11px; }

/* ─── 28×28 ICON BUTTONS (NOT large avatars) ─────────────────────────── */
.tk-scope .ic-btn[b-8oppj931b1] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: var(--ink-dim);
    border: 1px solid transparent;
    transition: all 0.15s ease;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.tk-scope .ic-btn:hover[b-8oppj931b1] {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--ink-2);
}

.tk-scope .ic-btn:disabled[b-8oppj931b1] {
    opacity: 0.45;
    cursor: not-allowed;
}

.tk-scope .ic-btn.violet:hover[b-8oppj931b1] {
    background: var(--violet-soft);
    border-color: var(--violet-line);
    color: var(--violet);
}

.tk-scope .ic-btn.green:hover[b-8oppj931b1] {
    background: var(--st-done-bg);
    border-color: var(--st-done-line);
    color: var(--st-done);
}

.tk-scope .ic-btn.danger:hover[b-8oppj931b1] {
    background: var(--st-sla-bg);
    border-color: var(--st-sla-line);
    color: var(--st-sla);
}

.tk-scope .ic-btn svg[b-8oppj931b1] { width: 13px; height: 13px; }

/* ─── TABLE VIEW ─────────────────────────────────────────────────────── */
.tk-scope .ql-table-wrap[b-8oppj931b1] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.tk-scope .ql-table[b-8oppj931b1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.tk-scope .ql-table thead th[b-8oppj931b1] {
    text-align: left;
    background: var(--surface-2);
    color: var(--ink-dim);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.tk-scope .ql-table thead th.center[b-8oppj931b1] { text-align: center; }

.tk-scope .ql-table tbody td[b-8oppj931b1] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    color: var(--ink-2);
}

.tk-scope .ql-table tbody tr:last-child td[b-8oppj931b1] { border-bottom: 0; }

.tk-scope .ql-table tbody tr:hover[b-8oppj931b1] { background: var(--surface-2); }

.tk-scope .ql-table td.center[b-8oppj931b1] { text-align: center; }
.tk-scope .ql-table td.actions[b-8oppj931b1] { text-align: right; }

.tk-scope .ql-table td.id[b-8oppj931b1] {
    font-family: var(--tk-font-mono);
    font-size: 12px;
    color: var(--ink);
    font-weight: 600;
}

.tk-scope .ql-table td.title .name[b-8oppj931b1] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.tk-scope .ql-table td.title .sub[b-8oppj931b1] {
    font-size: 11.5px;
    color: var(--ink-dim);
    margin-top: 2px;
}

.tk-scope .ql-table td.mono[b-8oppj931b1] {
    font-family: var(--tk-font-mono);
    font-variant-numeric: tabular-nums;
}

.tk-scope .ql-table td .row-act[b-8oppj931b1] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.tk-scope .ql-table td .load-bar[b-8oppj931b1] { width: 140px; }

.tk-scope .ql-num-warn[b-8oppj931b1] { color: var(--st-prog); font-weight: 600; }
.tk-scope .ql-num-bad[b-8oppj931b1]  { color: var(--st-sla);  font-weight: 600; }
.tk-scope .ql-num-mute[b-8oppj931b1] { color: var(--ink-faint); }

/* ─── EMPTY STATE ────────────────────────────────────────────────────── */
.tk-scope .ql-empty[b-8oppj931b1] {
    padding: 42px;
    text-align: center;
    color: var(--ink-dim);
    font-size: 13px;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: 12px;
}

/* ─── HIDDEN UTILITY (avoid clashing with global) ────────────────────── */
.tk-scope .ql-hidden[b-8oppj931b1] { display: none !important; }

/* ─── AJUSTES DEL MÓDULO (trasladados desde /admin/tickets) ────────────────
   Van al final de la página a propósito: dentro de la pantalla de
   configuración lo que se consulta es el listado de colas, no el interruptor.
   Antes abrían /admin/tickets, por delante de los KPIs y de la lista. */
.tk-scope .ql-settings[b-8oppj931b1] {
    margin-top: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 18px;
}

.tk-scope .ql-settings-head h2[b-8oppj931b1] {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tk-scope .ql-settings-row[b-8oppj931b1] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--line-soft);
}

.tk-scope .ql-settings-copy[b-8oppj931b1] {
    flex: 1;
    min-width: 0;
}

.tk-scope .ql-settings-label[b-8oppj931b1] {
    font-size: 13px;
    color: var(--ink);
}

.tk-scope .ql-settings-foot[b-8oppj931b1] {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

/* ── Contribución cross-cluster (de shared/user-avatar.css) aplicada por el orquestador ── */
/* FUSIONAR en el QueuesAdmin.razor.css YA ESCRITO por servicedesk — spans crudos
   .ua/.ua-fallback/.ua--stacked de QueuesAdmin.razor (lineas 153/282). */
.ua[b-8oppj931b1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex: none;
    box-shadow: 0 0 0 1px var(--rz-base-200);
    object-fit: cover;
    line-height: 1;
}

.ua-fallback[b-8oppj931b1] {
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-family: var(--tk-font-sans, system-ui, sans-serif);
    font-feature-settings: 'tnum';
    -webkit-user-select: none;
    user-select: none;
}

.ua--stacked + .ua--stacked[b-8oppj931b1] {
    margin-left: -6px;
}

/* Tira MIXTA (UserAvatars + span crudo '+N'): los hashes difieren y el combinador
   de arriba no cruza la frontera. Anclar desde el contenedor propio de la tira: */
/* .<contenedor-tira-agentes> ::deep .ua--stacked + .ua--stacked { margin-left: -6px; } */

[data-bs-theme="dark"] .ua[b-8oppj931b1] {
    box-shadow: 0 0 0 1px var(--rz-base-300);
}
/* /Components/Pages/Admin/Roles/CreateRoleDialog.razor.rz.scp.css */
/* Estilos propios de CreateRoleDialog — CSS isolation.
   Vienen de wwwroot/css/admin/create-role-dialog.css.

   `create-role-container` estaba en el <RadzenStack> raiz y a lo que pinta un
   componente no le llega el `b-{hash}`: de ahi el <div> envoltorio nuevo en el
   marcado (patron LinkToHoldedDialog), que sostiene la regla bare (min-width)
   y hace de ancla.

   Lleva `::deep`: `.section-header ::deep .rz-icon` (RadzenIcon dentro de la
   cabecera de seccion). El resto va sobre HTML propio y se acota solo.

   OJO: .form-row era la UNICA definicion global de esa clase en el portal;
   SprintDialog, SetupWizard y SuperSheet dependian de ella y reciben su copia
   via contribution (ver salida del migrador), no desde aqui.
   ───────────────────────────────────────────────────────────────────────────── */

.create-role-container[b-xubnbh60w0] {
    min-width: 750px;
}

.role-form-section[b-xubnbh60w0] {
    background: var(--rz-base-background);
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    padding: 1.25rem;
}

.section-header[b-xubnbh60w0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--rz-text-title-color);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rz-base-200);
}

.section-header[b-xubnbh60w0]  .rz-icon {
    color: var(--rz-primary);
}

.permissions-grid[b-xubnbh60w0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.permission-category[b-xubnbh60w0] {
    background: var(--rz-base-100);
    border: 1px solid var(--rz-base-200);
    border-radius: 6px;
    padding: 0.875rem;
}

.category-header[b-xubnbh60w0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rz-base-200);
}

.category-name[b-xubnbh60w0] {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--rz-text-title-color);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.category-count[b-xubnbh60w0] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    background: var(--rz-base-200);
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
}

.permission-item[b-xubnbh60w0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
}

.permission-item label[b-xubnbh60w0] {
    font-size: 0.875rem;
    cursor: pointer;
}

.form-row[b-xubnbh60w0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.selected-count[b-xubnbh60w0] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary-dark);
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
}
/* /Components/Pages/Admin/Roles/EditRoleDialog.razor.rz.scp.css */
/* Estilos propios de EditRoleDialog — CSS isolation.
   Vienen de wwwroot/css/admin/edit-role-dialog.css (hoja ya auto-scoped bajo
   .edit-role-container).

   `edit-role-container` estaba en el <RadzenStack> raiz y a lo que pinta un
   componente no le llega el `b-{hash}`: de ahi el <div> envoltorio nuevo en el
   marcado, que sostiene la regla bare (min-width) y hace de ancla.

   Los selectores descendientes funcionan sin ::deep: el rightmost es HTML
   propio con hash y el ancestro .edit-role-container no lo necesita. Llevan
   `::deep` solo:
   - `.edit-role-container .section-header ::deep .rz-icon` (RadzenIcon);
   - `.edit-role-container ::deep .identifier-readonly` (la clase cae sobre un
     <RadzenTextBox>).
   ───────────────────────────────────────────────────────────────────────────── */

.edit-role-container[b-68npiuo8o7] {
    min-width: 750px;
}

.edit-role-container .role-form-section[b-68npiuo8o7] {
    background: var(--rz-base-background);
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    padding: 1.25rem;
}

.edit-role-container .section-header[b-68npiuo8o7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--rz-text-title-color);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rz-base-200);
}

.edit-role-container .section-header[b-68npiuo8o7]  .rz-icon {
    color: var(--rz-primary);
}

.edit-role-container .permissions-grid[b-68npiuo8o7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.edit-role-container .permission-category[b-68npiuo8o7] {
    background: var(--rz-base-100);
    border: 1px solid var(--rz-base-200);
    border-radius: 6px;
    padding: 0.875rem;
}

.edit-role-container .category-header[b-68npiuo8o7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rz-base-200);
}

.edit-role-container .category-name[b-68npiuo8o7] {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--rz-text-title-color);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.edit-role-container .category-count[b-68npiuo8o7] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    background: var(--rz-base-200);
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
}

.edit-role-container .permission-item[b-68npiuo8o7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
}

.edit-role-container .permission-item label[b-68npiuo8o7] {
    font-size: 0.875rem;
    cursor: pointer;
}

.edit-role-container .form-row[b-68npiuo8o7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.edit-role-container .selected-count[b-68npiuo8o7] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary-dark);
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.edit-role-container[b-68npiuo8o7]  .identifier-readonly {
    font-family: var(--rz-font-family-monospace, monospace);
    background: var(--rz-base-100);
}

.edit-role-container .changes-badge[b-68npiuo8o7] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--rz-warning-lighter);
    color: var(--rz-warning-dark);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}
/* /Components/Pages/Admin/ServiceCategoriesAdmin.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Service categories admin — scope picker + two-level taxonomy editor.

   `::deep` is needed for Radzen internals (.rz-alert, .rz-badge) because they
   render without this component's scope hash.
   ═════════════════════════════════════════════════════════════════════════ */

.sca-root[b-7yaxcogcxm] {
    max-width: 980px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ─── Header ─── */
.sca-eyebrow[b-7yaxcogcxm] {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rz-text-tertiary-color);
    margin-bottom: 0.25rem;
}

.sca-h1[b-7yaxcogcxm] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--rz-text-primary-color);
}

.sca-subtitle[b-7yaxcogcxm] {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    color: var(--rz-text-secondary-color);
    max-width: 70ch;
}

/* ─── Cards ─── */
.sca-card[b-7yaxcogcxm] {
    background: var(--rz-panel-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

.sca-card-head[b-7yaxcogcxm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--rz-base-200);
}

.sca-card-title[b-7yaxcogcxm] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--rz-text-primary-color);
}

.sca-card-hint[b-7yaxcogcxm] {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: var(--rz-text-tertiary-color);
    max-width: 75ch;
}

.sca-card-body[b-7yaxcogcxm] {
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.sca-alert[b-7yaxcogcxm]  .rz-alert,
.sca-card-body[b-7yaxcogcxm]  .rz-alert {
    margin: 0;
}

/* ─── Inline add ─── */
.sca-inline-add[b-7yaxcogcxm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ─── Tree ─── */
.sca-tree[b-7yaxcogcxm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sca-branch[b-7yaxcogcxm] {
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

.sca-row[b-7yaxcogcxm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.88rem;
}

.sca-row-root[b-7yaxcogcxm] {
    background: var(--rz-base-100);
    font-weight: 600;
}

.sca-row-child[b-7yaxcogcxm] {
    padding-left: 1.75rem;
    border-top: 1px solid var(--rz-base-200);
    font-weight: 400;
}

.sca-row-edit[b-7yaxcogcxm] {
    background: var(--rz-base-background-color);
}

.sca-row-empty[b-7yaxcogcxm] {
    color: var(--rz-text-tertiary-color);
    font-size: 0.8rem;
    font-style: italic;
}

.sca-name[b-7yaxcogcxm] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--rz-text-primary-color);
}

.sca-actions[b-7yaxcogcxm] {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex: 0 0 auto;
}

/* Roll-up to the shared catalogue — the dimension internal reporting groups by. */
.sca-rollup[b-7yaxcogcxm] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    font-weight: 400;
}

.sca-rollup-label[b-7yaxcogcxm] {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--rz-text-tertiary-color);
    white-space: nowrap;
}

.sca-rollup[b-7yaxcogcxm]  .rz-dropdown {
    min-height: 30px;
    font-size: 0.8rem;
}

.sca-inactive .sca-name[b-7yaxcogcxm] {
    color: var(--rz-text-disabled-color);
    text-decoration: line-through;
}

/* ─── States ─── */
.sca-loading[b-7yaxcogcxm] {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
}

.sca-placeholder[b-7yaxcogcxm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 2rem 1rem;
    color: var(--rz-text-tertiary-color);
    font-size: 0.85rem;
    border: 1px dashed var(--rz-base-300);
    border-radius: var(--rz-border-radius);
}

/* ─── Móvil ───
   `.sca-row` no envolvía y `.sca-branch` recorta (overflow:hidden), así que en
   400 px los botones de cada categoría quedaban FUERA y sin scroll que los
   alcanzara: no era que se vieran mal, es que no se podían pulsar. Envolviendo
   la fila, el desplegable de agrupación y las acciones bajan a su propia línea. */
@media (max-width: 640px) {
    .sca-row[b-7yaxcogcxm] { flex-wrap: wrap; }

    .sca-name[b-7yaxcogcxm] { flex: 1 1 100%; }

    .sca-actions[b-7yaxcogcxm] { margin-left: auto; }
}
/* /Components/Pages/Admin/ServiceCategoryRequirementForm.razor.rz.scp.css */
/* The required checkbox sits beside a RadzenFormField, which carries its own label spacing; this
   pushes it down so both baselines line up. */
.scr-required-toggle[b-z7n5b89le4] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-top: 1.1rem;
    flex: 0 0 auto;
}

/* /Components/Pages/Admin/ServiceCategoryRequirementsDialog.razor.rz.scp.css */
.scr-root[b-iy7z4fwlsc] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 0.5rem;
}

.scr-loading[b-iy7z4fwlsc] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.scr-list[b-iy7z4fwlsc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scr-card[b-iy7z4fwlsc] {
    border: 1px solid var(--rz-border-color, #e0e0e0);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    background: var(--rz-base-background-color, #fff);
}

.scr-card-edit[b-iy7z4fwlsc] {
    border-color: var(--rz-primary);
    background: var(--rz-base-100, #fafafa);
}

.scr-inactive[b-iy7z4fwlsc] {
    opacity: 0.6;
}

.scr-card-head[b-iy7z4fwlsc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.scr-card-head[b-iy7z4fwlsc]  .scr-type-icon {
    color: var(--rz-text-tertiary-color, #888);
    font-size: 18px;
}

.scr-label[b-iy7z4fwlsc] {
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.scr-actions[b-iy7z4fwlsc] {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    margin-left: auto;
    flex: 0 0 auto;
}

.scr-card-meta[b-iy7z4fwlsc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color, #666);
}

.scr-card-meta[b-iy7z4fwlsc]  .rzi {
    font-size: 14px;
    vertical-align: text-bottom;
}

.scr-options[b-iy7z4fwlsc] {
    font-style: italic;
}

.scr-help[b-iy7z4fwlsc] {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color, #666);
}

.scr-empty[b-iy7z4fwlsc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 0;
    color: var(--rz-text-tertiary-color, #888);
    border: 1px dashed var(--rz-border-color, #e0e0e0);
    border-radius: 6px;
}

.scr-footer[b-iy7z4fwlsc] {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rz-border-color, #e0e0e0);
}
/* /Components/Pages/Admin/SystemStatus.razor.rz.scp.css */
/* Estilos propios de SystemStatus — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/admin/system-status.css, que se cargaba en TODAS las
   páginas del portal para una regla que sólo usa ésta.

   `.status-row` se aplica a un <div> del marcado de este componente, así que el
   compilador le pone su `b-{hash}` y la regla no puede alcanzar a nadie más.
   Esto es lo que hace que el acotado deje de ser una convención vigilada por
   tools/scripts/check-css-scope.ps1 y pase a ser una garantía del compilador.
   ───────────────────────────────────────────────────────────────────────────── */

.status-row:hover[b-cspqxa09nq] {
    background-color: var(--rz-base-50);
}
/* /Components/Pages/Admin/TicketsAdmin.razor.rz.scp.css */
/* Estilos propios de TicketsAdmin (/admin/tickets) — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Dos bloques, dos procedencias:

   1) wwwroot/css/admin/tickets-admin.css (hoja completa): tarjetas moviles,
      filtros de columna, chips de prioridad, punto pulsante "cliente
      esperando". El bloque tickets-kpi-grid / kpi-* viaja tambien pero esta
      MUERTO en esta pagina (la tira de KPIs real es tk-kpi-* de
      tickets-tokens.css): se conserva byte a byte por si el markup vuelve a
      citarlo; hoy no pinta nada aqui, y deja de pintar (a proposito, regla de
      homonimos) los KPI de /projects/metrics y /admin/invoices que lo
      heredaban por orden de carga.

   2) Subconjunto de wwwroot/css/servicedesk/ticket-list.css que esta pagina
      consume y su hoja propia no definia: controles de la filter-bar, cursor
      de filas, group-header/column-picker de la grid, colgroup fantasma y
      medias responsive. Duplicado deliberado con TicketList.razor.css (cada
      uno con su hash).

   Llevan `::deep` (anclado en el div raiz .tk-scope o en un elemento propio):
     - `.ticket-row--awaiting > td`: la clase la inyecta OnRowRender via
       args.Attributes["class"] en <tr> generados por RadzenDataGrid (runtime);
     - `.awaiting-col-header`: se construye con RenderTreeBuilder en el
       code-behind (runtime, sin hash);
     - `.priority-badge .rzi/.material-icons`: iconos emitidos por <RadzenIcon>;
     - los internos .rz-* de la grid y la filter-bar: DOM de Radzen.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════ BLOQUE 1 — admin/tickets-admin.css ═══════════════ */

/* ─── KPI cards (corporate, clickable filters) ────────────────────── */
.tickets-kpi-grid[b-2k3q6vw8k4] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
}

.kpi-card[b-2k3q6vw8k4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-width: 0;
}

.kpi-card:hover[b-2k3q6vw8k4] {
    border-color: var(--rz-base-300);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.kpi-card:focus-visible[b-2k3q6vw8k4] {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

.kpi-icon[b-2k3q6vw8k4] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rz-base-100);
    color: var(--rz-text-secondary-color);
}

.kpi-icon .rzi[b-2k3q6vw8k4],
.kpi-icon .material-icons[b-2k3q6vw8k4] { font-size: 1.2rem; }

.kpi-body[b-2k3q6vw8k4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kpi-value[b-2k3q6vw8k4] {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--rz-text-title-color);
    font-variant-numeric: tabular-nums;
}

.kpi-label[b-2k3q6vw8k4] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

/* Danger variant highlights real problems (SLA breached). Others stay neutral. */
.kpi-card--accent-danger .kpi-icon[b-2k3q6vw8k4]  { color: var(--rz-danger); background: color-mix(in srgb, var(--rz-danger) 10%, var(--rz-base-100)); }
.kpi-card--accent-danger .kpi-value[b-2k3q6vw8k4] { color: var(--rz-danger); }

.ticket-mobile-list[b-2k3q6vw8k4] {
    display: grid;
    gap: 0.875rem;
    padding: 0.875rem;
}

.ticket-mobile-card[b-2k3q6vw8k4] {
    border: 1px solid var(--rz-base-200);
    border-radius: 14px;
    background: var(--rz-base-background-color);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.ticket-mobile-card__top[b-2k3q6vw8k4],
.ticket-mobile-card__actions[b-2k3q6vw8k4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
}

.ticket-mobile-card__top[b-2k3q6vw8k4] {
    border-bottom: 1px solid var(--rz-base-100);
}

.ticket-mobile-card__selection[b-2k3q6vw8k4],
.ticket-mobile-card__meta[b-2k3q6vw8k4],
.ticket-mobile-card__chips[b-2k3q6vw8k4],
.ticket-mobile-card__details[b-2k3q6vw8k4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ticket-mobile-card__selection[b-2k3q6vw8k4] {
    min-width: 0;
}

.ticket-number-link[b-2k3q6vw8k4] {
    background: none;
    border: none;
    padding: 0;
    color: var(--rz-primary);
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

.ticket-number-link:hover[b-2k3q6vw8k4] {
    text-decoration: underline;
}

.ticket-mobile-card__meta[b-2k3q6vw8k4] {
    justify-content: flex-end;
    color: var(--rz-text-secondary-color);
    font-size: 0.75rem;
}

.ticket-mobile-card__date[b-2k3q6vw8k4] {
    font-size: 0.75rem;
    white-space: nowrap;
}

.ticket-mobile-card__body[b-2k3q6vw8k4] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 100%;
    padding: 0.875rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.ticket-mobile-card__title[b-2k3q6vw8k4] {
    font-weight: 700;
    color: var(--rz-text-title-color);
    line-height: 1.35;
}

.ticket-mobile-card__subtitle[b-2k3q6vw8k4] {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.ticket-mobile-card__details[b-2k3q6vw8k4] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.ticket-mobile-card__actions[b-2k3q6vw8k4] {
    border-top: 1px solid var(--rz-base-100);
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .tickets-kpi-grid[b-2k3q6vw8k4] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-ticket-mobile-list[b-2k3q6vw8k4] {
        padding: 0.75rem;
    }
}

@media (max-width: 420px) {
    .tickets-kpi-grid[b-2k3q6vw8k4] {
        grid-template-columns: 1fr 1fr;
        gap: 0.625rem;
    }

    .tickets-kpi-grid .kpi-card[b-2k3q6vw8k4] {
        padding: 0.875rem 0.625rem;
    }
}

/* ─── Column CheckBoxList filter popup ──────────────────────────────── */
.col-filter-checklist[b-2k3q6vw8k4] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.75rem;
    min-width: 150px;
}
.col-filter-row[b-2k3q6vw8k4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.2rem 0;
    font-size: 0.8125rem;
}
.col-filter-row:hover[b-2k3q6vw8k4] { color: var(--rz-primary); }

/* ─── Grid chips (parity with /tickets) ─────────────────────────────── */
.priority-badge[b-2k3q6vw8k4] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.priority-badge[b-2k3q6vw8k4]  .rzi,
.priority-badge[b-2k3q6vw8k4]  .material-icons {
    font-size: 16px;
}

.status-pill[b-2k3q6vw8k4] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.awaiting-dot[b-2k3q6vw8k4] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rz-warning, #f59e0b);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--rz-warning, #f59e0b) 60%, transparent);
    animation: awaiting-pulse-b-2k3q6vw8k4 1.6s ease-in-out infinite;
}

@keyframes awaiting-pulse-b-2k3q6vw8k4 {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rz-warning, #f59e0b) 60%, transparent); }
    70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--rz-warning, #f59e0b) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rz-warning, #f59e0b) 0%, transparent); }
}

/* Cabecera construida con RenderTreeBuilder en el code-behind (runtime) → ::deep. */
.tk-scope[b-2k3q6vw8k4]  .awaiting-col-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rz-text-tertiary-color);
}

/* Subtle row tint when the customer is waiting on the agent — same
   semantics as the /tickets dot so triage is consistent across views.
   La clase la inyecta OnRowRender en <tr> de RadzenDataGrid (runtime) → ::deep. */
.tk-scope[b-2k3q6vw8k4]  .ticket-row--awaiting > td {
    background: color-mix(in srgb, var(--rz-warning, #f59e0b) 5%, transparent) !important;
}

/* ═══════════════ BLOQUE 2 — subconjunto de servicedesk/ticket-list.css ═══════
   Duplicado deliberado con TicketList.razor.css (regla de isolation: cada hoja
   con su hash). Solo lo que esta pagina usa y su hoja propia no definia.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Los controles de la barra: una sola altura, un solo radio, un solo borde. */
.tk-scope .filter-bar[b-2k3q6vw8k4]  .rz-textbox,
.tk-scope .filter-bar[b-2k3q6vw8k4]  .rz-dropdown,
.tk-scope .filter-bar[b-2k3q6vw8k4]  .rz-lookup {
    height: 34px;
    min-height: 34px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: none;
    font-size: 12.5px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.tk-scope .filter-bar[b-2k3q6vw8k4]  .rz-textbox:hover,
.tk-scope .filter-bar[b-2k3q6vw8k4]  .rz-dropdown:hover {
    border-color: var(--line-strong);
}

/* Un solo anillo de foco, del color de marca. */
.tk-scope .filter-bar[b-2k3q6vw8k4]  .rz-textbox:focus,
.tk-scope .filter-bar[b-2k3q6vw8k4]  .rz-dropdown:focus,
.tk-scope .filter-bar[b-2k3q6vw8k4]  .rz-dropdown.rz-state-focused {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px var(--violet-glow);
}

/* Los botones de la barra acompañan a los campos, no los presiden. */
.tk-scope .filter-bar[b-2k3q6vw8k4]  .rz-button {
    height: 34px;
    min-height: 34px;
    border-radius: 8px;
}

/* Rows in the ticket list open the ticket, so they advertise it. */
.tk-scope[b-2k3q6vw8k4]  .rz-datatable tr,
.tk-scope[b-2k3q6vw8k4]  .rz-data-grid tr {
    cursor: pointer;
}

/* Banda del selector de columnas, en el flujo y al minimo. */
.tk-scope[b-2k3q6vw8k4]  .rz-data-grid .rz-group-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 8px;
    min-height: 0;
    background: transparent;
    border-bottom: 0;
}

.tk-scope[b-2k3q6vw8k4]  .rz-data-grid .rz-group-header .rz-column-picker .rz-dropdown {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: 4px 8px;
    min-height: 0;
    height: auto;
}

.tk-scope[b-2k3q6vw8k4]  .rz-data-grid .rz-group-header .rz-column-picker .rz-dropdown:hover {
    background: var(--surface-2);
    border-color: var(--line);
}

.tk-scope[b-2k3q6vw8k4]  .rz-data-grid .rz-group-header .rz-column-picker .rz-dropdown-label {
    font-size: 11.5px;
    color: var(--ink-dim);
}

/* Responsive: tabla con scroll horizontal en pantallas pequeñas */
.table-responsive-wrapper[b-2k3q6vw8k4] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* El hueco blanco de 100px delante de la primera columna: columna FANTASMA del
   colgroup de RadzenDataGrid (la clase ticket-grid va sobre el componente →
   sin hash → ::deep). Detalle completo en TicketList.razor.css. */
.tk-scope[b-2k3q6vw8k4]  .ticket-grid colgroup {
    display: none;
}

.tk-scope[b-2k3q6vw8k4]  .ticket-grid table {
    table-layout: auto;
}

/* The min-widths force a horizontal scroll rather than let the ticket columns
   crush together on a phone. */
@media (max-width: 992px) {
    .tk-scope[b-2k3q6vw8k4]  .rz-datatable,
    .tk-scope[b-2k3q6vw8k4]  .rz-data-grid {
        min-width: 900px;
    }
}

@media (max-width: 576px) {
    .tk-scope[b-2k3q6vw8k4]  .rz-datatable,
    .tk-scope[b-2k3q6vw8k4]  .rz-data-grid {
        min-width: 700px;
    }

    .filter-bar[b-2k3q6vw8k4] {
        padding: 0.75rem 1rem;
    }
}
/* /Components/Pages/Admin/Users/AddEntraIdUserDialog.razor.rz.scp.css */
/* Estilos propios de AddEntraIdUserDialog — CSS isolation.
   Vienen de wwwroot/css/admin/add-entra-id-user-dialog.css.

   `::deep` porque la clase resaltada cae sobre un <RadzenCard> de la lista de
   resultados, y el ancla tampoco servia: estaba en el <RadzenStack> raiz, que
   tambien es un componente. De ahi el <div> nuevo en el marcado — es el unico
   elemento HTML propio desde el que se puede alcanzar lo que pinta Radzen.
   ───────────────────────────────────────────────────────────────────────────── */

.add-entra-user-dialog[b-pyglm05j4q]  .selected-user {
    border: 2px solid var(--rz-primary);
    background-color: var(--rz-primary-lighter);
}
/* /Components/Pages/Admin/Users/LinkToArrowSphereDialog.razor.rz.scp.css */
/* Estilos propios de LinkToArrowSphereDialog — CSS isolation.
   Vienen de wwwroot/css/admin/link-to-arrow-sphere-dialog.css.

   `::deep` porque la clase resaltada cae sobre un <RadzenCard> de la lista de
   resultados, y el ancla tampoco servia: estaba en el <RadzenStack> raiz, que
   tambien es un componente. De ahi el <div> nuevo en el marcado — es el unico
   elemento HTML propio desde el que se puede alcanzar lo que pinta Radzen.
   ───────────────────────────────────────────────────────────────────────────── */

.link-arrow-sphere-dialog[b-pxco3na3gx]  .selected-employee {
    border: 2px solid var(--rz-primary);
    background: var(--rz-primary-lighter);
}
/* /Components/Pages/Admin/Users/LinkToEntraIdDialog.razor.rz.scp.css */
/* Estilos propios de LinkToEntraIdDialog — CSS isolation.
   Vienen de wwwroot/css/admin/link-to-entra-id-dialog.css.

   `::deep` porque la clase resaltada cae sobre un <RadzenCard> de la lista de
   resultados, y el ancla tampoco servia: estaba en el <RadzenStack> raiz, que
   tambien es un componente. De ahi el <div> nuevo en el marcado — es el unico
   elemento HTML propio desde el que se puede alcanzar lo que pinta Radzen.
   ───────────────────────────────────────────────────────────────────────────── */

.link-entra-id-dialog[b-9cv9jpcsnz]  .selected-user {
    border: 2px solid var(--rz-primary) !important;
    background-color: var(--rz-primary-lighter) !important;
}
/* /Components/Pages/Admin/Users/LinkToHoldedDialog.razor.rz.scp.css */
/* Estilos propios de LinkToHoldedDialog — CSS isolation.
   Vienen de wwwroot/css/admin/link-to-holded-dialog.css.

   `::deep` porque la clase resaltada cae sobre un <RadzenCard> de la lista de
   resultados, y el ancla tampoco servia: estaba en el <RadzenStack> raiz, que
   tambien es un componente. De ahi el <div> nuevo en el marcado — es el unico
   elemento HTML propio desde el que se puede alcanzar lo que pinta Radzen.
   ───────────────────────────────────────────────────────────────────────────── */

.link-holded-dialog[b-0fl2o5o6iu]  .selected-employee {
    border: 2px solid var(--rz-info);
    background-color: var(--rz-info-lighter);
}
/* /Components/Pages/Admin/Users/UserRolesDialog.razor.rz.scp.css */
/* Estilos propios de UserRolesDialog — CSS isolation.
   Vienen de wwwroot/css/admin/user-roles-dialog.css (hoja entera, ya
   auto-scoped bajo .user-roles-dialog).

   Sin envoltorio y sin ::deep, y no es un olvido: todos los rightmost son
   HTML propio de este marcado (tabla, celdas, spans, divs), que si llevan el
   `b-{hash}`; la clase ancestro .user-roles-dialog se queda en el
   <RadzenStack> raiz y un ancestro SIN hash es valido en el selector
   compilado. La huerfana .role-badge-group era regla muerta y se conserva
   byte a byte.
   ───────────────────────────────────────────────────────────────────────────── */

.user-roles-dialog .role-table[b-584ehk6tq8] {
    width: 100%;
    border-collapse: collapse;
}

.user-roles-dialog .role-table th[b-584ehk6tq8] {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--rz-base-300);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    position: sticky;
    top: 0;
    background: var(--rz-base-background-color);
    z-index: 1;
}

.user-roles-dialog .role-table td[b-584ehk6tq8] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--rz-base-200);
    vertical-align: middle;
    font-size: 0.875rem;
}

.user-roles-dialog .role-table tbody tr:hover[b-584ehk6tq8] {
    background-color: var(--rz-base-100);
}

.user-roles-dialog .role-name-cell[b-584ehk6tq8] {
    min-width: 180px;
}

.user-roles-dialog .role-name-text[b-584ehk6tq8] {
    font-weight: 700;
    color: var(--rz-text-title-color);
}

.user-roles-dialog .role-desc-cell[b-584ehk6tq8] {
    color: var(--rz-text-secondary-color);
    font-size: 0.8125rem;
}

.user-roles-dialog .role-badge-group[b-584ehk6tq8] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.user-roles-dialog .permissions-panel[b-584ehk6tq8] {
    background: var(--rz-base-100);
    border: 1px solid var(--rz-base-200);
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.75rem;
}

.user-roles-dialog .permissions-panel-header[b-584ehk6tq8] {
    font-weight: 600;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
    color: var(--rz-text-title-color);
}

.user-roles-dialog .permission-badge[b-584ehk6tq8] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.4rem;
    background: var(--rz-base-200);
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: var(--rz-font-family-monospace, monospace);
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/Catalog/Catalog.razor.rz.scp.css */
/* Estilos propios de Catalog — CSS isolation.
   Vienen de wwwroot/css/commerce/catalog.css.

   En la mudanza se han sustituido 10 colores escritos a pelo por sus tokens de
   theme.css. No es cosmetica: un #e9ecef no sabe que el cliente ha cambiado su
   color primario desde la UI, y en modo oscuro se queda gris claro sobre fondo
   oscuro. Los equivalentes se han elegido por cercania en la escala neutra
   (#f8f9fa~base-50, #e9ecef~base-200, #8c96a3~text-secondary...), no a ojo.
   ───────────────────────────────────────────────────────────────────────── */

/* Catalog page styles */
.badge-pill[b-vhre5qfsu8] {
    display: inline-block;
    padding: 0.08rem 0.34rem;
    border-radius: 999px;
    font-size: 0.56rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.badge-promo[b-vhre5qfsu8] { background: var(--rz-info-lighter); color: var(--rz-info-dark); border-color: var(--dalatic-accent-200); }
.badge-addon[b-vhre5qfsu8] { background: var(--rz-secondary-lighter); color: var(--rz-secondary-dark); border-color: var(--rz-base-300); }
.badge-trial[b-vhre5qfsu8] { background: var(--rz-warning-lighter); color: var(--rz-warning-darker); border-color: color-mix(in srgb, var(--rz-warning) 28%, white); }
.badge-corporate[b-vhre5qfsu8] { background: var(--rz-primary-lighter); color: var(--rz-primary-dark); border-color: var(--dalatic-primary-200); }

/* Autocomplete dropdown */
.search-autocomplete[b-vhre5qfsu8] {
    position: relative;
}
.search-dropdown[b-vhre5qfsu8] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--rz-base-background-color, var(--rz-base-background-color));
    border: 1px solid var(--rz-border-color, var(--rz-base-300));
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    max-height: 420px;
    overflow-y: auto;
}
.search-dropdown-item[b-vhre5qfsu8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid var(--rz-border-color, var(--rz-base-100));
}
.search-dropdown-item:last-child[b-vhre5qfsu8] { border-bottom: none; }
.search-dropdown-item:hover[b-vhre5qfsu8] { background: var(--rz-secondary-lighter, var(--rz-base-100)); }
.search-dropdown-item.active[b-vhre5qfsu8] { background: var(--rz-primary-lighter); }
.search-dropdown-logo[b-vhre5qfsu8] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--rz-base-50);
}
.search-dropdown-logo-placeholder[b-vhre5qfsu8] {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--rz-secondary-lighter, var(--rz-base-200));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--rz-text-tertiary-color, var(--rz-text-secondary-color));
}
.search-dropdown-info[b-vhre5qfsu8] {
    flex: 1;
    min-width: 0;
}
.search-dropdown-name[b-vhre5qfsu8] {
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-dropdown-sku[b-vhre5qfsu8] {
    font-size: 0.7rem;
    color: var(--rz-text-tertiary-color, var(--rz-text-tertiary-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-dropdown-badges[b-vhre5qfsu8] {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}
.search-dropdown-loading[b-vhre5qfsu8] {
    padding: 1rem;
    text-align: center;
    color: var(--rz-text-tertiary-color, var(--rz-text-tertiary-color));
    font-size: 0.85rem;
}
/* /Components/Pages/Catalog/ProductDetailDialog.razor.rz.scp.css */
/* Estilos propios de ProductDetailDialog — CSS isolation.
   Vienen de wwwroot/css/commerce/product-detail-dialog.css.

   Con `::deep` van tres familias:
   - `product-dialog-shell`: cae sobre el <RadzenStack> RAIZ del dialogo
     (componente, no recibe el `b-{hash}`).
   - `product-dialog-header`: un uso es <div> propio pero el otro es un
     <RadzenStack>; la version ::deep cubre ambos.
     Ancla de las dos: el <div class="product-dialog-host"> nuevo que envuelve
     el RadzenStack raiz (patron LinkToHoldedDialog).
   - Los hijos de `rich-description` (p, ul/ol, li, strong, .alert): ese div
     renderiza un MarkupString (RenderRichText) y el contenido creado en
     runtime NUNCA recibe el hash; van anclados en el propio div
     `.rich-description`, que si es HTML propio.

   El resto son reglas directas sobre HTML escrito aqui: img/div del logo,
   spans de promo-badge (promo-badge-expired se interpola en C# pero el <span>
   es propio), divs de promo-card, <tr> de price-row-* (clase de C#, elemento
   propio) y los divs del skeleton.
   ───────────────────────────────────────────────────────────────────────────── */

.product-dialog-host[b-ctjgk4y4uv]  .product-dialog-shell {
    min-height: 680px;
}
.product-dialog-host[b-ctjgk4y4uv]  .product-dialog-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 52px;
}
.product-dialog-logo[b-ctjgk4y4uv] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 8px;
    background: #f8f9fa;
    flex-shrink: 0;
}
.product-dialog-logo-placeholder[b-ctjgk4y4uv] {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #e9ecef;
    color: #8c96a3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.promo-badge-pill[b-ctjgk4y4uv] {
    display: inline-block;
    padding: 0.08rem 0.34rem;
    border-radius: 999px;
    font-size: 0.56rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.promo-badge-active[b-ctjgk4y4uv] { background: var(--rz-info-lighter); color: var(--rz-info-dark); border-color: var(--dalatic-accent-200); }
.promo-badge-expired[b-ctjgk4y4uv] { background: var(--rz-secondary-lighter); color: var(--rz-secondary-dark); border-color: var(--rz-base-300); }
.promo-card[b-ctjgk4y4uv] {
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.promo-card:hover[b-ctjgk4y4uv] { border-color: var(--rz-primary); box-shadow: 0 0 0 2px var(--rz-primary-lighter); }
.promo-card.selected[b-ctjgk4y4uv] { border-color: var(--rz-primary); background: var(--rz-primary-lighter); }
.price-row-selectable[b-ctjgk4y4uv] { cursor: pointer; transition: background 0.15s ease; }
.price-row-selectable:hover[b-ctjgk4y4uv] { background: #f8fbff; }
.price-row-selected[b-ctjgk4y4uv] { background: #eef4ff; }
.rich-description[b-ctjgk4y4uv] {
    line-height: 1.6;
    color: var(--rz-text-color);
}
.rich-description[b-ctjgk4y4uv]  p {
    margin: 0 0 0.7rem 0;
}
.rich-description[b-ctjgk4y4uv]  ul,
.rich-description[b-ctjgk4y4uv]  ol {
    margin: 0.35rem 0 0.75rem 1.1rem;
    padding: 0;
}
.rich-description[b-ctjgk4y4uv]  li {
    margin-bottom: 0.3rem;
}
.rich-description[b-ctjgk4y4uv]  strong {
    font-weight: 700;
}
.rich-description[b-ctjgk4y4uv]  .alert,
.rich-description[b-ctjgk4y4uv]  .alert-warning {
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    background: #fff4da;
    color: #7a5a00;
    border: 1px solid #f3d27a;
    margin: 0.75rem 0;
}
.product-dialog-skeleton-card[b-ctjgk4y4uv] {
    padding: 1rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 12px;
    background: #fff;
}
/* /Components/Pages/Chat/FloatingChat.razor.rz.scp.css */
/* Estilos propios de FloatingChat — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/chat/floating-chat.css (grueso), más las piezas cuyo
   sujeto es marcado de ESTE componente que vivían en otras hojas del grupo
   chat: los layouts .fullscreen-chat-container.with-artifact-preview (de
   artifact-card.css), el placeholder .clarification-card-pending (de
   clarification-card.css, FloatingChat.razor:1083) y la familia
   .chat-message .generated-image/.revised-prompt (de ai-media.css).

   Qué lleva ::deep y por qué (a lo que no escribe este .razor no le llega el
   b-{hash}):
   - Hijos Radzen: .rz-button del header, .session-menu-btn (RadzenSplitButton)
     y sus .rz-button/.rz-splitbutton-menubutton/.rz-button-text,
     .session-name-input (RadzenTextBox), .new-chat-btn (RadzenButton),
     .rz-text del header de galería, los .rzi/.rz-icon de avatares, modal de
     confirmación, botones gpt-* y dropdowns, y .action-liked/disliked
     (RadzenButton).
   - Contenido de ModelMarkdown: .model-md h1..h6 bajo los contenedores de
     mensajes.
   - Marcado de runtime (MarkupString/JS): toda la familia .ai-preview-wrap /
     img.ai-frame / img.ai-preview / .ai-prune / .ai-caption bajo
     .message-text/.message-content, y .generated-image/.revised-prompt.
   - .chat-ambient-chip-slot: ese div lo construye FloatingChat.razor.cs con
     RenderTreeBuilder (RenderAmbientChip) — el compilador NO le pone hash, así
     que va anclado en los dos roots propios (overlay fullscreen y contenedor
     flotante).
   - .artifact-preview-pane (en el @media 1100px): es marcado del componente
     hijo ArtifactPreview.

   OJO reglas que HOY estaban muertas y al migrar SE ACTIVAN (ya venían
   escritas con ::deep en el CSS global, donde no significa nada):
   .attachment-chip ::deep .rz-button (botón de quitar adjunto pasa a
   posicionarse absolute top-right) y .reasoning-option ::deep .rz-icon
   (tamaño/color de iconos del menú de esfuerzo). Además, los :deep(p)/:deep(code)
   estilo Vue de .reasoning-content se reescriben aquí como ::deep — señalado
   en la migración, no es cambio de declaraciones.

   Lo que NO está aquí y no es un olvido:
   - body.chat-attachment-lock: sujeto body (por encima del componente) →
     wwwroot/css/chat/chat-scroll-lock.css.
   - La familia .ambient-scope-chip*: la renderiza ScopeChip.razor → su hoja.
   ───────────────────────────────────────────────────────────────────────────── */

/* ===== AMBIENT SCOPE CHIP (slot) ===== */
/* Single-source chip styling so the floating, docked and fullscreen
   surfaces render the scope indicator consistently. The slot wrapper
   is a named hook so the docked rail layout can tighten the max
   width without reaching into ScopeChip itself. */
.fullscreen-chat-overlay[b-5n8w6kdurt]  .chat-ambient-chip-slot,
.floating-chat-container[b-5n8w6kdurt]  .chat-ambient-chip-slot {
    display: flex;
    justify-content: flex-start;
    padding: 0.25rem 0.5rem 0 0.5rem;
}

/* ===== FULLSCREEN OVERLAY ===== */
.fullscreen-chat-overlay[b-5n8w6kdurt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--rz-base-background-color);
    z-index: 1100;
    display: flex;
}

.fullscreen-chat-container[b-5n8w6kdurt] {
    display: flex;
    width: 100%;
    height: 100%;
}

.chat-mobile-sidebar-backdrop[b-5n8w6kdurt] {
    display: none;
}

/* ===== CONVERSATIONS SIDEBAR ===== */
.conversations-sidebar[b-5n8w6kdurt] {
    width: 340px;
    border-right: 1px solid var(--rz-border-color);
    display: flex;
    flex-direction: column;
    background: var(--rz-base-100);
    transition: width 0.3s ease;
}

.conversations-sidebar.collapsed[b-5n8w6kdurt] {
    width: 60px;
}

.sidebar-logo[b-5n8w6kdurt] {
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid var(--rz-border-color);
}

.sidebar-logo img[b-5n8w6kdurt] {
    max-height: 40px;
    max-width: 80%;
    object-fit: contain;
}

.sidebar-header[b-5n8w6kdurt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--rz-border-color);
    gap: 8px;
}

.sidebar-header[b-5n8w6kdurt]  .new-chat-btn {
    flex: 1;
}

.conversations-sidebar.collapsed[b-5n8w6kdurt]  .new-chat-btn {
    display: none;
}

.sessions-list[b-5n8w6kdurt] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.sessions-loading[b-5n8w6kdurt],
.sessions-empty[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0.6;
}

.session-item[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 4px;
}

.session-item:hover[b-5n8w6kdurt] {
    background: var(--rz-base-200);
}

.session-item.active[b-5n8w6kdurt] {
    background: var(--rz-primary-lighter);
}

.session-info[b-5n8w6kdurt] {
    flex: 1;
    overflow: hidden;
}

.session-title[b-5n8w6kdurt] {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--rz-text-color);
}

.session-meta[b-5n8w6kdurt] {
    font-size: 11px;
    color: var(--rz-text-disabled-color);
    margin-top: 2px;
}

/* Inline session name editing input */
.session-info[b-5n8w6kdurt]  .session-name-input {
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    padding: 2px 6px;
    border: 1px solid var(--rz-primary);
    border-radius: 4px;
    background: var(--rz-base-background-color);
}

.session-actions[b-5n8w6kdurt] {
    opacity: 0;
    transition: opacity 0.2s;
}

.session-item:hover .session-actions[b-5n8w6kdurt] {
    opacity: 1;
}

/* Session menu button (3 dots) */
.session-actions[b-5n8w6kdurt]  .session-menu-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-width: 24px !important;
    color: var(--rz-primary) !important;
}

.session-actions[b-5n8w6kdurt]  .session-menu-btn,
.session-actions[b-5n8w6kdurt]  .session-menu-btn .rz-button,
.session-actions[b-5n8w6kdurt]  .session-menu-btn .rz-splitbutton-menubutton {
    color: var(--rz-primary) !important;
    background: transparent !important;
}

.session-actions[b-5n8w6kdurt]  .session-menu-btn:hover {
    background: transparent !important;
}

.session-actions[b-5n8w6kdurt]  .session-menu-btn .rz-button-text {
    display: none;
}

/* ===== FULLSCREEN MAIN AREA ===== */
.fullscreen-chat-main[b-5n8w6kdurt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

.fullscreen-header[b-5n8w6kdurt] {
    padding: 14px 28px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--rz-base-background-color);
    -webkit-backdrop-filter: saturate(1.1) blur(10px);
    backdrop-filter: saturate(1.1) blur(10px);
    -webkit-backdrop-filter: saturate(1.1) blur(10px);
    border-bottom: 1px solid color-mix(in srgb, var(--rz-border-color) 60%, transparent);
}

.fullscreen-messages[b-5n8w6kdurt] {
    flex: 1;
    padding: 32px 24px 24px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    scroll-behavior: smooth;
    gap: 22px;                                    /* More breathing room between bubbles */
    scrollbar-gutter: stable;
}

/* Center the message column for readability while keeping the outer container wide
   enough for gallery and sidebars. ~820px matches Claude/ChatGPT reading width. */
.fullscreen-messages > *[b-5n8w6kdurt] {
    max-width: 820px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Ensure AI images can be large in fullscreen */
.fullscreen-messages .message-content[b-5n8w6kdurt] {
    max-width: 100%;
}

.fullscreen-messages .message-text[b-5n8w6kdurt] {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.65;
}

/* Larger avatar in fullscreen, softer border */
.fullscreen-messages .message-avatar[b-5n8w6kdurt] {
    width: 34px;
    height: 34px;
}

.fullscreen-messages .message-avatar[b-5n8w6kdurt]  .rz-icon {
    font-size: 18px;
}

/* Subtle divider between the message list and the input area */
.fullscreen-chat-main[b-5n8w6kdurt]::after {
    content: "";
    display: block;
    height: 1px;
}

/* Fullscreen input box adjustments */
.fullscreen-input-box[b-5n8w6kdurt] {
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 24px 20px;
}

/* ===== GALLERY SIDEBAR ===== */
.gallery-sidebar[b-5n8w6kdurt] {
    width: 320px;
    min-width: 320px;
    background: var(--rz-base-background-color);
    border-left: 1px solid var(--rz-border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gallery-sidebar-header[b-5n8w6kdurt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rz-border-color);
}

.gallery-sidebar-header[b-5n8w6kdurt]  .rz-text {
    font-weight: 500;
}

/* ===== IMAGE EDITOR MODAL ===== */
.image-editor-modal-overlay[b-5n8w6kdurt] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 2rem;
}

.image-editor-modal[b-5n8w6kdurt] {
    width: 100%;
    max-width: 1000px;
    height: 90vh;
    max-height: 700px;
    background: var(--rz-base-background-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.chat-confirm-modal-overlay[b-5n8w6kdurt] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 1.5rem;
}

.chat-confirm-modal[b-5n8w6kdurt] {
    width: min(100%, 460px);
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.3);
    overflow: hidden;
}

.chat-confirm-modal-header[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--rz-border-color);
    font-weight: 600;
}

.chat-confirm-modal-header[b-5n8w6kdurt]  .rzi {
    color: var(--rz-warning);
    font-size: 1.125rem;
}

.chat-confirm-modal-body[b-5n8w6kdurt] {
    padding: 1.25rem;
    color: var(--rz-text-secondary-color);
    line-height: 1.5;
}

.chat-confirm-modal-actions[b-5n8w6kdurt] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0 1.25rem 1.25rem;
}

/* ===== FLOATING CONTAINER ===== */
.floating-chat-container[b-5n8w6kdurt] {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 500px;
    height: 700px;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 12px;
    /* Layered shadow — softer and less flat than a single 32px blob.
       Ambient + key light pattern (Material 3 style). */
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 20px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow: hidden;
}

.floating-chat-header[b-5n8w6kdurt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rz-border-color);
    background: var(--rz-base-background-color);
}

.chat-reconnect-banner[b-5n8w6kdurt] {
    margin: 0 16px 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--rz-info) 12%, var(--rz-base-background-color));
    border: 1px solid color-mix(in srgb, var(--rz-info) 28%, transparent);
    color: var(--rz-text-color);
    font-size: 13px;
}

/* Header buttons - transparent background, no hover background to avoid white circles */
.floating-chat-header[b-5n8w6kdurt]  .rz-button {
    background: transparent !important;
}

.floating-chat-header[b-5n8w6kdurt]  .rz-button:hover {
    background: transparent !important;
    opacity: 0.7;
}

/* Sessions dropdown in floating mode */
.sessions-dropdown-container[b-5n8w6kdurt] {
    position: relative;
}

.sessions-dropdown-container[b-5n8w6kdurt]  .active {
    background: var(--rz-primary-lighter);
    border-radius: 4px;
}

.sessions-dropdown[b-5n8w6kdurt] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    width: 280px;
    max-height: 400px;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 1100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sessions-dropdown-header[b-5n8w6kdurt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--rz-border-color);
    font-weight: 500;
    font-size: 13px;
    color: var(--rz-text-color);
}

.sessions-dropdown-list[b-5n8w6kdurt] {
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
}

.session-dropdown-item[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--rz-base-100);
    transition: background 0.15s;
}

.session-dropdown-item:hover[b-5n8w6kdurt] {
    background: var(--rz-base-100);
}

.session-dropdown-item.active[b-5n8w6kdurt] {
    background: var(--rz-primary-lighter);
}

.session-dropdown-item .session-info[b-5n8w6kdurt] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.session-dropdown-item .session-title[b-5n8w6kdurt] {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-dropdown-item .session-meta[b-5n8w6kdurt] {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
}

.sessions-loading[b-5n8w6kdurt],
.sessions-empty[b-5n8w6kdurt] {
    padding: 16px;
    text-align: center;
    color: var(--rz-text-secondary-color);
    font-size: 13px;
}

.sessions-limit-warning[b-5n8w6kdurt] {
    padding: 8px 12px;
    background: var(--rz-warning-lighter);
    color: var(--rz-warning-darker);
    font-size: 11px;
    text-align: center;
    border-top: 1px solid var(--rz-border-color);
}

.floating-chat-messages[b-5n8w6kdurt] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.empty-chat[b-5n8w6kdurt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

/* ===== SKELETON LOADING ===== */
.messages-loading-skeleton[b-5n8w6kdurt] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    flex: 1;
}

.skeleton-message[b-5n8w6kdurt] {
    opacity: 0.7;
}

.skeleton-line[b-5n8w6kdurt] {
    height: 16px;
    background: linear-gradient(90deg,
        var(--rz-base-200) 25%,
        var(--rz-base-300) 50%,
        var(--rz-base-200) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-5n8w6kdurt 1.5s ease-in-out infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}

.skeleton-avatar[b-5n8w6kdurt] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(90deg,
        var(--rz-base-200) 25%,
        var(--rz-base-300) 50%,
        var(--rz-base-200) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-5n8w6kdurt 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer-b-5n8w6kdurt {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== MESSAGES ===== */
.chat-message[b-5n8w6kdurt] {
    display: flex;
    gap: 8px;
    max-width: 95%;
}

.chat-message.user[b-5n8w6kdurt] {
    align-self: flex-end;
    flex-direction: row-reverse;
    max-width: 80%;
}

.chat-message.assistant[b-5n8w6kdurt] {
    align-self: flex-start;
    align-items: flex-start; /* Avatar aligned to top */
    max-width: 100%;
    width: 100%;
}

.message-avatar[b-5n8w6kdurt] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    /* Soft holographic background that complements the sparkle glyph. The previous
       solid primary fill clashed with the gradient SVG — this subtle radial keeps
       contrast on both light and dark themes without dominating the icon. */
    background: radial-gradient(circle at 30% 30%,
        rgba(192, 132, 252, 0.18) 0%,
        rgba(99, 102, 241, 0.12) 60%,
        transparent 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.message-avatar[b-5n8w6kdurt]  .rzi {
    font-size: 16px;
}

.message-content[b-5n8w6kdurt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.message-text[b-5n8w6kdurt] {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.message-text[b-5n8w6kdurt]  p {
    margin: 0 0 8px 0;
}

.message-text[b-5n8w6kdurt]  p:last-child {
    margin-bottom: 0;
}

.chat-message.user .message-text[b-5n8w6kdurt] {
    background: var(--rz-primary);
    color: white;
    border-bottom-right-radius: 4px;
}

/* Assistant messages: no box, full width (ChatGPT style) */
.chat-message.assistant .message-text[b-5n8w6kdurt] {
    background: transparent;
    padding: 0;
    border-radius: 0;
    width: 100%;
    position: relative; /* For preview overlay positioning */
}

.chat-message.assistant .message-content[b-5n8w6kdurt] {
    flex: 1;
    min-width: 0;
    width: 100%;
}

/* Headings in chat messages - controlled sizes for readability */
.floating-chat-messages[b-5n8w6kdurt]  .model-md h1,
.floating-chat-messages[b-5n8w6kdurt]  .model-md h2,
.floating-chat-messages[b-5n8w6kdurt]  .model-md h3,
.floating-chat-messages[b-5n8w6kdurt]  .model-md h4,
.floating-chat-messages[b-5n8w6kdurt]  .model-md h5,
.floating-chat-messages[b-5n8w6kdurt]  .model-md h6,
.fullscreen-messages[b-5n8w6kdurt]  .model-md h1,
.fullscreen-messages[b-5n8w6kdurt]  .model-md h2,
.fullscreen-messages[b-5n8w6kdurt]  .model-md h3,
.fullscreen-messages[b-5n8w6kdurt]  .model-md h4,
.fullscreen-messages[b-5n8w6kdurt]  .model-md h5,
.fullscreen-messages[b-5n8w6kdurt]  .model-md h6 {
    margin: 0.6em 0 0.25em;
    line-height: 1.3;
    font-weight: 600;
}

.floating-chat-messages[b-5n8w6kdurt]  .model-md h1,
.fullscreen-messages[b-5n8w6kdurt]  .model-md h1 { font-size: 1.15em; }

.floating-chat-messages[b-5n8w6kdurt]  .model-md h2,
.fullscreen-messages[b-5n8w6kdurt]  .model-md h2 { font-size: 1.08em; }

.floating-chat-messages[b-5n8w6kdurt]  .model-md h3,
.fullscreen-messages[b-5n8w6kdurt]  .model-md h3 { font-size: 1.02em; }

.floating-chat-messages[b-5n8w6kdurt]  .model-md h4,
.fullscreen-messages[b-5n8w6kdurt]  .model-md h4 { font-size: 1em; }

.floating-chat-messages[b-5n8w6kdurt]  .model-md h5,
.fullscreen-messages[b-5n8w6kdurt]  .model-md h5 { font-size: 0.95em; }

.floating-chat-messages[b-5n8w6kdurt]  .model-md h6,
.fullscreen-messages[b-5n8w6kdurt]  .model-md h6 { font-size: 0.92em; }

/* AI Preview containers inside chat messages */
/* AI Preview - HIDDEN by default, only show when it has a revealed image */
.message-text[b-5n8w6kdurt]  .ai-preview-wrap,
.message-content[b-5n8w6kdurt]  .ai-preview-wrap {
    display: none !important;
}

/* Only show preview when it has an actual visible frame OR is live */
.message-text[b-5n8w6kdurt]  .ai-preview-wrap:has(img.ai-reveal),
.message-content[b-5n8w6kdurt]  .ai-preview-wrap:has(img.ai-reveal),
.message-text[b-5n8w6kdurt]  .ai-preview-wrap.ai-live,
.message-content[b-5n8w6kdurt]  .ai-preview-wrap.ai-live {
    position: relative;
    display: inline-block !important;
    max-width: var(--img-max, 500px);
    margin: 12px 0 !important;
    border-radius: 12px;
    /* Show skeleton background */
    background: linear-gradient(135deg,
        var(--rz-base-200, #1a1a2e) 0%,
        var(--rz-base-300, #16213e) 100%);
    overflow: hidden;
}

/* Transparent background when image is visible */
.message-text[b-5n8w6kdurt]  .ai-preview-wrap:has(img.ai-reveal),
.message-content[b-5n8w6kdurt]  .ai-preview-wrap:has(img.ai-reveal) {
    background: transparent;
}

/* Always hide when finalized */
.message-text[b-5n8w6kdurt]  .ai-preview-wrap.ai-prune,
.message-content[b-5n8w6kdurt]  .ai-preview-wrap.ai-prune {
    display: none !important;
}

/* In fullscreen mode, images at reasonable size */
.fullscreen-messages[b-5n8w6kdurt]  .ai-preview-wrap,
.fullscreen-messages[b-5n8w6kdurt]  figure.ai-final {
    max-width: 500px !important;
    width: 100%;
}

/* Override message constraints for AI content in fullscreen */
.fullscreen-messages .chat-message.assistant[b-5n8w6kdurt] {
    max-width: 100%;
}

.message-text[b-5n8w6kdurt]  .ai-preview-wrap.ai-live,
.message-content[b-5n8w6kdurt]  .ai-preview-wrap.ai-live {
    display: block !important;
}

/* When image container exists, overlay the preview on top */
.message-text:has(.ai-image-container)[b-5n8w6kdurt]  .model-md .ai-preview-wrap.ai-live {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 0;
}

/* Skeleton scanning animation */
.message-text[b-5n8w6kdurt]  .ai-preview-wrap.scanning::before,
.message-content[b-5n8w6kdurt]  .ai-preview-wrap.scanning::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.1) 50%,
        transparent 100%
    );
    animation: ai-scan-b-5n8w6kdurt 1.5s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
}

@keyframes ai-scan-b-5n8w6kdurt {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Preview frames inside skeleton */
.message-text[b-5n8w6kdurt]  .ai-preview-wrap > img.ai-frame,
.message-content[b-5n8w6kdurt]  .ai-preview-wrap > img.ai-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.message-text[b-5n8w6kdurt]  .ai-preview-wrap > img.ai-frame.ai-reveal,
.message-content[b-5n8w6kdurt]  .ai-preview-wrap > img.ai-frame.ai-reveal {
    opacity: 1;
}

/* Hidden preview images (data carriers) */
.message-text[b-5n8w6kdurt]  img.ai-preview,
.message-content[b-5n8w6kdurt]  img.ai-preview {
    display: none !important;
}

/* Mark elements for cleanup */
.message-text[b-5n8w6kdurt]  .ai-prune,
.message-content[b-5n8w6kdurt]  .ai-prune {
    display: none !important;
}

/* AI caption styling */
.message-text[b-5n8w6kdurt]  .ai-caption,
.message-content[b-5n8w6kdurt]  .ai-caption {
    margin-top: 12px;
    line-height: 1.5;
}

.message-actions[b-5n8w6kdurt] {
    display: flex;
    gap: 2px;
    opacity: 0.6;
}

.message-actions:hover[b-5n8w6kdurt] {
    opacity: 1;
}

/* Feedback visual para botones like/dislike */
.message-actions[b-5n8w6kdurt]  .action-liked {
    color: var(--rz-primary) !important;
    opacity: 1;
}

.message-actions[b-5n8w6kdurt]  .action-disliked {
    color: var(--rz-primary) !important;
    opacity: 1;
}

.message-actions[b-5n8w6kdurt]  .action-liked .rzi,
.message-actions[b-5n8w6kdurt]  .action-disliked .rzi {
    font-variation-settings: 'FILL' 1;
}

/* ===== CITATION PANEL ===== */
.citation-panel[b-5n8w6kdurt] {
    margin-top: 8px;
    margin-bottom: 4px;
}

.citation-toggle[b-5n8w6kdurt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--rz-border-color);
    border-radius: 20px;
    background: color-mix(in srgb, var(--rz-base-background-color) 95%, var(--rz-primary));
    color: var(--rz-text-color);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.citation-toggle:hover[b-5n8w6kdurt] {
    background: color-mix(in srgb, var(--rz-base-background-color) 88%, var(--rz-primary));
    border-color: var(--rz-primary);
}

.citation-chevron[b-5n8w6kdurt] {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.citation-chevron.expanded[b-5n8w6kdurt] {
    transform: rotate(180deg);
}

.citation-list[b-5n8w6kdurt] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding: 4px 0;
}

.citation-item[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
    background: var(--rz-base-background-color);
    text-decoration: none;
    color: var(--rz-text-color);
    font-size: 13px;
    min-width: 180px;
    max-width: 300px;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.citation-item:hover[b-5n8w6kdurt] {
    background: color-mix(in srgb, var(--rz-base-background-color) 92%, var(--rz-primary));
    border-color: var(--rz-primary-lighter);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.citation-index[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--rz-primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.citation-info[b-5n8w6kdurt] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.citation-title[b-5n8w6kdurt] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.citation-url[b-5n8w6kdurt] {
    font-size: 11px;
    color: var(--rz-text-disabled-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.citation-link-icon[b-5n8w6kdurt] {
    font-size: 14px;
    color: var(--rz-text-disabled-color);
    flex-shrink: 0;
}

.citation-item:hover .citation-link-icon[b-5n8w6kdurt] {
    color: var(--rz-primary);
}

/* Reasoning/Thinking content styles - ChatGPT modern style */
.reasoning-container[b-5n8w6kdurt] {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin-bottom: 10px;
    margin-left: 0;
    padding: 0;
    overflow: hidden;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.reasoning-container.collapsed[b-5n8w6kdurt] {
    display: block;
}

.reasoning-header[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    color: color-mix(in srgb, var(--rz-text-disabled-color, #9ca3af) 92%, transparent);
    background: transparent;
    border: 0;
    text-align: left;
    -webkit-user-select: none;
    user-select: none;
    transition: color 0.15s ease, opacity 0.15s ease;
    gap: 5px;
    opacity: 0.92;
}

.reasoning-header:hover[b-5n8w6kdurt] {
    color: var(--rz-text-secondary-color);
    background: transparent;
    opacity: 1;
}

.reasoning-header-text[b-5n8w6kdurt] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.reasoning-header-text[b-5n8w6kdurt]::after {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0;
    transform: scale(0.7);
}

.reasoning-content[b-5n8w6kdurt] {
    padding: 6px 0 2px 19px;
    font-size: 11px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--rz-text-disabled-color, #9ca3af) 92%, transparent);
    border-top: none;
    max-height: 260px;
    overflow-y: auto;
    font-style: normal;
}

.reasoning-content[b-5n8w6kdurt]  p {
    margin-bottom: 0.4em;
    font-size: 11px;
    color: inherit;
}

.reasoning-content[b-5n8w6kdurt]  code {
    font-size: 11px;
    background: color-mix(in srgb, var(--rz-base-200) 65%, transparent);
    padding: 1px 4px;
    border-radius: 3px;
}

.reasoning-container.streaming[b-5n8w6kdurt] {
    opacity: 1;
}

.reasoning-content.streaming[b-5n8w6kdurt] {
    max-height: 220px;
}

.reasoning-container.streaming .reasoning-header[b-5n8w6kdurt] {
    color: color-mix(in srgb, var(--rz-text-disabled-color, #9ca3af) 78%, var(--rz-text-secondary-color));
}

.reasoning-container.streaming .reasoning-header-text[b-5n8w6kdurt]::after {
    opacity: 1;
    animation: thinking-pulse 1.15s ease-in-out infinite;
}

.message-attachments[b-5n8w6kdurt] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.chat-stream-status[b-5n8w6kdurt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--rz-text-disabled-color, #9ca3af);
    margin-bottom: 8px;
    min-height: 28px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    padding: 0;
    width: fit-content;
    max-width: 100%;
    align-self: flex-start;
    text-align: left;
    border: none;
    background: transparent;
    animation: toolStatusFadeIn-b-5n8w6kdurt 0.3s ease-out;
}

.chat-stream-status.clickable[b-5n8w6kdurt] {
    cursor: pointer;
}

.chat-stream-status.clickable:hover[b-5n8w6kdurt] {
    color: var(--rz-text-secondary-color);
}

.chat-stream-status-label[b-5n8w6kdurt] {
    display: inline-block;
    text-align: left;
    font-weight: 500;
    color: var(--rz-text-disabled-color, #9ca3af);
    animation: toolStatusPulse-b-5n8w6kdurt 2.4s ease-in-out infinite;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .chat-stream-status-label[b-5n8w6kdurt] {
        background: linear-gradient(90deg,
            rgba(148, 163, 184, 0.48) 0%,
            rgba(148, 163, 184, 0.48) 32%,
            rgba(226, 232, 240, 0.98) 50%,
            rgba(148, 163, 184, 0.48) 68%,
            rgba(148, 163, 184, 0.48) 100%);
        background-size: 220% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: shimmerWave-b-5n8w6kdurt 1.8s ease-in-out infinite;
    }

    .chat-stream-status.has-reasoning .chat-stream-status-label[b-5n8w6kdurt] {
        background: linear-gradient(90deg,
            color-mix(in srgb, var(--rz-primary) 35%, var(--rz-text-disabled-color, #9ca3af)) 0%,
            color-mix(in srgb, var(--rz-primary) 35%, var(--rz-text-disabled-color, #9ca3af)) 32%,
            color-mix(in srgb, var(--rz-primary) 78%, white) 50%,
            color-mix(in srgb, var(--rz-primary) 35%, var(--rz-text-disabled-color, #9ca3af)) 68%,
            color-mix(in srgb, var(--rz-primary) 35%, var(--rz-text-disabled-color, #9ca3af)) 100%);
        background-size: 220% 100%;
    }
}

.chat-stream-status-chevron[b-5n8w6kdurt] {
    font-size: 16px;
    opacity: 0.8;
    margin-left: 0.15rem;
}

/* ===== TOOL STEP TIMELINE =====
   Shows each tool invocation during an assistant turn as its own line
   (spinner while running, check + duration once done). Populated from
   ChatMessage.LiveSteps which is filled by StreamAIResponseCoreAsync.
   Voice mode never sets LiveSteps, so this block is ignored there. */
.chat-steps[b-5n8w6kdurt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.chat-step[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: var(--rz-text-disabled-color, #9ca3af);
    padding: 2px 0;
    animation: chatStepFadeIn-b-5n8w6kdurt 220ms ease-out;
    will-change: opacity, transform;
}

.chat-step.is-done[b-5n8w6kdurt] {
    color: color-mix(in srgb, var(--rz-text-disabled-color, #9ca3af) 85%, transparent);
    opacity: 0.82;
}

.chat-step.is-failed[b-5n8w6kdurt] {
    color: var(--rz-danger, #ef4444);
    opacity: 1;
}

.chat-step-icon[b-5n8w6kdurt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.chat-step.is-done .chat-step-icon[b-5n8w6kdurt] {
    color: var(--rz-success, #10b981);
    animation: chatStepCheckPop-b-5n8w6kdurt 300ms cubic-bezier(.34,1.56,.64,1);
}

.chat-step.is-failed .chat-step-icon[b-5n8w6kdurt] {
    color: var(--rz-danger, #ef4444);
}

.chat-step-spinner[b-5n8w6kdurt] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1.5px solid color-mix(in srgb, var(--rz-primary) 30%, transparent);
    border-top-color: var(--rz-primary, #6366f1);
    border-radius: 50%;
    animation: chatStepSpin-b-5n8w6kdurt 780ms linear infinite;
}

.chat-step-label[b-5n8w6kdurt] {
    font-weight: 500;
    flex: 1 1 auto;
    min-width: 0;
}

.chat-step.is-running .chat-step-label[b-5n8w6kdurt] {
    background: linear-gradient(90deg,
        rgba(148, 163, 184, 0.55) 0%,
        rgba(148, 163, 184, 0.55) 32%,
        rgba(226, 232, 240, 0.98) 50%,
        rgba(148, 163, 184, 0.55) 68%,
        rgba(148, 163, 184, 0.55) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmerWave-b-5n8w6kdurt 1.8s ease-in-out infinite;
}

.chat-step-duration[b-5n8w6kdurt] {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    flex: 0 0 auto;
}

@keyframes chatStepFadeIn-b-5n8w6kdurt {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes chatStepSpin-b-5n8w6kdurt {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes chatStepCheckPop-b-5n8w6kdurt {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .chat-step[b-5n8w6kdurt],
    .chat-step-spinner[b-5n8w6kdurt],
    .chat-step.is-done .chat-step-icon[b-5n8w6kdurt],
    .chat-step.is-running .chat-step-label[b-5n8w6kdurt] {
        animation: none !important;
    }
}

@keyframes toolStatusFadeIn-b-5n8w6kdurt {
    from { opacity: 0; transform: translateX(-4px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toolStatusPulse-b-5n8w6kdurt {
    0% { opacity: 0.55; }
    50% { opacity: 0.95; }
    100% { opacity: 0.55; }
}

@keyframes shimmerWave-b-5n8w6kdurt {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ===== ATTACHMENT BAR ===== */
.attachment-bar[b-5n8w6kdurt] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid var(--rz-border-color);
    background: var(--rz-base-50);
}

.attachment-chip[b-5n8w6kdurt] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
    font-size: 12px;
    background: var(--rz-base-200);
    border: 1px solid var(--rz-border-color);
    min-width: 148px;
    max-width: 220px;
    position: relative;
}

.attachment-chip.pdf[b-5n8w6kdurt] {
    background: rgba(231, 76, 60, 0.1);
    border-color: #e74c3c;
    color: #e74c3c;
}

.attachment-chip.word[b-5n8w6kdurt] {
    background: rgba(41, 128, 185, 0.1);
    border-color: #2980b9;
    color: #2980b9;
}

.attachment-chip.excel[b-5n8w6kdurt] {
    background: rgba(39, 174, 96, 0.1);
    border-color: #27ae60;
    color: #27ae60;
}

.attachment-chip.ppt[b-5n8w6kdurt] {
    background: rgba(230, 126, 34, 0.1);
    border-color: #e67e22;
    color: #e67e22;
}

.attachment-chip.text[b-5n8w6kdurt] {
    background: rgba(127, 140, 141, 0.1);
    border-color: #7f8c8d;
    color: #7f8c8d;
}

.attachment-chip.image[b-5n8w6kdurt] {
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(243, 247, 252, 0.98) 100%);
    border-color: color-mix(in srgb, var(--rz-primary) 30%, var(--rz-border-color));
    color: var(--rz-text-color);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.attachment-preview[b-5n8w6kdurt] {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 4px;
}

.attachment-preview-button[b-5n8w6kdurt] {
    display: block;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: zoom-in;
    border-radius: 12px;
    overflow: hidden;
}

.attachment-preview-large[b-5n8w6kdurt] {
    width: 100%;
    height: 148px;
    display: block;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--rz-border-color) 55%, transparent);
    background: color-mix(in srgb, var(--rz-base-100) 82%, white);
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.attachment-preview-button:hover .attachment-preview-large[b-5n8w6kdurt],
.attachment-preview-button:focus-visible .attachment-preview-large[b-5n8w6kdurt] {
    transform: scale(1.02);
    filter: saturate(1.04);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

.attachment-name[b-5n8w6kdurt] {
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--rz-text-color);
    font-weight: 600;
    line-height: 1.25;
    padding-right: 1.6rem;
}

.attachment-chip.image .attachment-name[b-5n8w6kdurt] {
    padding: 0.2rem 1.6rem 0 0.1rem;
}

.attachment-chip[b-5n8w6kdurt]  .rz-button {
    position: absolute;
    top: 6px;
    right: 6px;
}

.chat-attachment-lightbox-overlay[b-5n8w6kdurt] {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(8, 12, 20, 0.88);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    outline: none;
}

.chat-attachment-lightbox[b-5n8w6kdurt] {
    position: relative;
    width: min(92vw, 1100px);
    max-height: 90vh;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, white 14%, transparent);
    background: color-mix(in srgb, var(--rz-base-900) 92%, black);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.chat-attachment-lightbox-body[b-5n8w6kdurt] {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.75rem 4.5rem 1.5rem;
}

.chat-attachment-lightbox-image[b-5n8w6kdurt] {
    max-width: 100%;
    max-height: 68vh;
    object-fit: contain;
    border-radius: 14px;
    background: white;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.3);
}

.chat-attachment-lightbox-footer[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem 1.25rem;
    color: white;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06));
}

.chat-attachment-lightbox-name[b-5n8w6kdurt] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-attachment-lightbox-counter[b-5n8w6kdurt] {
    flex-shrink: 0;
    color: rgba(255,255,255,0.72);
    font-size: 0.9rem;
}

.chat-attachment-lightbox-close[b-5n8w6kdurt],
.chat-attachment-lightbox-nav[b-5n8w6kdurt] {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: white;
    background: rgba(15, 23, 42, 0.52);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.chat-attachment-lightbox-close:hover[b-5n8w6kdurt],
.chat-attachment-lightbox-nav:hover[b-5n8w6kdurt] {
    background: rgba(15, 23, 42, 0.78);
    transform: translateY(-1px);
}

.chat-attachment-lightbox-close[b-5n8w6kdurt] {
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
}

.chat-attachment-lightbox-nav[b-5n8w6kdurt] {
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
}

.chat-attachment-lightbox-nav.prev[b-5n8w6kdurt] {
    left: 1rem;
}

.chat-attachment-lightbox-nav.next[b-5n8w6kdurt] {
    right: 1rem;
}

@media (max-width: 768px) {
    .attachment-chip[b-5n8w6kdurt] {
        min-width: 136px;
        max-width: 184px;
    }

    .attachment-preview-large[b-5n8w6kdurt] {
        height: 116px;
    }

    .chat-attachment-lightbox-overlay[b-5n8w6kdurt] {
        padding: 0.75rem;
    }

    .chat-attachment-lightbox-body[b-5n8w6kdurt] {
        min-height: 46vh;
        padding: 3.5rem 1rem 1rem;
    }

    .chat-attachment-lightbox-image[b-5n8w6kdurt] {
        max-height: 58vh;
    }

    .chat-attachment-lightbox-nav[b-5n8w6kdurt] {
        width: 2.5rem;
        height: 2.5rem;
    }

    .chat-attachment-lightbox-nav.prev[b-5n8w6kdurt] {
        left: 0.5rem;
    }

    .chat-attachment-lightbox-nav.next[b-5n8w6kdurt] {
        right: 0.5rem;
    }
}

/* ===== USER MESSAGE ATTACHMENTS (ChatGPT Style) ===== */
.user-attach-bar[b-5n8w6kdurt] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 6px 0 12px;
}

/* Base chip for user message attachments */
.uatt[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 260px;
    max-width: 560px;
    padding: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    border-radius: 8px;
}

/* Document chips */
.uatt--doc[b-5n8w6kdurt] {
    padding-left: 0;
}

.uatt-left[b-5n8w6kdurt] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 8px;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
}

.uatt-ext[b-5n8w6kdurt] {
    font-size: 12px;
    letter-spacing: .3px;
}

.uatt-main[b-5n8w6kdurt] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.uatt-name[b-5n8w6kdurt] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    max-height: 3.1em;
    text-align: left;
    color: var(--rz-text-color);
}

.uatt-meta[b-5n8w6kdurt] {
    font-size: 12px;
    opacity: .75;
    margin-top: 2px;
    text-align: left;
    color: var(--rz-text-secondary-color);
}

/* Image attachments */
.uatt--img[b-5n8w6kdurt] {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    flex-direction: column;
    padding: 8px 8px 10px;
    gap: 8px;
}

.uatt-img[b-5n8w6kdurt] {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.uatt-caption[b-5n8w6kdurt] {
    font-size: 12px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    max-height: 2.5em;
    text-align: left;
    color: var(--rz-text-color);
}

/* Neutral file-type stripes — same gray for every kind */
.uatt--pdf .uatt-left[b-5n8w6kdurt],
.uatt--word .uatt-left[b-5n8w6kdurt],
.uatt--excel .uatt-left[b-5n8w6kdurt],
.uatt--ppt .uatt-left[b-5n8w6kdurt],
.uatt--txt .uatt-left[b-5n8w6kdurt],
.uatt--json .uatt-left[b-5n8w6kdurt],
.uatt--xml .uatt-left[b-5n8w6kdurt] { background: #475569; }

/* ===== ULTRA MINIMAL INPUT (ChatGPT style) ===== */
.gpt-input-area[b-5n8w6kdurt] {
    padding: 12px 16px 16px;
    background: transparent;
}

.gpt-input-box[b-5n8w6kdurt] {
    background: var(--rz-base-100);
    border: none;
    border-radius: 24px;
    padding: 14px 18px 12px;
}

.gpt-input-box:focus-within[b-5n8w6kdurt] {
    background: var(--rz-base-100);
}

.gpt-textarea-row[b-5n8w6kdurt] {
    display: flex;
    width: 100%;
}

.gpt-textarea[b-5n8w6kdurt] {
    width: 100%;
    border: none !important;
    border-width: 0 !important;
    background: transparent !important;
    resize: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    padding: 0;
    min-height: 24px;
    max-height: 200px;
    height: auto;
    color: var(--rz-text-color);
    outline: none !important;
    box-shadow: none !important;
    overflow-y: hidden;
}

.gpt-textarea:focus[b-5n8w6kdurt] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.gpt-textarea[b-5n8w6kdurt]::placeholder {
    color: var(--rz-text-disabled-color);
}

.gpt-tools-row[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    gap: 8px;
}

.gpt-tools-left[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gpt-tools-right[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gpt-tool-wrapper[b-5n8w6kdurt] {
    position: relative;
}

.gpt-tool-btn[b-5n8w6kdurt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    min-width: 32px;
    padding: 0 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--rz-text-tertiary-color);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
}

.gpt-tool-btn:hover:not(:disabled)[b-5n8w6kdurt] {
    background: var(--rz-base-200);
    color: var(--rz-text-color);
}

.gpt-tool-btn:disabled[b-5n8w6kdurt] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* "+" consolidated-options button (Claude-style). Holds attach + reasoning +
   web search + code mode in a single popover so the input bar stays clean
   and the right-side mic button keeps its breathing room. */
.gpt-tool-plus[b-5n8w6kdurt] {
    position: relative;
    width: 32px;
    padding: 0;
    border-radius: 50%;
}
.gpt-tool-plus.active[b-5n8w6kdurt] {
    color: var(--rz-primary, #6366f1);
}
.gpt-tool-plus[b-5n8w6kdurt]  .rzi {
    font-size: 20px;
}
/* Subtle indicator that one or more tool options are currently active. */
.gpt-tool-plus-dot[b-5n8w6kdurt] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rz-primary, #6366f1);
    border: 1.5px solid var(--rz-base-background-color, #ffffff);
    pointer-events: none;
}

/* The "+" popover is a slightly wider variant of the existing reasoning
   dropdown so the bilingual labels (e.g. "Más opciones" / "Más opciones")
   never wrap awkwardly. */
.gpt-more-menu[b-5n8w6kdurt] {
    min-width: 340px;
    max-width: 400px;
}

/* Inline visual separator between sections of the "+" popover (Attach +
   toggles vs Reasoning effort radio list). Kept around for the legacy
   layout; the current "+" menu (toggles only) does not use it. */
.gpt-dropdown-separator[b-5n8w6kdurt] {
    height: 1px;
    margin: 6px 0;
    background: var(--rz-base-300, #e5e7eb);
}

/* Compact dropdown row used by the "+" popover — single-line with icon, label
   and a trailing native checkbox, no two-line description. The label is
   self-explanatory ("Modo Código", "Búsqueda web", "Modo desarrollador") so
   the second descriptive line just adds noise inside a small popover. */
.gpt-dropdown-item-compact[b-5n8w6kdurt] {
    padding: 8px 12px;
    gap: 10px;
}
.gpt-dropdown-item-compact .gpt-dropdown-item-title[b-5n8w6kdurt] {
    flex: 1;
    text-align: left;
}

/* Toggle row (web search, code, dev): native checkbox aligned to the right
   so the row reads "icon — name — check" left-to-right. The whole row is a
   <label> so clicks anywhere inside flip the checkbox via the implicit
   for/input association — no @onclick needed on the label. */
.gpt-dropdown-checkrow[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--rz-text-color, #1e1e1e);
    font: inherit;
    transition: background 0.12s ease;
}
.gpt-dropdown-checkrow:hover[b-5n8w6kdurt] {
    background: var(--rz-base-200, #f3f4f6);
}
/* Two-class selector (0,2,0) so it beats the later `.gpt-dropdown-item` base
   rule (0,1,0, padding 8px 10px) that otherwise wins by source order and leaves
   the trailing switch grazing the right edge. Give the toggle rows a roomier,
   symmetric horizontal padding so the iOS-style switch sits clear of the menu
   border. */
.gpt-dropdown-checkrow.gpt-dropdown-item-compact[b-5n8w6kdurt] {
    padding: 8px 16px;
    gap: 12px;
}
/* Small iOS-style switch used inside the "+" popover for Web search,
   Code mode and Dev mode. Native checkbox for accessibility/keyboard,
   restyled visually as a 28×16 track + 12px thumb. */
.gpt-dropdown-check[b-5n8w6kdurt] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 28px;
    height: 16px;
    border-radius: 999px;
    background: var(--rz-base-300, #d1d5db);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.gpt-dropdown-check[b-5n8w6kdurt]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}
.gpt-dropdown-check:checked[b-5n8w6kdurt] {
    background: var(--rz-primary, #6366f1);
}
.gpt-dropdown-check:checked[b-5n8w6kdurt]::before {
    transform: translateX(12px);
}
.gpt-dropdown-check:focus-visible[b-5n8w6kdurt] {
    outline: 2px solid var(--rz-primary, #6366f1);
    outline-offset: 2px;
}

.gpt-tool-btn.active[b-5n8w6kdurt] {
    color: var(--rz-primary);
    background: rgba(var(--rz-primary-rgb), 0.1);
}

.gpt-tool-btn[b-5n8w6kdurt]  .rzi {
    font-size: 18px;
}

.gpt-tool-labeled[b-5n8w6kdurt] {
    padding: 0 12px;
}

.gpt-tool-label[b-5n8w6kdurt] {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Mode toggles (Web Search, Code Mode, ...) — pill-shaped buttons
   with role=switch and aria-checked so screen readers treat the
   control as a toggle. Desktop shows the icon plus label; narrow
   mobile hides the label but keeps the icon plus aria-label/title
   for accessibility. */
.gpt-tools-left[b-5n8w6kdurt] {
    gap: 0.75rem;
}

.gpt-mode-toggle[b-5n8w6kdurt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 32px;
    min-width: 32px;
    padding: 0 0.75rem;
    border: 1px solid transparent;
    background: var(--rz-base-100);
    color: var(--rz-text-color);
    border-radius: 999px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.gpt-mode-toggle:hover:not(:disabled):not(.active)[b-5n8w6kdurt] {
    background: var(--rz-base-200);
    border-color: var(--rz-base-300);
}

.gpt-mode-toggle:focus-visible[b-5n8w6kdurt] {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

.gpt-mode-toggle:active:not(:disabled)[b-5n8w6kdurt] {
    transform: scale(0.97);
}

.gpt-mode-toggle.active[b-5n8w6kdurt] {
    background: var(--rz-primary);
    color: white;
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 3px var(--rz-primary-lighter, rgba(var(--rz-primary-rgb, 59, 130, 246), 0.25));
}

.gpt-mode-toggle.active:hover:not(:disabled)[b-5n8w6kdurt] {
    background: var(--rz-primary-dark, var(--rz-primary));
}

.gpt-mode-toggle:disabled[b-5n8w6kdurt] {
    opacity: 0.4;
    cursor: not-allowed;
}

.gpt-mode-toggle[b-5n8w6kdurt]  .rzi {
    font-size: 18px;
    line-height: 1;
}

.gpt-mode-toggle-label[b-5n8w6kdurt] {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Send button - minimal and proportional */
.gpt-send-btn[b-5n8w6kdurt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: var(--rz-text-tertiary-color);
    color: white;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.gpt-send-btn:hover:not(:disabled):not(.disabled)[b-5n8w6kdurt] {
    background: var(--rz-text-color);
}

.gpt-send-btn:active:not(:disabled):not(.disabled)[b-5n8w6kdurt] {
    transform: scale(0.95);
}

.gpt-send-btn.disabled[b-5n8w6kdurt] {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.gpt-send-btn[b-5n8w6kdurt]  svg {
    width: 16px;
    height: 16px;
}

.gpt-send-btn[b-5n8w6kdurt]  .rzi {
    font-size: 16px;
}

.gpt-stop-btn[b-5n8w6kdurt] {
    background: var(--rz-danger);
}

.gpt-stop-btn:hover:not(:disabled)[b-5n8w6kdurt] {
    background: var(--rz-danger-dark);
}

/* ── Voice mode ────────────────────────────────────── */
.gpt-mic-btn[b-5n8w6kdurt] {
    background: transparent;
    color: var(--rz-text-tertiary-color);
}
.gpt-mic-btn:hover:not(:disabled):not(.disabled)[b-5n8w6kdurt] {
    background: var(--rz-base-200);
    color: var(--rz-text-color);
}

.voice-panel[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--rz-base-100);
    border-radius: 16px;
    border: 1px solid var(--rz-border-color);
}
.voice-panel-compact[b-5n8w6kdurt] {
    padding: 8px 12px;
    gap: 8px;
}

.voice-orb[b-5n8w6kdurt] {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--rz-primary-lighter) 0%, var(--rz-primary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: voice-pulse-b-5n8w6kdurt 2s ease-in-out infinite;
}
.voice-orb-small[b-5n8w6kdurt] {
    width: 32px;
    height: 32px;
}
.voice-orb-inner[b-5n8w6kdurt] {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
}

.voice-orb[data-voice-state="listening"][b-5n8w6kdurt] {
    animation: voice-pulse-b-5n8w6kdurt 1.2s ease-in-out infinite;
    background: radial-gradient(circle, var(--rz-success-lighter) 0%, var(--rz-success) 100%);
}
.voice-orb[data-voice-state="thinking"][b-5n8w6kdurt] {
    animation: voice-spin-b-5n8w6kdurt 1.5s linear infinite;
    background: radial-gradient(circle, var(--rz-warning-lighter) 0%, var(--rz-warning) 100%);
}
.voice-orb[data-voice-state="speaking"][b-5n8w6kdurt] {
    animation: voice-pulse-b-5n8w6kdurt 0.8s ease-in-out infinite;
    background: radial-gradient(circle, var(--rz-primary-lighter) 0%, var(--rz-primary) 100%);
}
.voice-orb[data-voice-state="connecting"][b-5n8w6kdurt] {
    animation: voice-spin-b-5n8w6kdurt 2s linear infinite;
    opacity: 0.7;
}

.voice-status[b-5n8w6kdurt] {
    font-size: 13px;
    color: var(--rz-text-secondary-color);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes voice-pulse-b-5n8w6kdurt {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--rz-primary-rgb, 59,130,246), 0.4); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(var(--rz-primary-rgb, 59,130,246), 0); }
}
@keyframes voice-spin-b-5n8w6kdurt {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.gpt-char-counter[b-5n8w6kdurt] {
    font-size: 12px;
    font-weight: 500;
    color: var(--rz-text-disabled-color);
    font-variant-numeric: tabular-nums;
}

.gpt-char-counter.warning[b-5n8w6kdurt] {
    color: var(--rz-warning);
}

.gpt-char-counter.error[b-5n8w6kdurt] {
    color: var(--rz-danger);
}

.gpt-dropdown-menu[b-5n8w6kdurt] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 8px;
    min-width: 200px;
    z-index: 1000;
}

.gpt-dropdown-header[b-5n8w6kdurt] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--rz-text-disabled-color);
    padding: 4px 8px 8px;
    letter-spacing: 0.5px;
}

.gpt-dropdown-item[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--rz-text-color);
    text-align: left;
    transition: background 0.15s;
}

.gpt-dropdown-item:hover[b-5n8w6kdurt] {
    background: var(--rz-base-200);
}

.gpt-dropdown-item.selected[b-5n8w6kdurt] {
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
}

.gpt-dropdown-item[b-5n8w6kdurt]  .rzi {
    font-size: 16px;
    opacity: 0.7;
}

.gpt-char-counter[b-5n8w6kdurt] {
    font-size: 11px;
    color: var(--rz-text-disabled-color);
    padding-right: 8px;
}

.gpt-char-counter.warning[b-5n8w6kdurt] {
    color: var(--rz-warning);
}

.gpt-char-counter.error[b-5n8w6kdurt] {
    color: var(--rz-danger);
}

/* ===== Legacy INPUT (fallback) ===== */
.floating-chat-input[b-5n8w6kdurt] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--rz-border-color);
    align-items: flex-end;
}

.input-wrapper[b-5n8w6kdurt] {
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.attach-btn[b-5n8w6kdurt] {
    margin-bottom: 6px;
}

.chat-textarea[b-5n8w6kdurt] {
    flex: 1;
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    padding: 10px 12px;
    padding-bottom: 24px;
    resize: none;
    font-family: inherit;
    font-size: 14px;
    max-height: 200px;
    min-height: 24px;
    height: auto;
    overflow-y: hidden;
    background: var(--rz-base-background-color);
    box-sizing: border-box;
    transition: border-color 0.2s;
    color: var(--rz-text-color);
}

.chat-textarea:focus[b-5n8w6kdurt] {
    outline: none;
    border-color: var(--rz-primary);
}

.chat-textarea.near-limit[b-5n8w6kdurt] {
    border-color: var(--rz-warning);
}

.chat-textarea.at-limit[b-5n8w6kdurt] {
    border-color: var(--rz-danger);
}

.char-counter[b-5n8w6kdurt] {
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 10px;
    color: var(--rz-text-disabled-color);
    pointer-events: none;
}

.char-counter.warning[b-5n8w6kdurt] {
    color: var(--rz-warning);
    font-weight: 500;
}

.char-counter.error[b-5n8w6kdurt] {
    color: var(--rz-danger);
    font-weight: 600;
}

.input-actions[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 8px;
}

.input-spacer[b-5n8w6kdurt] {
    flex: 1;
}

/* ===== REASONING EFFORT SELECTOR ===== */
.reasoning-selector[b-5n8w6kdurt] {
    position: relative;
}

.reasoning-menu[b-5n8w6kdurt] {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    background: var(--rz-panel-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    min-width: 280px;
    z-index: 1000;
    overflow: hidden;
}

.reasoning-menu.floating-menu[b-5n8w6kdurt] {
    min-width: 200px;
}

.reasoning-menu-header[b-5n8w6kdurt] {
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--rz-border-color);
}

.reasoning-option[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.reasoning-option:hover[b-5n8w6kdurt] {
    background: var(--rz-secondary-lighter);
}

.reasoning-option.selected[b-5n8w6kdurt] {
    background: var(--rz-primary-light);
}

.reasoning-option[b-5n8w6kdurt]  .rz-icon {
    font-size: 20px;
    color: var(--rz-text-secondary-color);
}

.reasoning-option.selected[b-5n8w6kdurt]  .rz-icon {
    color: var(--rz-primary);
}

.reasoning-option-text[b-5n8w6kdurt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reasoning-option-title[b-5n8w6kdurt] {
    font-weight: 500;
    font-size: 14px;
}

.reasoning-option-desc[b-5n8w6kdurt] {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
}

.floating-menu .reasoning-option-text[b-5n8w6kdurt] {
    display: none;
}

.floating-menu .reasoning-option span[b-5n8w6kdurt] {
    font-size: 13px;
}

.chat-disclaimer[b-5n8w6kdurt] {
    padding: 6px 16px 10px;
    text-align: center;
}

/* ===== GENERATED IMAGES ===== */
.chat-message[b-5n8w6kdurt]  .generated-image {
    margin: 8px 0;
    border-radius: 8px;
    overflow: hidden;
    max-width: 512px;
}

.chat-message[b-5n8w6kdurt]  .generated-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.chat-message[b-5n8w6kdurt]  .generated-image img:hover {
    transform: scale(1.02);
}

.chat-message[b-5n8w6kdurt]  .revised-prompt {
    font-size: 12px;
    color: var(--rz-text-disabled-color);
    margin-top: 8px;
    padding: 8px;
    background: var(--rz-base-100);
    border-radius: 4px;
}

/* ===== FLOATING BUTTON ===== */
.floating-chat-button[b-5n8w6kdurt] {
    position: fixed;
    /* `--mnav-h` solo existe por debajo de 1024 px (theme.css), donde se pinta la
       barra de navegacion inferior; en escritorio resuelve a 0 y esto es el
       `bottom: 20px` de siempre. Un solo sitio decide a que altura flota. */
    bottom: calc(20px + var(--mnav-h, 0px));
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    /* Glass + holographic halo so the AiSparkIcon sparkle stays the visual focus.
       Previously was a flat var(--rz-primary) fill which made the glyph unreadable. */
    background:
        radial-gradient(circle at 30% 28%, rgba(192, 132, 252, 0.24) 0%, rgba(99, 102, 241, 0.14) 55%, transparent 80%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(30, 27, 75, 0.88) 100%);
    color: white;
    border: 1px solid rgba(167, 139, 250, 0.35);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s, border-color 0.2s;
    z-index: 999;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.floating-chat-button:hover[b-5n8w6kdurt] {
    transform: scale(1.06);
    box-shadow: 0 8px 22px rgba(192, 132, 252, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    border-color: rgba(192, 132, 252, 0.55);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .fullscreen-chat-container[b-5n8w6kdurt] {
        position: relative;
    }

    .chat-mobile-sidebar-backdrop[b-5n8w6kdurt] {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 2;
        background: rgba(15, 23, 42, 0.42);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .conversations-sidebar[b-5n8w6kdurt] {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(86vw, 320px);
        max-width: 320px;
        z-index: 3;
        box-shadow: 0 18px 44px rgba(15, 23, 42, 0.24);
        transition: transform 0.25s ease;
    }

    .conversations-sidebar.collapsed[b-5n8w6kdurt] {
        width: min(86vw, 320px);
        transform: translateX(-100%);
        overflow: hidden;
        border-right: 1px solid var(--rz-border-color);
    }

    .fullscreen-chat-main[b-5n8w6kdurt] {
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }

    .fullscreen-header[b-5n8w6kdurt] {
        padding: 0.75rem;
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--rz-base-background-color);
    }

    .fullscreen-messages[b-5n8w6kdurt] {
        padding: 0.875rem 0.75rem;
        max-height: none;
    }

    .fullscreen-input-box[b-5n8w6kdurt] {
        max-width: none;
        width: auto;
        margin: 0 0.75rem;
    }

    .gallery-sidebar[b-5n8w6kdurt] {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        min-width: 0;
        height: min(48dvh, 420px);
        z-index: 4;
        border-left: none;
        border-top: 1px solid var(--rz-border-color);
        box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.18);
    }

    .chat-message[b-5n8w6kdurt],
    .chat-message.user[b-5n8w6kdurt] {
        max-width: 100%;
    }

    .message-text[b-5n8w6kdurt] {
        font-size: 13px;
    }

    .citation-list[b-5n8w6kdurt] {
        flex-direction: column;
    }

    .citation-item[b-5n8w6kdurt] {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .user-attach-bar[b-5n8w6kdurt] {
        justify-content: stretch;
    }

    .uatt[b-5n8w6kdurt],
    .uatt--img[b-5n8w6kdurt] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .gpt-tools-row[b-5n8w6kdurt] {
        flex-wrap: wrap;
        align-items: center;
    }

    .gpt-tools-left[b-5n8w6kdurt] {
        flex: 1 1 auto;
        flex-wrap: wrap;
    }

    .gpt-tools-right[b-5n8w6kdurt] {
        gap: 8px;
        margin-left: auto;
    }

    .gpt-tool-label[b-5n8w6kdurt] {
        display: none;
    }

    .gpt-tools-left[b-5n8w6kdurt] {
        gap: 0.5rem;
    }

    .gpt-mode-toggle[b-5n8w6kdurt] {
        height: 36px;
        padding: 0 0.875rem;
        font-size: 13px;
    }

    .voice-panel[b-5n8w6kdurt] {
        width: 100%;
        justify-content: space-between;
    }

    .chat-disclaimer[b-5n8w6kdurt] {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .sessions-dropdown[b-5n8w6kdurt] {
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        bottom: calc(84px + env(safe-area-inset-bottom));
        top: auto;
        width: auto;
        max-height: min(55dvh, 420px);
    }
}

@media (max-width: 480px) {
    .floating-chat-container[b-5n8w6kdurt] {
        width: calc(100vw - 16px);
        height: calc(100dvh - 32px);
        bottom: 8px;
        right: 8px;
    }

    /* Por encima de la barra de navegacion inferior: `--mnav-h` lo declara
       theme.css en el mismo punto de ruptura, asi que ambos suben o bajan
       juntos. El respaldo cubre las vistas donde la barra no se pinta. */
    .floating-chat-button[b-5n8w6kdurt] {
        bottom: calc(16px + var(--mnav-h, 0px) + env(safe-area-inset-bottom));
        right: 16px;
    }

    .conversations-sidebar[b-5n8w6kdurt],
    .conversations-sidebar.collapsed[b-5n8w6kdurt] {
        width: 100%;
        max-width: 100%;
    }

    .sidebar-header[b-5n8w6kdurt] {
        padding: 10px;
    }

    .fullscreen-header[b-5n8w6kdurt] {
        padding: 0.625rem;
    }

    .fullscreen-messages[b-5n8w6kdurt] {
        padding: 0.75rem 0.625rem;
    }

    .attachment-bar[b-5n8w6kdurt] {
        padding: 8px 12px;
    }

    .attachment-chip[b-5n8w6kdurt] {
        min-width: 120px;
        max-width: 100%;
        flex: 1 1 calc(50% - 6px);
    }

    /* Icons-only mode toggles on very narrow viewports. The aria-label and
       title remain populated so the control is still announced by screen
       readers and revealed on long-press / hover. */
    .gpt-mode-toggle[b-5n8w6kdurt] {
        padding: 0 0.5rem;
        min-width: 36px;
    }

    .gpt-mode-toggle-label[b-5n8w6kdurt] {
        display: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PIEZA de chat/clarification-card.css — el placeholder de streaming lo
   renderiza ESTE componente (FloatingChat.razor:1083), no ClarificationCard.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Streaming-pending placeholder shown briefly while the marker JSON is
   still partial (start observed, end not yet arrived). Discreet so it
   does not jump the layout. */
.clarification-card-pending[b-5n8w6kdurt] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 2px;
    padding: 6px 0;
    color: var(--rz-text-secondary-color, #94a3b8);
}

.clarification-card-pending__spinner[b-5n8w6kdurt] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--rz-base-300, #d1d5db);
    border-top-color: var(--rz-primary, #1565c0);
    animation: clarification-card-pending-spin-b-5n8w6kdurt 800ms linear infinite;
}

@keyframes clarification-card-pending-spin-b-5n8w6kdurt {
    to { transform: rotate(360deg); }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PIEZA de chat/artifact-card.css — el layout partido del fullscreen: el
   sujeto (.fullscreen-chat-container.with-artifact-preview) es marcado de
   ESTE componente; el descendiente .artifact-preview-pane del @media es
   marcado del hijo ArtifactPreview → ::deep.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
 * Split fullscreen layout — when ChatUIState.HasArtifactPreview is true
 * the Razor side adds .with-artifact-preview to .fullscreen-chat-container.
 *
 * The base container is display:flex; switching to display:grid here
 * lets us define three explicit tracks: sidebar | chat | preview.
 * Column 1 is `auto` so the sidebar keeps its own intrinsic width
 * (340 px normal / 60 px collapsed) without duplicating that value here.
 * Columns 2 & 3 use minmax(0,…) so both can shrink below their content
 * size — the `0` floor is essential in CSS Grid to prevent overflow.
 * ────────────────────────────────────────────────────────────────────── */
.fullscreen-chat-container.with-artifact-preview[b-5n8w6kdurt] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.6fr);
    transition: grid-template-columns 220ms ease;
}

/* Remove the flex centering + max-width cap so the chat column fills
   its grid track instead of centering a narrow box inside it. */
.fullscreen-chat-container.with-artifact-preview .fullscreen-chat-main[b-5n8w6kdurt] {
    max-width: none;
    margin: 0;
    min-width: 0;
}

@media (max-width: 1100px) {
    .fullscreen-chat-container.with-artifact-preview[b-5n8w6kdurt] {
        /* On narrow viewports drop back to two columns; the preview pane
           spans the full width below the sidebar+chat row. */
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }
    .fullscreen-chat-container.with-artifact-preview[b-5n8w6kdurt]  .artifact-preview-pane {
        grid-column: 1 / -1;
        max-height: 50vh;
    }
    .fullscreen-chat-container.with-artifact-preview .fullscreen-chat-main[b-5n8w6kdurt] {
        max-width: 1000px;
        margin: 0 auto;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PIEZA de chat/ai-media.css — integración de imagen/vídeo generados en el
   mensaje: el sujeto ancla (.chat-message) es marcado de ESTE componente y el
   contenido llega por runtime (ModelMarkdown / ai-media.js) → ::deep. Van
   DESPUÉS de la familia .generated-image de floating-chat (misma especificidad
   compilada): el orden reproduce al ganador de hoy (estas declaraciones
   pisaban a las de arriba por especificidad en el CSS global).
   ═════════════════════════════════════════════════════════════════════════════ */

/* ============================================
   CHAT MESSAGE INTEGRATION
   ============================================ */

.chat-message[b-5n8w6kdurt]  .generated-image {
    margin: 4px 0;
}

.chat-message[b-5n8w6kdurt]  .generated-image img,
.chat-message[b-5n8w6kdurt]  .generated-video video {
    max-width: 100%;
    border-radius: 12px;
    cursor: pointer;
}

.chat-message[b-5n8w6kdurt]  .revised-prompt {
    font-size: 12px;
    color: var(--rz-text-secondary-color, #64748b);
    margin-top: 6px;
    font-style: italic;
}
/* /Components/Pages/Chat/Gallery.razor.rz.scp.css */
/* Estilos propios de Gallery — CSS isolation.
   Vienen de wwwroot/css/chat/gallery.css, que se cargaba en TODAS las paginas
   del portal. Sus 5 clases van sobre elementos HTML de este marcado y no las
   usa ningun otro componente (comprobado antes de mover), asi que es una
   mudanza limpia: el compilador les pone el `b-{hash}` y dejan de poder
   alcanzar a nadie mas.
   ───────────────────────────────────────────────────────────────────────── */

.gallery-page[b-n3y3xcrfer] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.gallery-page .gallery-header[b-n3y3xcrfer] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.gallery-page .gallery-header-content h1[b-n3y3xcrfer] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.gallery-page .gallery-subtitle[b-n3y3xcrfer] {
    margin: 0.25rem 0 0;
    color: var(--rz-text-secondary-color);
    font-size: 0.8125rem;
}

.gallery-page .gallery-filters[b-n3y3xcrfer] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* /Components/Pages/Chat/ImageEditorDialog.razor.rz.scp.css */
/* Estilos propios de ImageEditorDialog — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/chat/image-editor-dialog.css. Todo el fichero estaba
   ya scoped bajo .image-editor-dialog, cuyo root es un <div> plano de
   ImageEditorDialog.razor; header, preview, tools, footer, botones, textarea
   y los <span class="material-symbols-outlined"> son HTML propio del .razor →
   b-{hash} directo, sin ::deep ni envoltorio. @keyframes image-editor-spin y
   el @media 768px viajan tal cual.
   ───────────────────────────────────────────────────────────────────────────── */

.image-editor-dialog[b-bugbk8296h] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
}

.image-editor-dialog .editor-header[b-bugbk8296h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rz-border-color);
}

.image-editor-dialog .header-title[b-bugbk8296h] {
    font-weight: 500;
    font-size: 1rem;
}

.image-editor-dialog .close-btn[b-bugbk8296h] {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    border-radius: 4px;
}

.image-editor-dialog .close-btn:hover[b-bugbk8296h] {
    background: var(--rz-base-200);
    color: var(--rz-text-color);
}

.image-editor-dialog .editor-body[b-bugbk8296h] {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.image-editor-dialog .preview-section[b-bugbk8296h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    overflow: hidden;
}

.image-editor-dialog .image-preview[b-bugbk8296h] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rz-base-200);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

.image-editor-dialog .image-preview img[b-bugbk8296h] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.image-editor-dialog .processing-overlay[b-bugbk8296h] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: white;
    z-index: 10;
}

.image-editor-dialog .spinner[b-bugbk8296h] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: image-editor-spin-b-bugbk8296h 0.8s linear infinite;
}

@keyframes image-editor-spin-b-bugbk8296h {
    to { transform: rotate(360deg); }
}

.image-editor-dialog .variations-strip[b-bugbk8296h] {
    margin-top: 0.75rem;
}

.image-editor-dialog .strip-label[b-bugbk8296h] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    margin-bottom: 0.5rem;
    display: block;
}

.image-editor-dialog .variations-grid[b-bugbk8296h] {
    display: flex;
    gap: 0.5rem;
}

.image-editor-dialog .variation-thumb[b-bugbk8296h] {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.image-editor-dialog .variation-thumb:hover[b-bugbk8296h] {
    border-color: var(--rz-primary-lighter);
}

.image-editor-dialog .variation-thumb.selected[b-bugbk8296h] {
    border-color: var(--rz-primary);
}

.image-editor-dialog .variation-thumb img[b-bugbk8296h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-editor-dialog .tools-section[b-bugbk8296h] {
    width: 280px;
    border-left: 1px solid var(--rz-border-color);
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.image-editor-dialog .tool-group[b-bugbk8296h] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.image-editor-dialog .group-label[b-bugbk8296h] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--rz-text-secondary-color);
}

.image-editor-dialog .tool-btn[b-bugbk8296h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: var(--rz-base-200);
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    cursor: pointer;
    color: var(--rz-text-color);
    font-size: 0.875rem;
    transition: all 0.2s;
}

.image-editor-dialog .tool-btn:hover:not(:disabled)[b-bugbk8296h] {
    background: var(--rz-base-300);
    border-color: var(--rz-primary-lighter);
}

.image-editor-dialog .tool-btn:disabled[b-bugbk8296h] {
    opacity: 0.5;
    cursor: not-allowed;
}

.image-editor-dialog .tool-btn .material-symbols-outlined[b-bugbk8296h] {
    font-size: 18px;
}

.image-editor-dialog .prompt-input-group[b-bugbk8296h] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.image-editor-dialog .prompt-input-group textarea[b-bugbk8296h] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--rz-border-color);
    border-radius: 6px;
    background: var(--rz-input-background-color);
    color: var(--rz-text-color);
    font-family: inherit;
    font-size: 0.875rem;
    resize: none;
}

.image-editor-dialog .prompt-input-group textarea:focus[b-bugbk8296h] {
    outline: none;
    border-color: var(--rz-primary);
}

.image-editor-dialog .apply-btn[b-bugbk8296h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem;
    background: var(--rz-primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.2s;
}

.image-editor-dialog .apply-btn:hover:not(:disabled)[b-bugbk8296h] {
    background: var(--rz-primary-dark);
}

.image-editor-dialog .apply-btn:disabled[b-bugbk8296h] {
    opacity: 0.5;
    cursor: not-allowed;
}

.image-editor-dialog .preset-chips[b-bugbk8296h] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.image-editor-dialog .preset-chip[b-bugbk8296h] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    background: var(--rz-base-200);
    border: 1px solid var(--rz-border-color);
    border-radius: 20px;
    cursor: pointer;
    color: var(--rz-text-color);
    font-size: 0.75rem;
    transition: all 0.2s;
}

.image-editor-dialog .preset-chip:hover:not(:disabled)[b-bugbk8296h] {
    background: var(--rz-primary-lighter);
    border-color: var(--rz-primary);
}

.image-editor-dialog .preset-chip:disabled[b-bugbk8296h] {
    opacity: 0.5;
    cursor: not-allowed;
}

.image-editor-dialog .preset-chip .material-symbols-outlined[b-bugbk8296h] {
    font-size: 14px;
}

.image-editor-dialog .editor-footer[b-bugbk8296h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--rz-border-color);
    gap: 1rem;
}

.image-editor-dialog .error-msg[b-bugbk8296h] {
    color: var(--rz-danger);
    font-size: 0.8rem;
}

.image-editor-dialog .footer-actions[b-bugbk8296h] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.image-editor-dialog .btn-secondary[b-bugbk8296h],
.image-editor-dialog .btn-primary[b-bugbk8296h] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.image-editor-dialog .btn-secondary[b-bugbk8296h] {
    background: var(--rz-base-200);
    color: var(--rz-text-color);
    border: 1px solid var(--rz-border-color);
}

.image-editor-dialog .btn-secondary:hover:not(:disabled)[b-bugbk8296h] {
    background: var(--rz-base-300);
}

.image-editor-dialog .btn-primary[b-bugbk8296h] {
    background: var(--rz-primary);
    color: white;
}

.image-editor-dialog .btn-primary:hover:not(:disabled)[b-bugbk8296h] {
    background: var(--rz-primary-dark);
}

.image-editor-dialog .btn-secondary:disabled[b-bugbk8296h],
.image-editor-dialog .btn-primary:disabled[b-bugbk8296h] {
    opacity: 0.5;
    cursor: not-allowed;
}

.image-editor-dialog .btn-secondary .material-symbols-outlined[b-bugbk8296h],
.image-editor-dialog .btn-primary .material-symbols-outlined[b-bugbk8296h] {
    font-size: 16px;
}

@media (max-width: 768px) {
    .image-editor-dialog .editor-body[b-bugbk8296h] {
        flex-direction: column;
    }

    .image-editor-dialog .tools-section[b-bugbk8296h] {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--rz-border-color);
        max-height: 250px;
    }
}
/* /Components/Pages/Chat/MediaGallery.razor.rz.scp.css */
/* Estilos propios de MediaGallery — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/chat/media-gallery.css. Todo estaba ya scoped bajo
   .media-gallery-panel, root plano de MediaGallery.razor; tabs, grid, items,
   overlays, imágenes y vídeos son HTML propio → b-{hash} directo. Las únicas
   excepciones llevan ::deep: los `.rzi` (RadzenIcon dentro de media-delete-btn,
   play-indicator y empty-state), porque a lo que pinta un componente Razor no
   le llega el hash — se anclan en su contenedor HTML propio.
   @keyframes gallery-pulse viaja tal cual.
   ───────────────────────────────────────────────────────────────────────────── */

.media-gallery-panel[b-x6q9530als] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--rz-base-background-color);
}

.media-gallery-panel .gallery-tabs[b-x6q9530als] {
    display: flex;
    border-bottom: 1px solid var(--rz-border-color);
    padding: 0 0.5rem;
}

.media-gallery-panel .gallery-tab[b-x6q9530als] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    transition: all 0.2s;
}

.media-gallery-panel .gallery-tab:hover[b-x6q9530als] {
    color: var(--rz-text-color);
}

.media-gallery-panel .gallery-tab.active[b-x6q9530als] {
    color: var(--rz-primary);
    border-bottom-color: var(--rz-primary);
}

.media-gallery-panel .gallery-tab .badge[b-x6q9530als] {
    background: var(--rz-primary);
    color: white;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
}

.media-gallery-panel .gallery-content[b-x6q9530als] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.media-gallery-panel .time-group[b-x6q9530als] {
    margin-bottom: 2rem;
}

.media-gallery-panel .time-group-title[b-x6q9530als] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rz-base-200);
}

.media-gallery-panel .media-grid[b-x6q9530als] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.media-gallery-panel .media-item[b-x6q9530als] {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    background: var(--rz-base-200);
}

.media-gallery-panel .media-delete-btn[b-x6q9530als] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s, background-color 0.2s;
}

.media-gallery-panel .media-item:hover .media-delete-btn[b-x6q9530als] {
    opacity: 1;
}

.media-gallery-panel .media-delete-btn:hover[b-x6q9530als] {
    background: var(--rz-danger);
}

.media-gallery-panel .media-delete-btn[b-x6q9530als]  .rzi {
    font-size: 1rem;
}

.media-gallery-panel .media-item.loading[b-x6q9530als] {
    pointer-events: none;
}

.media-gallery-panel .item-placeholder[b-x6q9530als] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--rz-base-300);
    border-radius: 8px;
}

.media-gallery-panel .item-placeholder.pulse[b-x6q9530als] {
    animation: gallery-pulse-b-x6q9530als 1.5s ease-in-out infinite;
}

@keyframes gallery-pulse-b-x6q9530als {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.media-gallery-panel .media-item.loaded img[b-x6q9530als],
.media-gallery-panel .media-item.loaded video[b-x6q9530als] {
    opacity: 1 !important;
    position: relative !important;
    transition: opacity 0.3s ease;
}

.media-gallery-panel .media-item:hover[b-x6q9530als] {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.media-gallery-panel .media-item img[b-x6q9530als],
.media-gallery-panel .media-item video[b-x6q9530als] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-gallery-panel .media-overlay[b-x6q9530als] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 2rem 0.5rem 0.5rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.media-gallery-panel .media-item:hover .media-overlay[b-x6q9530als] {
    opacity: 1;
}

.media-gallery-panel .prompt-preview[b-x6q9530als] {
    display: block;
    color: white;
    font-size: 0.75rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-gallery-panel .generated-date[b-x6q9530als],
.media-gallery-panel .video-meta[b-x6q9530als] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
    margin-top: 0.25rem;
}

.media-gallery-panel .video-meta[b-x6q9530als] {
    display: flex;
    justify-content: space-between;
}

.media-gallery-panel .play-indicator[b-x6q9530als] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.media-gallery-panel .play-indicator[b-x6q9530als]  .rzi {
    color: white;
    font-size: 28px;
}

.media-gallery-panel .empty-state[b-x6q9530als] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--rz-text-secondary-color);
}

.media-gallery-panel .empty-state[b-x6q9530als]  .rzi {
    font-size: 48px;
    margin-bottom: 1rem;
    opacity: 0.5;
}
/* /Components/Pages/Chat/MediaLightbox.razor.rz.scp.css */
/* Estilos propios de MediaLightbox — CSS isolation.
   Vienen de wwwroot/css/chat/media-lightbox.css. Sus 10 clases van sobre HTML
   de este marcado y ningun otro componente las usa (comprobado antes de
   mover). El prefijo `lightbox-` ya intentaba a mano lo que ahora garantiza el
   compilador.
   ───────────────────────────────────────────────────────────────────────── */

.lightbox-overlay[b-plrewhe4vp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-plrewhe4vp 0.2s ease;
}

@keyframes fadeIn-b-plrewhe4vp {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox-container[b-plrewhe4vp] {
    display: flex;
    flex-direction: column;
    max-width: 95vw;
    max-height: 95vh;
    background: var(--rz-base-900);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close[b-plrewhe4vp] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10001;
}

.lightbox-close:hover[b-plrewhe4vp] {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-content[b-plrewhe4vp] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 300px;
    position: relative;
}

.lightbox-loading[b-plrewhe4vp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: white;
}

.lightbox-loading .loading-text[b-plrewhe4vp] {
    font-size: 0.875rem;
    opacity: 0.8;
}

.lightbox-content img[b-plrewhe4vp] {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.lightbox-content video[b-plrewhe4vp] {
    max-width: 100%;
    max-height: 70vh;
    transition: opacity 0.3s ease;
}

.lightbox-info[b-plrewhe4vp] {
    padding: 1.5rem;
    background: var(--rz-base-800);
    border-top: 1px solid var(--rz-base-700);
}

.lightbox-prompt[b-plrewhe4vp] {
    color: white;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.lightbox-meta[b-plrewhe4vp] {
    color: var(--rz-text-secondary-color);
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.lightbox-meta span[b-plrewhe4vp] {
    margin-right: 0.25rem;
}

.lightbox-actions[b-plrewhe4vp] {
    display: flex;
    gap: 0.5rem;
}
/* /Components/Pages/Chat/Parts/ApprovalCard.razor.rz.scp.css */
/* Estilos propios de ApprovalCard — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/chat/approval-card.css. El root .approval-card (y su
   variante .is-decided) va como clase sobre un <RadzenCard>, y __icon /
   __stamp-icon van sobre <RadzenIcon>: a lo que pinta un componente Razor no
   le llega el b-{hash}, así que esas reglas salen por ::deep ancladas en el
   <div class="approval-card-host"> añadido en el .razor como ancla del ámbito
   (patrón LinkToHoldedDialog). Los divs internos (__header, __title-block,
   __args, __actions, __stamp…) sí son HTML propio del .razor y migran directos.
   Los RadzenButton de __actions no se estilizan hoy; si algún día se estilizan,
   también irían por ::deep desde el host.

   OJO homónimo: .approval-card también nombra la tarjeta de la página pública
   /task-approval/{token} (TaskApprovalView) — cada componente se lleva la
   definición de SU hoja; hasta hoy en el chat ganaba la de task-approval-view
   (fondo blanco, padding 2rem): recuperar esta definición es el cambio visual
   esperado de la migración.
   ───────────────────────────────────────────────────────────────────────────── */

/* ------------------------------------------------------------------
   Human-in-the-loop tool approval card — rendered in place of an
   assistant message body when the model attempts a sensitive write
   tool gated behind approval (<<APPROVAL_REQUEST>> marker). Visual
   style follows the clarification card so both blend into the chat
   chrome; the accent colour is a security red to signal the gate.
   ------------------------------------------------------------------ */

.approval-card-host[b-mlsx52bggl]  .approval-card {
    margin: 8px 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--rz-base-50, #fafafa);
    border: 1px solid var(--rz-danger-lighter, #fecaca);
}

.approval-card__header[b-mlsx52bggl] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.approval-card-host[b-mlsx52bggl]  .approval-card__icon {
    font-size: 22px !important;
    color: var(--rz-danger, #dc2626);
    flex-shrink: 0;
    margin-top: 2px;
}

.approval-card__title-block[b-mlsx52bggl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.approval-card__title[b-mlsx52bggl] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--rz-text-color, #0f172a);
    line-height: 1.3;
}

.approval-card__subtitle[b-mlsx52bggl] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color, #64748b);
    line-height: 1.35;
}

.approval-card__args[b-mlsx52bggl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid var(--rz-base-200, #e5e7eb);
}

.approval-card__args-label[b-mlsx52bggl] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color, #94a3b8);
}

.approval-card__args-value[b-mlsx52bggl] {
    font-size: 0.82rem;
    color: var(--rz-text-color, #0f172a);
    line-height: 1.35;
    word-break: break-word;
}

.approval-card__actions[b-mlsx52bggl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ------------------------------------------------------------------
   Decided (read-only) state — appears after the user approves or
   rejects, and on history reload. The buttons are replaced by a stamp
   that records the decision as an audit cue.
   ------------------------------------------------------------------ */

.approval-card-host[b-mlsx52bggl]  .approval-card.is-decided {
    background: var(--rz-base-100, #f3f4f6);
    border-color: var(--rz-base-200, #e5e7eb);
}

.approval-card__stamp[b-mlsx52bggl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    align-self: flex-start;
    width: fit-content;
}

.approval-card__stamp.is-approved[b-mlsx52bggl] {
    background: var(--rz-success-lighter, #dcfce7);
    color: var(--rz-success-dark, #166534);
}

.approval-card__stamp.is-rejected[b-mlsx52bggl] {
    background: var(--rz-danger-lighter, #fee2e2);
    color: var(--rz-danger-dark, #991b1b);
}

.approval-card-host[b-mlsx52bggl]  .approval-card__stamp-icon {
    font-size: 16px !important;
}
/* /Components/Pages/Chat/Parts/ArtifactCard.razor.rz.scp.css */
/* CRÍTICO — crear ArtifactCard.razor.css: las tarjetas de artefactos IA del chat estan sin estilo.
 * Artifact card — downloadable AI-generated assets (PPTX, DOCX, PDF, code).
 * The download button is bound by wwwroot/js/document/documentInterops.js via
 * MutationObserver — keep the .ai-artifact-container class name in sync.
 */

.ai-artifact-container[b-9u2fbu2ghn] {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.ai-artifact-card[b-9u2fbu2ghn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--rz-base-300, #e0e0e0);
    border-radius: 10px;
    background: var(--rz-base-50, #ffffff);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.ai-artifact-card:hover[b-9u2fbu2ghn] {
    border-color: var(--rz-primary, #1976d2);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.ai-artifact-icon[b-9u2fbu2ghn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 8px;
    background: var(--rz-primary-lighter, #e3f2fd);
    color: var(--rz-primary, #1976d2);
}

.ai-artifact-icon.rzi[b-9u2fbu2ghn] {
    font-size: 22px;
}

.ai-artifact-info[b-9u2fbu2ghn] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ai-artifact-title[b-9u2fbu2ghn] {
    font-weight: 600;
    color: var(--rz-text-color, #212121);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-artifact-meta[b-9u2fbu2ghn] {
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color, #6b6b6b);
    text-transform: lowercase;
}

.ai-artifact-download[b-9u2fbu2ghn],
.ai-artifact-preview-btn[b-9u2fbu2ghn] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--rz-primary, #1976d2);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.ai-artifact-download:hover:not(:disabled)[b-9u2fbu2ghn],
.ai-artifact-preview-btn:hover:not(:disabled)[b-9u2fbu2ghn] {
    background: var(--rz-primary-lighter, #e3f2fd);
    border-color: var(--rz-primary, #1976d2);
}

.ai-artifact-download:disabled[b-9u2fbu2ghn],
.ai-artifact-preview-btn:disabled[b-9u2fbu2ghn] {
    opacity: 0.55;
    cursor: progress;
}

.ai-artifact-download .rzi[b-9u2fbu2ghn],
.ai-artifact-preview-btn .rzi[b-9u2fbu2ghn] {
    font-size: 20px;
}

[data-bs-theme="dark"] .ai-artifact-card[b-9u2fbu2ghn] {
    background: var(--rz-base-800, #2a2d31);
    border-color: var(--rz-base-700, #3a3d41);
}

[data-bs-theme="dark"] .ai-artifact-card:hover[b-9u2fbu2ghn] {
    border-color: var(--rz-primary-light, #82b1ff);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .ai-artifact-icon[b-9u2fbu2ghn] {
    background: rgba(130, 177, 255, 0.18);
    color: var(--rz-primary-light, #82b1ff);
}

[data-bs-theme="dark"] .ai-artifact-title[b-9u2fbu2ghn] {
    color: var(--rz-text-color, #e6e6e6);
}

[data-bs-theme="dark"] .ai-artifact-meta[b-9u2fbu2ghn] {
    color: var(--rz-text-tertiary-color, #a8a8a8);
}

[data-bs-theme="dark"] .ai-artifact-download[b-9u2fbu2ghn],
[data-bs-theme="dark"] .ai-artifact-preview-btn[b-9u2fbu2ghn] {
    color: var(--rz-primary-light, #82b1ff);
}

[data-bs-theme="dark"] .ai-artifact-download:hover:not(:disabled)[b-9u2fbu2ghn],
[data-bs-theme="dark"] .ai-artifact-preview-btn:hover:not(:disabled)[b-9u2fbu2ghn] {
    background: rgba(130, 177, 255, 0.18);
    border-color: var(--rz-primary-light, #82b1ff);
}

@media (max-width: 600px) {
    .ai-artifact-title[b-9u2fbu2ghn] {
        font-size: 0.9375rem;
    }
    .ai-artifact-meta[b-9u2fbu2ghn] {
        font-size: 0.75rem;
    }
}

.ai-artifact-icon-xlsx[b-9u2fbu2ghn] {
    background: rgba(100, 116, 139, 0.12) !important;
    color: #475569 !important;
}
.ai-artifact-icon-dashboard[b-9u2fbu2ghn] {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #6366f1 !important;
}

[data-bs-theme="dark"] .ai-artifact-icon-xlsx[b-9u2fbu2ghn] {
    background: rgba(148, 163, 184, 0.18) !important;
    color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .ai-artifact-icon-dashboard[b-9u2fbu2ghn] {
    background: rgba(99, 102, 241, 0.18) !important;
    color: #818cf8 !important;
}
/* /Components/Pages/Chat/Parts/ArtifactPreview.razor.rz.scp.css */
/* Estilos propios de ArtifactPreview — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/chat/artifact-card.css (la parte del pane; la familia
   ai-artifact-* es de ArtifactCard.razor y vive en su .razor.css, y las reglas
   .fullscreen-chat-container.with-artifact-preview son marcado de FloatingChat
   y viven en FloatingChat.razor.css).

   Todo artifact-preview-pane* es HTML plano de este .razor → b-{hash} directo,
   incluidos los <span class="rzi"> (elementos planos, no RadzenIcon) y los
   iframes. PERO las familias artifact-xlsx-* y artifact-pptx-preview__* (y
   .rzi-spin/.artifact-preview-pane__xlsx-host/__xlsx-loading) las PINTA
   window.aiDocument (renderSpreadsheetPreviewInto / renderPptxPreviewInto) en
   tiempo de ejecución dentro del cuerpo del pane: ese DOM no le consta al
   compilador y sin ::deep se quedaría sin estilos — van ancladas en
   .artifact-preview-pane__body (div propio siempre presente; el host pptx
   cuelga de él). El path xlsx primario usa iframe srcdoc (el CSS de página
   nunca entra ahí); estas reglas sirven al fallback SheetJS.

   Los prefijos [data-bs-theme=dark] funcionan bajo isolation (el atributo vive
   en <html>, ancestro real). @keyframes artifact-spin viaja tal cual.
   ───────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────
 * Artifact preview pane — rendered by Components/Pages/Chat/Parts/ArtifactPreview.razor
 * ────────────────────────────────────────────────────────────────────── */
.artifact-preview-pane[b-2dpw0ibdct] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--rz-base-300, #e0e0e0);
    background: var(--rz-base-50, #ffffff);
}

.artifact-preview-pane__header[b-2dpw0ibdct] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--rz-base-300, #e0e0e0);
}

.artifact-preview-pane__icon[b-2dpw0ibdct] {
    color: var(--rz-primary, #1976d2);
    font-size: 22px;
}

.artifact-preview-pane__title[b-2dpw0ibdct] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.artifact-preview-pane__type-badge[b-2dpw0ibdct] {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--rz-primary-lighter, #e3f2fd);
    color: var(--rz-primary, #1976d2);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.artifact-preview-pane__actions[b-2dpw0ibdct] {
    display: flex;
    gap: 0.25rem;
}

.artifact-preview-pane__action[b-2dpw0ibdct] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--rz-text-tertiary-color, #6b6b6b);
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

.artifact-preview-pane__action:hover[b-2dpw0ibdct] {
    background: var(--rz-base-100, #f4f4f5);
    color: var(--rz-text-color, #212121);
}

.artifact-preview-pane__body[b-2dpw0ibdct] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.75rem;
}

.artifact-preview-pane__iframe[b-2dpw0ibdct] {
    width: 100%;
    height: 100%;
    min-height: 480px;
    border: 0;
    border-radius: 8px;
    background: #f8f8f8;
}

/* The XLSX / DOCX inline iframes own the entire preview body — they ship
   their own page-style chrome (tab bar / page borders / footer) so the
   wrapping pane stops adding extra padding around them. Mirrors the
   Reporbia .xlsx-preview-body / .docx-preview-body rules. */
.artifact-preview-pane__body:has(.artifact-preview-pane__iframe--xlsx)[b-2dpw0ibdct],
.artifact-preview-pane__body:has(.artifact-preview-pane__iframe--docx)[b-2dpw0ibdct] {
    padding: 0;
}

.artifact-preview-pane__iframe--xlsx[b-2dpw0ibdct] {
    border-radius: 0;
    background: #ffffff;
}

.artifact-preview-pane__iframe--docx[b-2dpw0ibdct] {
    border-radius: 0;
    background: #e8e8e8;
}

.artifact-preview-pane__placeholder[b-2dpw0ibdct] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
    color: var(--rz-text-tertiary-color, #6b6b6b);
}

.artifact-preview-pane__cta[b-2dpw0ibdct] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    background: var(--rz-primary, #1976d2);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}

.artifact-preview-pane__cta:hover[b-2dpw0ibdct] {
    filter: brightness(1.05);
}

.artifact-preview-pane__pptx-host[b-2dpw0ibdct] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* XLSX SheetJS preview — the JS side paints a tab bar + scrollable tables
   inside this host. The host itself is a plain flex column so each sheet
   stretches to the available height. */
.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-preview-pane__xlsx-host {
    display: flex;
    flex-direction: column;
    min-height: 320px;
    gap: 0.5rem;
    height: 100%;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-preview-pane__xlsx-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--rz-text-tertiary-color, #6b6b6b);
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .rzi-spin {
    animation: artifact-spin-b-2dpw0ibdct 1.1s linear infinite;
    display: inline-block;
}

@keyframes artifact-spin-b-2dpw0ibdct {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: #217346;
    color: #fff;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 0.8125rem;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-tabs {
    display: flex;
    gap: 0;
    padding: 0 0.5rem;
    background: var(--rz-base-100, #f3f3f3);
    border-bottom: 1px solid var(--rz-base-300, #d4d4d4);
    overflow-x: auto;
    flex-shrink: 0;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-tab {
    padding: 0.4rem 0.85rem;
    border: 0;
    background: transparent;
    color: var(--rz-text-secondary-color, #555);
    font-size: 0.8125rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-tab:hover {
    background: var(--rz-base-200, #e8e8e8);
    color: var(--rz-text-color, #212121);
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-tab.is-active {
    color: #217346;
    background: var(--rz-base-50, #fff);
    border-bottom-color: #217346;
    font-weight: 600;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-grid {
    flex: 1 1 auto;
    overflow: auto;
    background: #fff;
    border-radius: 0 0 8px 8px;
    border: 1px solid var(--rz-base-200, #e0e0e0);
    border-top: 0;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-sheet {
    display: none;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-sheet.is-active {
    display: block;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-sheet table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    color: #1e1e1e;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-sheet th {
    background: #e2efda;
    color: #1e1e1e;
    padding: 0.4rem 0.65rem;
    text-align: left;
    font-weight: 600;
    border: 1px solid #c6e0b4;
    position: sticky;
    top: 0;
    z-index: 1;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-sheet td {
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--rz-base-200, #e0e0e0);
    vertical-align: top;
    white-space: nowrap;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-sheet tr:hover td {
    background: var(--rz-base-100, #f5f5f5);
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-sheet td.is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-sheet td.is-neg {
    color: #c0392b;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-error {
    padding: 1rem;
    border-radius: 8px;
    background: #fff4f4;
    color: #b3261e;
    font-size: 0.875rem;
}

[data-bs-theme="dark"] .artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-tabs {
    background: var(--rz-base-800, #2a2d31);
    border-bottom-color: var(--rz-base-700, #3a3d41);
}

[data-bs-theme="dark"] .artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-tab {
    color: var(--rz-text-secondary-color, #b8b8b8);
}

[data-bs-theme="dark"] .artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-tab:hover {
    background: var(--rz-base-700, #3a3d41);
}

[data-bs-theme="dark"] .artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-tab.is-active {
    background: var(--rz-base-900, #1f2125);
    color: #4ade80;
    border-bottom-color: #4ade80;
}

[data-bs-theme="dark"] .artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-grid {
    background: var(--rz-base-900, #1f2125);
    border-color: var(--rz-base-700, #3a3d41);
}

[data-bs-theme="dark"] .artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-sheet table {
    color: var(--rz-text-color, #e6e6e6);
}

[data-bs-theme="dark"] .artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-sheet th {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.35);
}

[data-bs-theme="dark"] .artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-sheet td {
    border-color: var(--rz-base-700, #3a3d41);
}

[data-bs-theme="dark"] .artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-xlsx-sheet tr:hover td {
    background: var(--rz-base-800, #2a2d31);
}

/* PPTX preview slides — painted by aiDocument.renderPptxPreviewInto. The
   16:9 aspect ratio + content padding mirror the PPTX renderer at runtime
   so the user sees the same general layout before downloading. */
.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-pptx-preview__slide {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--rz-base-300, #e0e0e0);
    border-radius: 8px;
    padding: 18px 24px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-pptx-preview__slide--title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-pptx-preview__slide-title {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-pptx-preview__slide-heading {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-pptx-preview__slide-content {
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 0.4rem;
    white-space: pre-wrap;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-pptx-preview__bullets {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-pptx-preview__bullets li {
    margin-bottom: 0.25rem;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-pptx-preview__bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-pptx-preview__num {
    position: absolute;
    bottom: 6px;
    right: 10px;
    font-size: 0.7rem;
    color: var(--rz-text-tertiary-color, #9e9e9e);
}

.artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-pptx-preview__error {
    padding: 0.75rem;
    border-radius: 8px;
    background: #fff4f4;
    color: #b3261e;
    font-size: 0.875rem;
}

[data-bs-theme="dark"] .artifact-preview-pane[b-2dpw0ibdct] {
    background: var(--rz-base-900, #1f2125);
    border-left-color: var(--rz-base-700, #3a3d41);
}

[data-bs-theme="dark"] .artifact-preview-pane__header[b-2dpw0ibdct] {
    border-bottom-color: var(--rz-base-700, #3a3d41);
}

[data-bs-theme="dark"] .artifact-preview-pane__action:hover[b-2dpw0ibdct] {
    background: var(--rz-base-800, #2a2d31);
    color: var(--rz-text-color, #e6e6e6);
}

[data-bs-theme="dark"] .artifact-preview-pane__body[b-2dpw0ibdct]  .artifact-pptx-preview__slide {
    border-color: var(--rz-base-700, #3a3d41);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
/* /Components/Pages/Chat/Parts/ClarificationCard.razor.rz.scp.css */
/* Estilos propios de ClarificationCard — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/chat/clarification-card.css. El root
   .clarification-card (y .is-submitted) va como clase sobre un <RadzenCard>,
   y los iconos (__icon, __option-icon, __stamp-icon,
   __free-text-readonly-icon) sobre <RadzenIcon>, más __free-text-input sobre
   <RadzenTextBox>: a lo que pinta un componente Razor no le llega el
   b-{hash}, así que esas reglas salen por ::deep ancladas en el
   <div class="clarification-card-host"> añadido en el .razor (patrón
   LinkToHoldedDialog). El resto (header, options, botones <button> planos,
   free-text-readonly, stamp) es HTML propio del .razor y migra directo,
   incluida su cita dentro del @media 480px.

   Lo que NO está aquí y no es un olvido: .clarification-card-pending
   (+__spinner + @keyframes) lo renderiza FloatingChat.razor, no esta tarjeta
   — vive en FloatingChat.razor.css.
   ───────────────────────────────────────────────────────────────────────────── */

/* ------------------------------------------------------------------
   Source Disambiguation card — rendered in place of an assistant
   message body when the model emits a <<CLARIFICATION_CARD>> marker.
   Visual style follows the existing Radzen-based chat chrome
   (.message-content / .ambient-scope-chip) so it blends naturally.
   ------------------------------------------------------------------ */

.clarification-card-host[b-fzzxyzwgif]  .clarification-card {
    margin: 8px 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--rz-base-50, #fafafa);
    border: 1px solid var(--rz-base-200, #e5e7eb);
}

.clarification-card__header[b-fzzxyzwgif] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.clarification-card-host[b-fzzxyzwgif]  .clarification-card__icon {
    font-size: 22px !important;
    color: var(--rz-primary, #1565c0);
    flex-shrink: 0;
    margin-top: 2px;
}

.clarification-card__title-block[b-fzzxyzwgif] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.clarification-card__title[b-fzzxyzwgif] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--rz-text-color, #0f172a);
    line-height: 1.3;
}

.clarification-card__subtitle[b-fzzxyzwgif] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color, #64748b);
    line-height: 1.35;
}

.clarification-card__options[b-fzzxyzwgif] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

@media (max-width: 480px) {
    .clarification-card__options[b-fzzxyzwgif] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.clarification-card__option[b-fzzxyzwgif] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--rz-base-200, #e5e7eb);
    background: #ffffff;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
    font: inherit;
    min-height: 56px;
}

.clarification-card__option:hover:not(:disabled)[b-fzzxyzwgif] {
    background: var(--rz-primary-lighter, #e3f2fd);
    border-color: var(--rz-primary, #1565c0);
}

.clarification-card__option:active:not(:disabled)[b-fzzxyzwgif] {
    transform: scale(0.98);
}

.clarification-card__option:disabled[b-fzzxyzwgif] {
    cursor: not-allowed;
    opacity: 0.55;
}

.clarification-card-host[b-fzzxyzwgif]  .clarification-card__option-icon {
    font-size: 20px !important;
    color: var(--rz-primary, #1565c0);
    flex-shrink: 0;
    margin-top: 2px;
}

.clarification-card__option-body[b-fzzxyzwgif] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.clarification-card__option-label[b-fzzxyzwgif] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--rz-text-color, #0f172a);
    line-height: 1.25;
}

.clarification-card__option-hint[b-fzzxyzwgif] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color, #64748b);
    line-height: 1.3;
}

.clarification-card__free-text[b-fzzxyzwgif] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.clarification-card-host[b-fzzxyzwgif]  .clarification-card__free-text-input {
    flex: 1;
    min-width: 0;
}

/* ------------------------------------------------------------------
   Submitted (read-only) state — appears on history reload after the
   user has clicked an option or sent free text. Buttons stay disabled,
   the chosen option highlights, and a small neutral stamp confirms
   the selection so the LLM is not tempted to re-search by accident.
   ------------------------------------------------------------------ */

.clarification-card-host[b-fzzxyzwgif]  .clarification-card.is-submitted {
    background: var(--rz-base-100, #f3f4f6);
}

.clarification-card__stamp[b-fzzxyzwgif] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--rz-base-200, #e5e7eb);
    color: var(--rz-text-secondary-color, #475569);
    font-size: 0.75rem;
    font-weight: 600;
    align-self: flex-start;
    width: fit-content;
}

.clarification-card-host[b-fzzxyzwgif]  .clarification-card__stamp-icon {
    font-size: 16px !important;
}

.clarification-card__option.is-selected[b-fzzxyzwgif] {
    border-color: var(--rz-base-400, #9ca3af);
    background: var(--rz-base-200, #e5e7eb);
}

.clarification-card__free-text-readonly[b-fzzxyzwgif] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px dashed var(--rz-base-300, #d1d5db);
    color: var(--rz-text-secondary-color, #64748b);
    font-size: 0.8rem;
    font-style: italic;
}

.clarification-card-host[b-fzzxyzwgif]  .clarification-card__free-text-readonly-icon {
    font-size: 16px !important;
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.7;
}

.clarification-card__free-text-readonly-text[b-fzzxyzwgif] {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
/* /Components/Pages/Chat/Parts/ScopeChip.razor.rz.scp.css */
/* Crear ScopeChip.razor.css — chip de ambito ambiental del chat.
   __icon (RadzenIcon) y __close (RadzenButton) no reciben el b-{hash}:
   salen por ::deep desde el div raiz propio .ambient-scope-chip. */
.ambient-scope-chip[b-jewzihroh9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    background: var(--rz-primary-lighter, rgba(95, 61, 196, 0.1));
    color: var(--rz-on-primary-lighter, var(--rz-primary));
    border-radius: 9999px;
    font-size: 0.8rem;
    line-height: 1.2;
    max-width: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ambient-scope-chip[b-jewzihroh9]  .ambient-scope-chip__icon {
    font-size: 0.95rem;
    opacity: 0.85;
}

.ambient-scope-chip__label[b-jewzihroh9] {
    display: inline-block;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.ambient-scope-chip__entity[b-jewzihroh9] {
    opacity: 0.7;
    font-size: 0.75rem;
}

.ambient-scope-chip[b-jewzihroh9]  .ambient-scope-chip__close {
    margin-left: 0.1rem;
}
/* /Components/Pages/Commercial/OfferEdit.razor.rz.scp.css */
/* Editor de oferta con página propia. Misma voz que la bandeja (of-*). */

.ofe-page[b-vy2cgzbzbt] {
    padding: 1rem 1.25rem 2rem;
    max-width: 1500px;
    margin: 0 auto;
}

.ofe-head[b-vy2cgzbzbt] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.ofe-head__title[b-vy2cgzbzbt] {
    flex: 1;
    min-width: 0;
}

.ofe-head__meta[b-vy2cgzbzbt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.ofe-head__actions[b-vy2cgzbzbt] {
    display: flex;
    gap: 0.5rem;
}

.ofe-chip[b-vy2cgzbzbt] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* «Sin proyecto»: informativo, no alarmante — es un estado legítimo. */
.ofe-chip--loose[b-vy2cgzbzbt] {
    background: var(--rz-base-200, #e5e7eb);
    color: var(--rz-text-secondary-color, #6b7280);
}

.ofe-chip--loose[b-vy2cgzbzbt]  .rzi {
    font-size: 0.9rem;
}

.ofe-body[b-vy2cgzbzbt] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .ofe-body[b-vy2cgzbzbt] {
        grid-template-columns: 1fr;
    }
}

.ofe-main[b-vy2cgzbzbt] {
    background: var(--rz-base-background-color, #fff);
    border: 1px solid var(--rz-base-300, #d1d5db);
    border-radius: 10px;
    padding: 1rem 1.1rem;
}

.ofe-side[b-vy2cgzbzbt] {
    background: var(--rz-base-background-color, #fff);
    border: 1px solid var(--rz-base-300, #d1d5db);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ofe-upload[b-vy2cgzbzbt] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--rz-base-300, #d1d5db);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
}

.ofe-fileinfo[b-vy2cgzbzbt] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color, #6b7280);
}

/* Rejilla auto-ajustable, mismo criterio que el editor incrustado de ajustes. */
.ofe-fields[b-vy2cgzbzbt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.ofe-field[b-vy2cgzbzbt] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ofe-muted[b-vy2cgzbzbt] {
    color: var(--rz-text-secondary-color, #6b7280);
    font-size: 0.85rem;
    margin: 0;
}

.ofe-lines[b-vy2cgzbzbt] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ofe-line[b-vy2cgzbzbt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--rz-base-200, #e5e7eb);
    border-radius: 8px;
}

.ofe-line__desc[b-vy2cgzbzbt] {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ofe-line__amount[b-vy2cgzbzbt] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color, #6b7280);
    white-space: nowrap;
}

.ofe-newline[b-vy2cgzbzbt] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--rz-base-300, #d1d5db);
}

.ofe-newline__row[b-vy2cgzbzbt] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.ofe-totals[b-vy2cgzbzbt] {
    border-top: 1px solid var(--rz-base-300, #d1d5db);
    padding-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
}

.ofe-totals > div[b-vy2cgzbzbt] {
    display: flex;
    justify-content: space-between;
}

.ofe-totals__grand[b-vy2cgzbzbt] {
    font-weight: 700;
    font-size: 0.95rem;
}
/* /Components/Pages/Commercial/OfferPreview.razor.rz.scp.css */
/* Vista previa de oferta. CSS aislado. */

.ofp-page[b-l2k085uk7h] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    max-width: 960px;
    margin: 0 auto;
}

.ofp-bar[b-l2k085uk7h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Marca visible de "esto es una previsualización": sin ella, un pantallazo de esta
   página es indistinguible de la vista real del cliente. */
.ofp-bar__tag[b-l2k085uk7h] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--rz-info-lighter);
    color: var(--rz-info-dark);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* La "hoja" del documento. Es un <div> propio en vez de un RadzenCard porque una clase
   sobre un componente Razor no recibe el hash de aislamiento y la regla no casaría. */
.ofp-sheet[b-l2k085uk7h] {
    padding: 2rem;
    background: var(--rz-base-background-color, #fff);
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius, 8px);
    box-shadow: var(--rz-shadow-1, 0 1px 2px rgba(0, 0, 0, 0.06));
}

.ofp-panel[b-l2k085uk7h] {
    padding: 1rem 1.25rem;
    background: var(--rz-base-background-color, #fff);
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius, 8px);
}

.ofp-panel h3[b-l2k085uk7h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 1.05rem;
}

.ofp-timeline[b-l2k085uk7h] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ofp-timeline li[b-l2k085uk7h] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.ofp-muted[b-l2k085uk7h] {
    color: var(--rz-text-tertiary-color);
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .ofp-page[b-l2k085uk7h] { padding: 0.5rem; }
    .ofp-sheet[b-l2k085uk7h] { padding: 1rem; }
    .ofp-panel[b-l2k085uk7h] { padding: 0.75rem; }
}
/* /Components/Pages/Commercial/OffersInbox.razor.rz.scp.css */
/* Bandeja de ofertas comerciales. CSS aislado: nada de esto sale de esta página. */

.of-inbox[b-hs42ljd9ho] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.of-head[b-hs42ljd9ho] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.of-head__title[b-hs42ljd9ho] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* ── Pastillas de señal ───────────────────────────────────────────────────── */

.of-signals[b-hs42ljd9ho] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.of-signal[b-hs42ljd9ho] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 999px;
    background: var(--rz-base-background-color, #fff);
    color: var(--rz-text-color);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.of-signal:hover:not(:disabled)[b-hs42ljd9ho] {
    border-color: var(--rz-primary);
}

.of-signal:disabled[b-hs42ljd9ho] {
    opacity: 0.45;
    cursor: default;
}

.of-signal.is-active[b-hs42ljd9ho] {
    border-color: var(--rz-primary);
    box-shadow: inset 0 0 0 1px var(--rz-primary);
    font-weight: 600;
}

.of-signal__count[b-hs42ljd9ho] {
    min-width: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--rz-base-200);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* El color va por señal, no por estado: es lo que hace que "se muere" se lea de
   un vistazo desde el otro lado de la mesa. */
.of-signal--expiringsoon .of-signal__count[b-hs42ljd9ho] { background: var(--rz-danger-lighter); color: var(--rz-danger-dark); }
.of-signal--viewed .of-signal__count[b-hs42ljd9ho] { background: var(--rz-warning-lighter); color: var(--rz-warning-dark); }
.of-signal--awaitingopen .of-signal__count[b-hs42ljd9ho] { background: var(--rz-info-lighter); color: var(--rz-info-dark); }

/* ── Filtros ──────────────────────────────────────────────────────────────── */

.of-filters[b-hs42ljd9ho] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ── Celdas ───────────────────────────────────────────────────────────────── */

.of-badge[b-hs42ljd9ho] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--rz-base-200);
    color: var(--rz-text-color);
    white-space: nowrap;
}

.of-badge[b-hs42ljd9ho]  .rz-icon,
.of-badge[b-hs42ljd9ho]  i {
    font-size: 1rem;
}

.of-badge--expiringsoon[b-hs42ljd9ho] { background: var(--rz-danger-lighter); color: var(--rz-danger-dark); }
.of-badge--viewed[b-hs42ljd9ho] { background: var(--rz-warning-lighter); color: var(--rz-warning-dark); }
.of-badge--awaitingopen[b-hs42ljd9ho] { background: var(--rz-info-lighter); color: var(--rz-info-dark); }
.of-badge--draft[b-hs42ljd9ho] { background: var(--rz-base-200); color: var(--rz-text-secondary-color); }
.of-badge--closed[b-hs42ljd9ho] { background: var(--rz-base-100); color: var(--rz-text-tertiary-color); }

.of-cell-main[b-hs42ljd9ho] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.of-cell-main__title[b-hs42ljd9ho] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.of-cell-main__sub[b-hs42ljd9ho] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.of-cell-main__sub.is-urgent[b-hs42ljd9ho] {
    color: var(--rz-danger);
    font-weight: 600;
}

/* Chip de destinatarios: compacto en la celda de actividad; el detalle (censo, revocar,
   quién lo vio) vive en su mini-diálogo. */
.of-recipients-chip[b-hs42ljd9ho] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    align-self: flex-start;
    margin-top: 0.15rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 9999px;
    background: var(--rz-base-50);
    color: var(--rz-text-secondary-color);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}

.of-recipients-chip:hover[b-hs42ljd9ho] {
    background: var(--rz-base-100);
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.of-muted[b-hs42ljd9ho] { color: var(--rz-text-tertiary-color); }

/* ── Vacío ────────────────────────────────────────────────────────────────── */

/* <div> propio, no RadzenCard: una clase sobre un componente Razor no recibe el hash
   de aislamiento. */
.of-empty[b-hs42ljd9ho] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    text-align: center;
    background: var(--rz-base-background-color, #fff);
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius, 8px);
}

.of-empty[b-hs42ljd9ho]  .rz-icon,
.of-empty[b-hs42ljd9ho]  i {
    font-size: 2.5rem;
    color: var(--rz-text-tertiary-color);
}

/* ── Móvil ────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .of-inbox[b-hs42ljd9ho] { padding: 0.5rem; }

    /* La tabla es ancha por naturaleza: se le deja su propio scroll horizontal en
       vez de dejar que empuje el ancho del documento y desplace la cabecera. */
    .of-grid[b-hs42ljd9ho] {
        overflow-x: auto;
    }
}

/* Botones de cabecera: alta + refrescar. */
.of-head__actions[b-hs42ljd9ho] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* «Sin proyecto»: informativo, no alarmante — la oferta suelta es un estado legítimo. */
.of-loose[b-hs42ljd9ho] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--rz-text-secondary-color, #6b7280);
}

.of-loose[b-hs42ljd9ho]  .rzi {
    font-size: 0.85rem;
}
/* /Components/Pages/Customers/CustomerDetailDialog.razor.rz.scp.css */
/* Estilos propios de CustomerDetailDialog — CSS isolation.
   Vienen de wwwroot/css/commerce/customer-detail-dialog.css, mas el bloque
   `empty-state` de wwwroot/css/commerce/order-detail-dialog.css: este dialogo
   lo usa en 3 <div> propios y hasta hoy lo pintaba la definicion ganadora de
   esa hoja ajena (su hoja propia no lo definia); se duplica aqui para
   conservar el render actual (regla 12 — duplicar bajo isolation es correcto).

   Sin `::deep` ni envoltorio: todas las clases caen sobre HTML escrito en este
   marcado (divs/spans/p), que si recibe el `b-{hash}`. OJO homonimos: la base
   de `.detail-value` (sin .editable) la pinta hoy ticket-detail-dialog.css
   (cluster servicedesk) — aqui solo vive el compuesto `.editable`. Y
   section-header/section-title recuperan SU definicion propia (hasta hoy
   ganaba order-detail-dialog.css): cambio esperado por regla 11.
   ───────────────────────────────────────────────────────────────────────────── */

/* Link sections */
.link-header[b-d9cqfw1npp] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}
.link-title[b-d9cqfw1npp] { font-size: 0.75rem; font-weight: 600; }
.link-status[b-d9cqfw1npp] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
}
.link-status.linked[b-d9cqfw1npp] { color: var(--rz-success); }
.sync-date[b-d9cqfw1npp] { font-size: 0.6rem; color: var(--rz-text-tertiary-color); margin-left: 0.25rem; }
.link-empty[b-d9cqfw1npp] { font-size: 0.7rem; color: var(--rz-text-tertiary-color); margin: 0; }

/* Arrow details */
.arrow-details[b-d9cqfw1npp] {
    margin-top: 0.5rem;
    background: white;
    border-radius: 4px;
    padding: 0.5rem;
    border: 1px solid #DBEAFE;
}
.arrow-detail-row[b-d9cqfw1npp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--rz-base-200);
}
.arrow-detail-row:last-child[b-d9cqfw1npp] { border-bottom: none; }
.detail-value.editable[b-d9cqfw1npp] { cursor: pointer; color: var(--rz-primary); }
.detail-value.editable:hover[b-d9cqfw1npp] { text-decoration: underline; }

/* Arrow results */
.filter-count[b-d9cqfw1npp] { font-size: 0.65rem; color: var(--rz-text-tertiary-color); margin: 0.75rem 0 0.5rem; }

/* Link sections layout */
.link-section[b-d9cqfw1npp] {
    background: var(--rz-base-100);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.link-section:last-child[b-d9cqfw1npp] { margin-bottom: 0; }

/* Users section */
.users-section[b-d9cqfw1npp] { padding: 0.5rem; }
.section-header[b-d9cqfw1npp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.section-title[b-d9cqfw1npp] { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: var(--rz-text-tertiary-color); }
.users-list[b-d9cqfw1npp] { display: flex; flex-direction: column; gap: 0.375rem; }

/* Empty state — duplicado de commerce/order-detail-dialog.css (ver cabecera) */
.empty-state[b-d9cqfw1npp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--rz-text-tertiary-color);
    font-size: 0.8rem;
    background: var(--rz-base-50);
    border-radius: 6px;
    border: 1px dashed var(--rz-base-300);
}
/* /Components/Pages/Customers/CustomerList.razor.rz.scp.css */
/* Estilos propios de CustomerList (/customers) — CSS isolation.
   Vienen de wwwroot/css/commerce/customer-list.css.

   `::deep` solo para `stat-card` (cae sobre <RadzenCard>, componente que no
   recibe el `b-{hash}`) y para `.customers-grid .rz-data-row` (la clase va en
   el <RadzenDataGrid> y las filas son DOM que genera Radzen en runtime). La
   pagina abre con <RadzenRow>, sin ancla HTML propia, asi que se envuelven la
   fila de estadisticas y el grid en el <div class="customers-page-host"> nuevo
   (patron LinkToHoldedDialog). El resto — stat-icon, customer-avatar,
   status-badge/active/lead/inactive (span propio, clase calculada en C# pero
   el elemento esta escrito aqui) y link-badge/holded/arrow/none (spans propios
   en templates del grid) — son reglas directas: el compilador SI marca el HTML
   escrito en el .razor aunque viva dentro de un RenderFragment.

   OJO homonimo: hasta hoy los badges de estado los pintaba la definicion de
   order-detail-dialog.css (ganaba por orden de carga: badge 3px, 0.55rem); al
   aislar, esta pagina recupera SU pill original (9999px, 0.75rem, inline-flex)
   — cambio visible esperado (regla 11).
   ───────────────────────────────────────────────────────────────────────────── */

.customers-page-host[b-u95e46gsqi]  .stat-card {
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.stat-icon[b-u95e46gsqi] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.customer-avatar[b-u95e46gsqi] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: white;
    text-transform: uppercase;
}

.customers-page-host[b-u95e46gsqi]  .customers-grid .rz-data-row {
    cursor: pointer;
}

.customers-page-host[b-u95e46gsqi]  .customers-grid .rz-data-row:hover {
    background: var(--rz-base-200) !important;
}

.status-badge[b-u95e46gsqi] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-active[b-u95e46gsqi] {
    background: var(--rz-success-lighter);
    color: var(--rz-success);
}

.status-lead[b-u95e46gsqi] {
    background: var(--rz-info-lighter);
    color: var(--rz-info);
}

.status-inactive[b-u95e46gsqi] {
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
}

.link-badge[b-u95e46gsqi] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.link-holded[b-u95e46gsqi] {
    background: var(--rz-warning-lighter);
    color: var(--rz-warning);
}

.link-arrow[b-u95e46gsqi] {
    background: var(--rz-info-lighter);
    color: var(--rz-info);
}

.link-none[b-u95e46gsqi] {
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Estilos propios de Dashboard (home real, /) — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/pages/dashboard.css. TODAS las reglas viven bajo
   .dh-panel, div raíz plano de Dashboard.razor, y el cuerpo del panel es HTML
   artesanal escrito en el propio .razor (sin subcomponentes Radzen) → casi
   todo migra directo con su b-{hash}. [data-bs-theme="dark"] .dh-panel
   funciona bajo isolation (el atributo vive en <html>, ancestro real).

   Excepciones con ::deep (marcado de runtime que el compilador no ve):
   - `.dh-panel ::deep *` (box-sizing): debe alcanzar también el contenido
     inyectado en runtime, no solo los elementos con hash.
   - El resumen IA llega como MarkupString (_aiSummaryHtml) dentro de .ai-body:
     sus descendientes p/ul/strong/.hl van con ::deep desde .ai-body.
   - Las metas con MarkupString (item.MetaHtml): b/.dim dentro de .task-meta y
     .attn-meta van con ::deep desde su contenedor; el `.dh-panel ::deep .dim`
     general cubre cualquier .dim de runtime.
   @keyframes dh-shimmer y los @media 1280/720 viajan tal cual.
   ───────────────────────────────────────────────────────────────────────────── */

/* ============================================================================
   Dashboard (home) — Panel v3 handoff implementation
   ----------------------------------------------------------------------------
   Fuente de verdad visual:
     design_handoff_panel_v3/handoff_panel_body/source/Panel v3.html
     design_handoff_panel_v3/handoff_panel_body/HANDOFF.md

   Todas las reglas viven bajo .dh-panel para no contaminar el resto del portal
   (Radzen, otros módulos). El modo dark se activa con [data-bs-theme="dark"]
   en <html>/<body> — solo invertimos los tokens neutros; el violet/indigo/cyan/
   pink/orange se mantienen como acentos.

   El portal ya tiene su propio header (MainLayout.razor) con buscador,
   notificaciones, modo claro/oscuro y perfil — por eso aquí NO se replica la
   .topbar oscura del handoff: el body empieza directamente con el hero card.

   Sidebar tampoco se replica (vive en MainLayout). Solo implementamos el cuerpo
   de `.main-col` del handoff: hero · ai-card · pulse · workspace · footer-bar.

   Fonts: Geist + Geist Mono cargadas en App.razor.
   ============================================================================ */

.dh-panel[b-al1cjgwm9w] {
    /* ============ Tokens — LIGHT (handoff literales) ============ */
    /* --dh-bg era #eef0f6, un gris con tinte lavanda que venía del handoff. Con
       el shell nuevo el lienzo del panel es lo único que se ve detrás de las
       tarjetas, y ese tinte competía con el violeta de la marca: leía como un
       fondo de color, no como papel. El contenido va sobre blanco y el contraste
       lo dan las tarjetas y sus bordes, no el lienzo. */
    --dh-bg: var(--rz-base-background-color);
    --dh-bg-2: var(--rz-base-50);
    --dh-paper: #ffffff;
    --dh-paper-2: #f7f8fc;
    --dh-ink: #0d0d1f;
    --dh-ink-2: #1f1f3a;
    --dh-muted: #6b6b87;
    --dh-muted-2: #9a9ab5;
    --dh-line: #e2e4ee;
    --dh-line-2: #d2d5e3;

    /* Topbar tokens — no se usan en el dashboard (sidebar/header del portal
       quedan fuera), pero los mantenemos para utilidades visuales (mark, etc.). */
    --dh-topbar: #0c0a3e;
    --dh-topbar-2: #1a1660;

    /* Violeta primario (más profundo que v2) */
    --dh-violet: #5b3ee0;
    --dh-violet-2: #4a2dc9;
    --dh-violet-soft: #ede9ff;
    --dh-violet-glow: rgba(91, 62, 224, 0.18);
    --dh-violet-bg: #f3f0ff;

    /* Estados */
    --dh-positive: #16a36a;
    --dh-positive-soft: #dcf3e7;
    --dh-warn: #d97706;
    --dh-warn-soft: #fcecd1;
    --dh-danger: #dc2626;
    --dh-danger-soft: #fbdcdc;
    --dh-info: #2563eb;
    --dh-info-soft: #dde7fc;

    background: var(--dh-bg);
    color: var(--dh-ink);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'ss01', 'tnum', 'cv11';
    min-height: calc(100vh - 48px);
    /* MainLayout envuelve @Body en <div class="rz-p-4"> (16px padding).
       El handoff pinta su propio padding lateral (28px) en cada sección;
       neutralizamos el padding exterior con margen negativo para volver a
       sangría 0 y que .dh-panel cubra todo el ancho como en el handoff. */
    margin: -1rem;
    overflow-x: hidden;
}

.dh-panel[b-al1cjgwm9w]  *,
.dh-panel[b-al1cjgwm9w]  *::before,
.dh-panel[b-al1cjgwm9w]  *::after {
    box-sizing: border-box;
}

/* ============ Tokens — DARK ============ */
/* The `html[...]` twin that used to sit alongside was the same rule with an
   extra element on the front: same matches, one more portal-wide selector. */
[data-bs-theme="dark"] .dh-panel[b-al1cjgwm9w] {
    --dh-bg: #0c0c14;
    --dh-bg-2: #1a1a26;
    --dh-paper: #15151f;
    --dh-paper-2: #1c1c28;
    --dh-ink: #f0f0fa;
    --dh-ink-2: #d8d8e8;
    --dh-muted: #9090a8;
    --dh-muted-2: #6f6f88;
    --dh-line: #25253a;
    --dh-line-2: #34344a;

    --dh-violet: #8d72ff;
    --dh-violet-2: #a48cff;
    --dh-violet-soft: rgba(91, 62, 224, 0.20);
    --dh-violet-glow: rgba(91, 62, 224, 0.32);
    --dh-violet-bg: rgba(91, 62, 224, 0.10);

    --dh-positive: #2dd485;
    --dh-positive-soft: rgba(22, 163, 106, 0.18);
    --dh-warn: #f59e0b;
    --dh-warn-soft: rgba(217, 119, 6, 0.18);
    --dh-danger: #f87171;
    --dh-danger-soft: rgba(220, 38, 38, 0.20);
    --dh-info: #60a5fa;
    --dh-info-soft: rgba(37, 99, 235, 0.18);
}

/* ============================================================================
   Page shell  (equivale al <main> del handoff)
   ============================================================================ */
.dh-panel .panel-main[b-al1cjgwm9w] {
    padding: 28px 28px 60px;
}

/* ============================================================================
   Hero card
   ============================================================================ */
.dh-panel .hero[b-al1cjgwm9w] {
    background: var(--dh-paper);
    border: 1px solid var(--dh-line);
    border-radius: 16px;
    padding: 24px 28px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}

.dh-panel .hero[b-al1cjgwm9w]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 360px;
    height: 100%;
    background: radial-gradient(circle at 80% 50%, rgba(91, 62, 224, 0.08), transparent 60%);
    pointer-events: none;
}

.dh-panel .hero-left[b-al1cjgwm9w] {
    position: relative;
}

.dh-panel .crumb[b-al1cjgwm9w] {
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--dh-violet);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dh-panel .crumb .accent-bar[b-al1cjgwm9w] {
    width: 18px;
    height: 2px;
    background: var(--dh-violet);
    border-radius: 1px;
}

.dh-panel .greet[b-al1cjgwm9w] {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--dh-ink);
}

.dh-panel .greet .accent[b-al1cjgwm9w] {
    color: var(--dh-violet);
    font-weight: 500;
}

.dh-panel .hero-meta[b-al1cjgwm9w] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--dh-muted);
    flex-wrap: wrap;
}

.dh-panel .chip[b-al1cjgwm9w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dh-bg-2);
    border: 1px solid var(--dh-line);
    color: var(--dh-ink-2);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
}

.dh-panel .chip .dot[b-al1cjgwm9w] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dh-violet);
}

.dh-panel .chip.success .dot[b-al1cjgwm9w] {
    background: var(--dh-positive);
}

.dh-panel .chip.warn .dot[b-al1cjgwm9w] {
    background: var(--dh-warn);
}

.dh-panel .hero-right[b-al1cjgwm9w] {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.dh-panel .hero-stat[b-al1cjgwm9w] {
    text-align: right;
    padding-right: 20px;
    border-right: 1px solid var(--dh-line);
}

.dh-panel .hero-stat-label[b-al1cjgwm9w] {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--dh-muted);
    margin-bottom: 4px;
}

.dh-panel .hero-stat-val[b-al1cjgwm9w] {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--dh-ink);
    line-height: 1;
}

.dh-panel .hero-stat-sub[b-al1cjgwm9w] {
    font-size: 11.5px;
    color: var(--dh-muted);
    margin-top: 4px;
}

/* ============================================================================
   Buttons
   ============================================================================ */
.dh-panel .btn[b-al1cjgwm9w] {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 9px;
    border: 1px solid var(--dh-line);
    background: var(--dh-paper);
    color: var(--dh-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dh-panel .btn:hover[b-al1cjgwm9w] {
    border-color: var(--dh-line-2);
    background: var(--dh-bg-2);
}

.dh-panel .btn:disabled[b-al1cjgwm9w] {
    opacity: 0.55;
    cursor: not-allowed;
}

.dh-panel .btn-primary[b-al1cjgwm9w] {
    background: linear-gradient(135deg, var(--dh-violet) 0%, var(--dh-violet-2) 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 16px var(--dh-violet-glow);
}

.dh-panel .btn-primary:hover[b-al1cjgwm9w] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px var(--dh-violet-glow);
}

.dh-panel .btn-sm[b-al1cjgwm9w] {
    font-size: 12px;
    padding: 7px 12px;
}

.dh-panel .btn.wide[b-al1cjgwm9w] {
    width: 100%;
    justify-content: center;
}

.dh-panel .ai-spark[b-al1cjgwm9w] {
    width: 12px;
    height: 12px;
    background: white;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l1.5 6.5L20 10l-6.5 1.5L12 18l-1.5-6.5L4 10l6.5-1.5z' fill='black'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l1.5 6.5L20 10l-6.5 1.5L12 18l-1.5-6.5L4 10l6.5-1.5z' fill='black'/></svg>") center/contain no-repeat;
}

/* ============================================================================
   AI Summary card  (bloque propio, fuera del hero)
   ============================================================================ */
.dh-panel .ai-card[b-al1cjgwm9w] {
    background:
        linear-gradient(135deg, rgba(91, 62, 224, 0.06), rgba(37, 99, 235, 0.04)),
        var(--dh-paper);
    border: 1px solid rgba(91, 62, 224, 0.18);
    border-radius: 14px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
}

.dh-panel .ai-card[b-al1cjgwm9w]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(91, 62, 224, 0.10), transparent 60%);
    pointer-events: none;
}

.dh-panel .ai-head[b-al1cjgwm9w] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    position: relative;
}

.dh-panel .ai-badge[b-al1cjgwm9w] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, var(--dh-violet), var(--dh-violet-2));
    color: white;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dh-panel .ai-meta[b-al1cjgwm9w] {
    font-size: 11.5px;
    color: var(--dh-muted);
}

.dh-panel .ai-meta-action[b-al1cjgwm9w] {
    margin-left: auto;
    font-size: 11.5px;
    background: transparent;
    border: 0;
    color: var(--dh-violet);
    cursor: pointer;
    font-weight: 500;
    padding: 0;
}

.dh-panel .ai-meta-action:hover[b-al1cjgwm9w] { text-decoration: underline; }
.dh-panel .ai-meta-action:disabled[b-al1cjgwm9w] { opacity: 0.5; cursor: progress; }

.dh-panel .ai-body[b-al1cjgwm9w] {
    font-size: 13.5px;
    color: var(--dh-ink-2);
    line-height: 1.55;
    position: relative;
    min-height: 1.55em;
}

.dh-panel .ai-body.placeholder[b-al1cjgwm9w] {
    color: var(--dh-muted);
    font-style: italic;
}

.dh-panel .ai-body[b-al1cjgwm9w]  .hl,
.dh-panel .ai-body[b-al1cjgwm9w]  span.hl {
    background: linear-gradient(180deg, transparent 60%, rgba(91, 62, 224, 0.18) 60%);
    color: var(--dh-violet-2);
    font-weight: 550;
}

.dh-panel .ai-body[b-al1cjgwm9w]  p { margin: 0 0 8px; }
.dh-panel .ai-body[b-al1cjgwm9w]  p:last-child { margin-bottom: 0; }
.dh-panel .ai-body[b-al1cjgwm9w]  ul { margin: 6px 0 0; padding-left: 20px; }
.dh-panel .ai-body[b-al1cjgwm9w]  strong { color: var(--dh-ink); font-weight: 600; }

.dh-panel .ai-actions[b-al1cjgwm9w] {
    display: flex;
    gap: 6px;
    margin-top: 14px;
    position: relative;
    flex-wrap: wrap;
}

.dh-panel .ai-chip[b-al1cjgwm9w] {
    font-size: 11.5px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(91, 62, 224, 0.18);
    color: var(--dh-violet-2);
    padding: 5px 11px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 500;
}

.dh-panel .ai-chip:hover[b-al1cjgwm9w] {
    background: white;
    box-shadow: 0 2px 8px var(--dh-violet-glow);
}

.dh-panel .ai-chip:disabled[b-al1cjgwm9w] { opacity: 0.55; cursor: not-allowed; }

[data-bs-theme="dark"] .dh-panel .ai-chip[b-al1cjgwm9w] {
    background: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .dh-panel .ai-chip:hover[b-al1cjgwm9w] {
    background: rgba(255, 255, 255, 0.12);
}

/* ============================================================================
   Pulso · semana en curso
   ============================================================================ */
.dh-panel .pulse[b-al1cjgwm9w] {
    background: var(--dh-paper);
    border: 1px solid var(--dh-line);
    border-radius: 14px;
    margin-bottom: 20px;
    overflow: hidden;
}

.dh-panel .pulse-head[b-al1cjgwm9w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--dh-line);
    gap: 12px;
    flex-wrap: wrap;
}

.dh-panel .pulse-title[b-al1cjgwm9w] {
    font-size: 13px;
    font-weight: 600;
    color: var(--dh-ink);
    letter-spacing: -0.005em;
}

.dh-panel .pulse-range[b-al1cjgwm9w] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--dh-muted);
    font-family: 'Geist Mono', monospace;
    flex-wrap: wrap;
}

.dh-panel .pulse-sep[b-al1cjgwm9w] { color: var(--dh-muted-2); }

.dh-panel .pulse-tag[b-al1cjgwm9w] {
    margin-left: 6px;
    background: var(--dh-positive-soft);
    color: var(--dh-positive);
    padding: 2px 8px;
    border-radius: 5px;
    font-family: 'Geist', sans-serif;
    font-weight: 500;
}

.dh-panel .pulse-grid[b-al1cjgwm9w] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.dh-panel .pulse-cell[b-al1cjgwm9w] {
    padding: 18px 20px 16px;
    border-right: 1px solid var(--dh-line);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dh-panel .pulse-cell:last-child[b-al1cjgwm9w] { border-right: 0; }

.dh-panel .pulse-label[b-al1cjgwm9w] {
    font-size: 11px;
    color: var(--dh-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.dh-panel .pulse-row[b-al1cjgwm9w] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.dh-panel .pulse-val[b-al1cjgwm9w] {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--dh-ink);
    font-variant-numeric: tabular-nums;
}

.dh-panel .pulse-unit[b-al1cjgwm9w] {
    font-size: 16px;
    font-weight: 500;
    color: var(--dh-muted);
    margin-left: 1px;
}

.dh-panel .pulse-delta[b-al1cjgwm9w] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 5px;
}

.dh-panel .pulse-delta.up[b-al1cjgwm9w] { background: var(--dh-positive-soft); color: var(--dh-positive); }
.dh-panel .pulse-delta.down[b-al1cjgwm9w] { background: var(--dh-danger-soft); color: var(--dh-danger); }

.dh-panel .pulse-foot[b-al1cjgwm9w] {
    font-size: 11px;
    color: var(--dh-muted);
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.dh-panel .pulse-foot b[b-al1cjgwm9w] {
    color: var(--dh-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dh-panel .pulse-foot .dim[b-al1cjgwm9w] { color: var(--dh-muted-2); }

/* breakdown bars */
.dh-panel .pulse-bd[b-al1cjgwm9w] {
    display: flex;
    gap: 3px;
    flex: 1;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}

.dh-panel .bd-seg[b-al1cjgwm9w] {
    display: block;
    height: 100%;
    border-radius: 2px;
    min-width: 2px;
}

.dh-panel .bd-progress[b-al1cjgwm9w] { background: var(--dh-info); }

.dh-panel .bd-todo[b-al1cjgwm9w] {
    background: var(--dh-violet-soft);
    border: 1px solid rgba(91, 62, 224, 0.25);
}

/* svc rows (carga por servicio) */
.dh-panel .svc-rows[b-al1cjgwm9w] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dh-panel .svc-row[b-al1cjgwm9w] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.dh-panel .svc-bar[b-al1cjgwm9w] {
    flex: 1;
    height: 4px;
    background: var(--dh-bg-2);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.dh-panel .svc-bar > span[b-al1cjgwm9w] {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    background: var(--dh-violet);
    border-radius: 2px;
}

.dh-panel .svc-n[b-al1cjgwm9w] {
    font-family: 'Geist Mono', monospace;
    font-weight: 600;
    color: var(--dh-ink);
    font-size: 11px;
    min-width: 18px;
    text-align: right;
}

.dh-panel .pulse-svc-cell[b-al1cjgwm9w] { gap: 8px; }

/* ============================================================================
   Workspace grid (2 columnas)
   ============================================================================ */
.dh-panel .workspace[b-al1cjgwm9w] {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 18px;
}

.dh-panel .workspace > div[b-al1cjgwm9w],
.dh-panel .workspace > aside[b-al1cjgwm9w] {
    min-width: 0;
}

.dh-panel .module[b-al1cjgwm9w] {
    background: var(--dh-paper);
    border: 1px solid var(--dh-line);
    border-radius: 14px;
    overflow: hidden;
}

.dh-panel .module + .module[b-al1cjgwm9w] { margin-top: 18px; }

.dh-panel .module-head[b-al1cjgwm9w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--dh-line);
    gap: 12px;
}

.dh-panel .module-title[b-al1cjgwm9w] {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dh-ink);
}

.dh-panel .module-title .num-badge[b-al1cjgwm9w],
.dh-panel .btn .num-badge[b-al1cjgwm9w] {
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    background: var(--dh-bg-2);
    color: var(--dh-muted);
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 500;
}

.dh-panel .module-tabs[b-al1cjgwm9w] {
    display: flex;
    gap: 2px;
    background: var(--dh-bg-2);
    padding: 3px;
    border-radius: 8px;
}

.dh-panel .mtab[b-al1cjgwm9w] {
    padding: 5px 11px;
    font-size: 12px;
    color: var(--dh-muted);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    background: transparent;
    border: 0;
    font-family: inherit;
}

.dh-panel .mtab.active[b-al1cjgwm9w] {
    background: var(--dh-paper);
    color: var(--dh-ink);
    box-shadow: 0 1px 2px rgba(13, 13, 31, 0.06);
}

.dh-panel .module-link[b-al1cjgwm9w] {
    font-size: 12px;
    color: var(--dh-violet);
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
    font-family: inherit;
}

.dh-panel .module-link[b-al1cjgwm9w]::after { content: " →"; }
.dh-panel .module-link:hover[b-al1cjgwm9w] { text-decoration: underline; }

.dh-panel .module-empty[b-al1cjgwm9w] {
    padding: 24px 20px;
    color: var(--dh-muted);
    font-size: 12.5px;
    text-align: center;
}

/* ============================================================================
   Tasks list
   ============================================================================ */
.dh-panel .tasks[b-al1cjgwm9w] { padding: 4px 0; }

.dh-panel .task[b-al1cjgwm9w] {
    display: grid;
    grid-template-columns: auto 64px 1fr auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--dh-line);
    cursor: pointer;
    transition: background 0.12s ease;
    position: relative;
}

.dh-panel .task:last-child[b-al1cjgwm9w] { border-bottom: none; }
.dh-panel .task:hover[b-al1cjgwm9w] { background: var(--dh-paper-2); }

.dh-panel .task[b-al1cjgwm9w]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: transparent;
}

.dh-panel .task.urgent[b-al1cjgwm9w]::before { background: var(--dh-warn); }
.dh-panel .task.progress[b-al1cjgwm9w]::before { background: var(--dh-violet); }

.dh-panel .check[b-al1cjgwm9w] {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--dh-line-2);
    border-radius: 5px;
    cursor: pointer;
    background: transparent;
    flex-shrink: 0;
}

.dh-panel .check:hover[b-al1cjgwm9w] { border-color: var(--dh-violet); }

.dh-panel .check.checked[b-al1cjgwm9w] {
    background: var(--dh-violet);
    border-color: var(--dh-violet);
    position: relative;
}

.dh-panel .check.checked[b-al1cjgwm9w]::after {
    content: "✓";
    color: white;
    font-size: 10px;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.dh-panel .task-id[b-al1cjgwm9w] {
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    color: var(--dh-muted-2);
    letter-spacing: 0.04em;
}

.dh-panel .task-main[b-al1cjgwm9w] { min-width: 0; }

.dh-panel .task-title[b-al1cjgwm9w] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--dh-ink);
    letter-spacing: -0.005em;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dh-panel .task-meta[b-al1cjgwm9w] {
    font-size: 11.5px;
    color: var(--dh-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dh-panel .task-meta[b-al1cjgwm9w]  .dim,
.dh-panel[b-al1cjgwm9w]  .dim { color: var(--dh-muted-2); }

/* svc-tag (compartido entre tasks, projects y attn) */
.dh-panel .svc-tag[b-al1cjgwm9w] {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dh-panel .svc-biot[b-al1cjgwm9w] { background: rgba(91, 62, 224, 0.10); color: var(--dh-violet-2); }
.dh-panel .svc-insotel[b-al1cjgwm9w] { background: rgba(37, 99, 235, 0.10); color: var(--dh-info); }
.dh-panel .svc-hosbec[b-al1cjgwm9w] { background: rgba(196, 61, 150, 0.10); color: #c43d96; }
.dh-panel .svc-zafiro[b-al1cjgwm9w] { background: rgba(22, 163, 106, 0.10); color: var(--dh-positive); }
.dh-panel .svc-marsenses[b-al1cjgwm9w] { background: rgba(217, 119, 6, 0.10); color: var(--dh-warn); }

/* Pills (estado) */
.dh-panel .pill[b-al1cjgwm9w] {
    font-size: 10.5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 500;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dh-panel .pill[b-al1cjgwm9w]::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.dh-panel .pill-todo[b-al1cjgwm9w] { background: var(--dh-bg-2); color: var(--dh-muted); }
.dh-panel .pill-todo[b-al1cjgwm9w]::before { background: var(--dh-muted-2); }

.dh-panel .pill-progress[b-al1cjgwm9w] { background: var(--dh-violet-soft); color: var(--dh-violet-2); }
.dh-panel .pill-progress[b-al1cjgwm9w]::before { background: var(--dh-violet); }

.dh-panel .pill-wait[b-al1cjgwm9w] { background: var(--dh-warn-soft); color: var(--dh-warn); }
.dh-panel .pill-wait[b-al1cjgwm9w]::before { background: var(--dh-warn); }

.dh-panel .pill-done[b-al1cjgwm9w] { background: var(--dh-positive-soft); color: var(--dh-positive); }
.dh-panel .pill-done[b-al1cjgwm9w]::before { background: var(--dh-positive); }

.dh-panel .pill-info[b-al1cjgwm9w] { background: var(--dh-info-soft); color: var(--dh-info); }
.dh-panel .pill-info[b-al1cjgwm9w]::before { background: var(--dh-info); }

.dh-panel .due[b-al1cjgwm9w] {
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    color: var(--dh-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 50px;
    text-align: right;
}

.dh-panel .due.soon[b-al1cjgwm9w] { color: var(--dh-warn); font-weight: 500; }
.dh-panel .due.overdue[b-al1cjgwm9w] { color: var(--dh-danger); font-weight: 600; }

.dh-panel .assignee[b-al1cjgwm9w] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd2a8, #ff8a8a);
    display: grid;
    place-items: center;
    color: white;
    font-size: 10px;
    font-weight: 600;
    border: 2px solid var(--dh-paper);
    box-shadow: 0 0 0 1px var(--dh-line);
}

/* ============================================================================
   Projects list
   ============================================================================ */
.dh-panel .projects[b-al1cjgwm9w] { padding: 4px 0; }

.dh-panel .project[b-al1cjgwm9w] {
    display: grid;
    grid-template-columns: 38px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--dh-line);
    cursor: pointer;
}

.dh-panel .project:hover[b-al1cjgwm9w] { background: var(--dh-paper-2); }
.dh-panel .project:last-child[b-al1cjgwm9w] { border-bottom: none; }

.dh-panel .proj-mark[b-al1cjgwm9w] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: white;
    box-shadow: 0 2px 6px rgba(13, 13, 31, 0.10);
}

.dh-panel .proj-info[b-al1cjgwm9w] { min-width: 0; }

.dh-panel .proj-name[b-al1cjgwm9w] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--dh-ink);
    letter-spacing: -0.005em;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dh-panel .proj-name .live-dot[b-al1cjgwm9w] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dh-positive);
    box-shadow: 0 0 0 2px rgba(22, 163, 106, 0.18);
    flex-shrink: 0;
}

.dh-panel .proj-tasks[b-al1cjgwm9w] {
    font-size: 11.5px;
    color: var(--dh-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dh-panel .progress-bar[b-al1cjgwm9w] {
    width: 80px;
    height: 4px;
    background: var(--dh-line);
    border-radius: 2px;
    overflow: hidden;
}

.dh-panel .progress-fill[b-al1cjgwm9w] {
    height: 100%;
    background: linear-gradient(90deg, var(--dh-violet), var(--dh-violet-2));
    border-radius: 2px;
}

.dh-panel .proj-pct[b-al1cjgwm9w] {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    color: var(--dh-ink);
    font-weight: 500;
    min-width: 36px;
    text-align: right;
}

/* ============================================================================
   Tickets (Soporte)
   ============================================================================ */
.dh-panel .tickets-tabs[b-al1cjgwm9w] {
    display: flex;
    gap: 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--dh-line);
}

.dh-panel .ttab[b-al1cjgwm9w] {
    padding: 10px 14px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--dh-muted);
    cursor: pointer;
    border: 0;
    border-bottom: 1.5px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

.dh-panel .ttab.active[b-al1cjgwm9w] {
    color: var(--dh-violet-2);
    border-bottom-color: var(--dh-violet);
}

.dh-panel .ttab .cnt[b-al1cjgwm9w] {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    background: var(--dh-bg-2);
    color: var(--dh-muted);
    padding: 1px 5px;
    border-radius: 4px;
}

.dh-panel .ttab.active .cnt[b-al1cjgwm9w] { background: var(--dh-violet); color: white; }

.dh-panel .ticket[b-al1cjgwm9w] {
    display: grid;
    grid-template-columns: 16px 78px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--dh-line);
    cursor: pointer;
}

.dh-panel .ticket:last-child[b-al1cjgwm9w] { border-bottom: none; }
.dh-panel .ticket:hover[b-al1cjgwm9w] { background: var(--dh-paper-2); }

.dh-panel .ticket-id[b-al1cjgwm9w] {
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    color: var(--dh-muted-2);
    letter-spacing: 0.03em;
}

.dh-panel .ticket-title[b-al1cjgwm9w] {
    font-size: 13px;
    color: var(--dh-ink);
    font-weight: 450;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dh-panel .ticket-area[b-al1cjgwm9w] {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    color: var(--dh-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--dh-bg-2);
    padding: 2px 7px;
    border-radius: 4px;
}

/* ============================================================================
   Upcoming (próximo vencimiento)
   ============================================================================ */
.dh-panel .upcoming[b-al1cjgwm9w] {
    padding: 18px 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(217, 119, 6, 0.08), transparent 60%),
        var(--dh-paper);
}

.dh-panel .upcoming-meta[b-al1cjgwm9w] {
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dh-warn);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dh-panel .upcoming-meta.overdue[b-al1cjgwm9w] { color: var(--dh-danger); }

.dh-panel .upcoming-title[b-al1cjgwm9w] {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--dh-ink);
    margin-bottom: 6px;
}

.dh-panel .upcoming-sub[b-al1cjgwm9w] {
    font-size: 12px;
    color: var(--dh-muted);
    margin-bottom: 14px;
}

.dh-panel .upcoming-actions[b-al1cjgwm9w] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================================
   Atención requerida (NUEVO en v3)
   ============================================================================ */
.dh-panel .attn-list[b-al1cjgwm9w] {
    display: flex;
    flex-direction: column;
}

.dh-panel .attn[b-al1cjgwm9w] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--dh-line);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    transition: background 0.15s;
}

.dh-panel .attn:last-child[b-al1cjgwm9w] { border-bottom: 0; }
.dh-panel .attn:hover[b-al1cjgwm9w] { background: var(--dh-bg-2); }

.dh-panel .attn-bar[b-al1cjgwm9w] {
    width: 3px;
    align-self: stretch;
    border-radius: 2px;
    flex-shrink: 0;
}

.dh-panel .attn-bar.attn-warn[b-al1cjgwm9w] { background: var(--dh-warn); }
.dh-panel .attn-bar.attn-info[b-al1cjgwm9w] { background: var(--dh-info); }
.dh-panel .attn-bar.attn-violet[b-al1cjgwm9w] { background: var(--dh-violet); }

.dh-panel .attn-body[b-al1cjgwm9w] {
    flex: 1;
    min-width: 0;
}

.dh-panel .attn-title[b-al1cjgwm9w] {
    font-size: 13px;
    font-weight: 600;
    color: var(--dh-ink);
    letter-spacing: -0.005em;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dh-panel .attn-meta[b-al1cjgwm9w] {
    font-size: 11px;
    color: var(--dh-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dh-panel .attn-meta[b-al1cjgwm9w]  b { color: var(--dh-ink); font-weight: 600; }

.dh-panel .attn-act[b-al1cjgwm9w] {
    font-size: 11px;
    font-weight: 600;
    color: var(--dh-violet);
    flex-shrink: 0;
    transition: transform 0.15s;
    white-space: nowrap;
}

.dh-panel .attn:hover .attn-act[b-al1cjgwm9w] { transform: translateX(2px); }

/* ============================================================================
   Esta semana (activity bars + stats)
   ============================================================================ */
.dh-panel .activity-bars[b-al1cjgwm9w] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    height: 64px;
    margin: 14px 0 6px;
}

.dh-panel .abar[b-al1cjgwm9w] {
    background: var(--dh-bg-2);
    border-radius: 4px;
    position: relative;
    height: 100%;
    overflow: hidden;
}

.dh-panel .abar-fill[b-al1cjgwm9w] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, var(--dh-violet), var(--dh-violet-2));
    border-radius: 4px;
}

.dh-panel .abar.today[b-al1cjgwm9w] {
    box-shadow: 0 0 0 2px rgba(91, 62, 224, 0.25);
}

.dh-panel .abar.today .abar-fill[b-al1cjgwm9w] {
    background: linear-gradient(180deg, var(--dh-violet), #ff7ad6);
}

.dh-panel .abar-labels[b-al1cjgwm9w] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    font-family: 'Geist Mono', monospace;
    font-size: 9.5px;
    color: var(--dh-muted-2);
    text-transform: uppercase;
    text-align: center;
}

.dh-panel .week-stats[b-al1cjgwm9w] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 14px 4px 0;
    border-top: 1px solid var(--dh-line);
    margin-top: 16px;
}

.dh-panel .ws-stat-label[b-al1cjgwm9w] {
    font-size: 11px;
    color: var(--dh-muted);
    margin-bottom: 4px;
}

.dh-panel .ws-stat-val[b-al1cjgwm9w] {
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--dh-ink);
}

.dh-panel .compact-body[b-al1cjgwm9w] { padding: 16px 20px; }

/* small trend pill reutilizable */
.dh-panel .kpi-trend[b-al1cjgwm9w] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 5px;
}

.dh-panel .trend-up[b-al1cjgwm9w] { background: var(--dh-positive-soft); color: var(--dh-positive); }
.dh-panel .trend-down[b-al1cjgwm9w] { background: var(--dh-danger-soft); color: var(--dh-danger); }
.dh-panel .trend-flat[b-al1cjgwm9w] { background: var(--dh-bg-2); color: var(--dh-muted); }
.dh-panel .trend-warn[b-al1cjgwm9w] { background: var(--dh-warn-soft); color: var(--dh-warn); }

/* ============================================================================
   Footer bar
   ============================================================================ */
.dh-panel .footer-bar[b-al1cjgwm9w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 4px 0;
    margin-top: 28px;
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    color: var(--dh-muted-2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    gap: 10px;
    flex-wrap: wrap;
}

/* ============================================================================
   Skeleton loaders
   ============================================================================ */
.dh-panel .skeleton-row[b-al1cjgwm9w] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--dh-line);
}

.dh-panel .skeleton-row:last-child[b-al1cjgwm9w] { border-bottom: none; }

.dh-panel .skel[b-al1cjgwm9w] {
    background: linear-gradient(90deg, var(--dh-bg-2) 0%, var(--dh-line) 50%, var(--dh-bg-2) 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: dh-shimmer-b-al1cjgwm9w 1.4s ease-in-out infinite;
}

@keyframes dh-shimmer-b-al1cjgwm9w {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================================
   Customer / fallback stack (when CanRenderInternalPanel == false)
   ============================================================================ */
.dh-panel .customer-stack[b-al1cjgwm9w] {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 18px;
}

.dh-panel .customer-stack .col[b-al1cjgwm9w] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dh-panel .help-copy[b-al1cjgwm9w] {
    font-size: 13px;
    color: var(--dh-muted);
    margin: 0 0 12px;
}

/* ============================================================================
   Responsive (desktop-first; sub-1280px colapsa)
   ============================================================================ */
@media (max-width: 1280px) {
    .dh-panel .workspace[b-al1cjgwm9w],
    .dh-panel .customer-stack[b-al1cjgwm9w] {
        grid-template-columns: 1fr;
    }

    .dh-panel .pulse-grid[b-al1cjgwm9w] {
        grid-template-columns: repeat(2, 1fr);
    }

    .dh-panel .pulse-cell:nth-child(2)[b-al1cjgwm9w] { border-right: 0; }
    .dh-panel .pulse-cell:nth-child(1)[b-al1cjgwm9w],
    .dh-panel .pulse-cell:nth-child(2)[b-al1cjgwm9w] {
        border-bottom: 1px solid var(--dh-line);
    }
}

@media (max-width: 720px) {
    .dh-panel .panel-main[b-al1cjgwm9w] { padding: 18px 14px 40px; }

    .dh-panel .hero[b-al1cjgwm9w] {
        grid-template-columns: 1fr;
        padding: 18px 18px;
        gap: 16px;
    }

    .dh-panel .hero-right[b-al1cjgwm9w] {
        justify-content: space-between;
    }

    .dh-panel .pulse-grid[b-al1cjgwm9w] { grid-template-columns: 1fr; }
    .dh-panel .pulse-cell[b-al1cjgwm9w] { border-right: 0; border-bottom: 1px solid var(--dh-line); }
    .dh-panel .pulse-cell:last-child[b-al1cjgwm9w] { border-bottom: 0; }
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* Estilos propios de Error — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/pages/access-denied.css (la hoja de las páginas de
   error oscuras). Todo el marcado de Error.razor es HTML plano
   (div.error-container fijo, error-card, error-icon y variantes, error-details,
   btn-primary/secondary) → b-{hash} directo, sin ::deep ni envoltorio. El
   position:fixed no es chrome externo: el div es marcado propio.

   AccessDenied.razor comparte esta hoja y duplica el mismo bloque íntegro en
   su propio .razor.css (duplicar bloques idénticos por componente es lo
   correcto bajo isolation: cada uno con su hash).

   OJO homónimos: NotFound.razor usa error-container/error-card con SU propia
   definición (antes not-found.css, ahora NotFound.razor.css); al aislar, cada
   página recupera la suya — /notfound pierde el lienzo oscuro global que le
   llegaba de aquí (riesgo anotado en la migración, no se «arregla» copiando).
   ───────────────────────────────────────────────────────────────────────────── */

/* Self-contained error page styles. Overrides theme.css h1 color (which
   resolves to a dark var(--rz-text-title-color) in light-theme browsers)
   and the global Radzen text colors so the message stays readable on the
   dark error-card regardless of the active theme. !important is used on
   the colors-only because that's the property the global theme cascades
   into; sizes and layout follow normal specificity. */

/* Paint the same dark gradient the SetupLayout uses on the container itself.
   This way the page looks correct even when an outer wrapper happens to
   collapse to content width (we hit this when MainLayout was bypassed but a
   flex ancestor left the body at min-content). Belt-and-braces fix. */
.error-container[b-nnpfxnx28s] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 40%, #16213e 100%);
    z-index: 1;
}

.error-card[b-nnpfxnx28s] {
    text-align: center;
    max-width: 460px;
    width: 100%;
    padding: 2.5rem;
    background: rgba(25, 25, 45, 0.96);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.55);
    color: #e2e8f0;
}

.error-icon[b-nnpfxnx28s] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-icon.denied[b-nnpfxnx28s] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444 !important;
}

.error-icon.notfound[b-nnpfxnx28s] {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8 !important;
}

.error-icon.fault[b-nnpfxnx28s] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b !important;
}

.error-icon svg[b-nnpfxnx28s] {
    width: 40px;
    height: 40px;
}

.error-card h1[b-nnpfxnx28s] {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #f8fafc !important;
    margin: 0 0 0.5rem !important;
    letter-spacing: 0;
    line-height: 1.3;
}

.error-card .error-message[b-nnpfxnx28s] {
    color: #cbd5e1 !important;
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
}

.error-card .error-details[b-nnpfxnx28s] {
    text-align: left;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.5rem;
}

.error-card .error-details p[b-nnpfxnx28s] {
    color: #cbd5e1 !important;
    font-size: 0.8rem;
    margin: 0 0 0.5rem;
}

.error-card .error-details ul[b-nnpfxnx28s] {
    margin: 0;
    padding-left: 1.25rem;
    color: #94a3b8 !important;
    font-size: 0.8rem;
}

.error-card .error-details li[b-nnpfxnx28s] {
    margin: 0.25rem 0;
    color: #94a3b8 !important;
}

.error-card .error-actions[b-nnpfxnx28s] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.error-card .btn-primary[b-nnpfxnx28s],
.error-card .btn-secondary[b-nnpfxnx28s] {
    display: inline-flex;
    align-items: center;
    /* justify-content defaulted to `normal`, so icon + label sat flush left inside the
       button's padding box and read as off-centre. Centring the flex line keeps the pair
       balanced whatever the label length is after translation. */
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.error-card .btn-primary[b-nnpfxnx28s] {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #ffffff !important;
}

.error-card .btn-primary:hover[b-nnpfxnx28s] {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
    color: #ffffff !important;
}

.error-card .btn-secondary[b-nnpfxnx28s] {
    background: transparent;
    border-color: rgba(139, 92, 246, 0.4);
    color: #cbd5e1 !important;
}

.error-card .btn-secondary:hover[b-nnpfxnx28s] {
    background: rgba(139, 92, 246, 0.12);
    color: #f8fafc !important;
}
/* /Components/Pages/Index.razor.rz.scp.css */
/* Estilos propios de Index (/home-legacy) — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/pages/index.css. El .razor arranca con RadzenRow y
   TODAS las tarjetas (welcome-card, alerts-card, list-card, ai-card,
   ai-summary-card, consumption-card, status-card, expiring-card,
   quick-ticket-card, stat-card, consumption-admin-card) van como clase sobre
   <RadzenCard>: a lo que pinta un componente Razor no le llega el b-{hash},
   así que esas reglas salen por ::deep ancladas en el <div class="index-page">
   añadido en el .razor como envoltorio de cada rama (customer y admin, patrón
   LinkToHoldedDialog). Los .rz-icon dentro de ai-icon-wrapper /
   consumption-icon-wrapper / status-icon-wrapper son RadzenIcon → ::deep desde
   su div contenedor propio. El resto (quick-stat, alert-item, activity-*,
   list-item, upcoming-*, expiring-*, empty-state, stat-value/label,
   consumption-*) es HTML plano del .razor y migra directo.

   .text-danger/.text-success eran utilidades bare que también consumían
   InvoicesAdmin e IaasSyncHistoryDialog: cada consumidor duplica su bloque en
   su propio .razor.css (duplicar es lo correcto bajo isolation).
   ───────────────────────────────────────────────────────────────────────────── */

/* Welcome Card */
.index-page[b-6gsfwjcnnn]  .welcome-card {
    background: linear-gradient(135deg, var(--rz-primary-lighter) 0%, var(--rz-base-background-color) 100%);
}

/* Quick Stats in header */
.quick-stat[b-6gsfwjcnnn] {
    text-align: center;
    padding: 0.5rem 1rem;
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-background-color);
}
.quick-stat-value[b-6gsfwjcnnn] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rz-text-color);
}
.quick-stat-value.has-items[b-6gsfwjcnnn] {
    color: var(--rz-warning);
}
.quick-stat.alert .quick-stat-value[b-6gsfwjcnnn] {
    color: var(--rz-danger);
}
.quick-stat-label[b-6gsfwjcnnn] {
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Alerts Card */
.index-page[b-6gsfwjcnnn]  .alerts-card {
    border-left: 4px solid var(--rz-danger);
    background: rgba(var(--rz-danger-rgb), 0.05);
}
.alert-item[b-6gsfwjcnnn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--rz-border-radius);
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 0.5rem;
}
.alert-item:hover[b-6gsfwjcnnn] {
    background: var(--rz-base-200);
}
.alert-item.warning[b-6gsfwjcnnn] { border-left: 3px solid var(--rz-warning); }
.alert-item.danger[b-6gsfwjcnnn] { border-left: 3px solid var(--rz-danger); }
.alert-item.info[b-6gsfwjcnnn] { border-left: 3px solid var(--rz-info); }
.alert-content[b-6gsfwjcnnn] {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.alert-title[b-6gsfwjcnnn] {
    font-weight: 600;
    font-size: 0.875rem;
}
.alert-desc[b-6gsfwjcnnn] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}
.index-page[b-6gsfwjcnnn]  .alert-arrow {
    opacity: 0.3;
}

/* Activity Timeline */
.activity-timeline[b-6gsfwjcnnn] {
    display: flex;
    flex-direction: column;
}
.activity-item[b-6gsfwjcnnn] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rz-base-200);
    cursor: pointer;
    transition: background 0.2s;
}
.activity-item:hover[b-6gsfwjcnnn] {
    background: var(--rz-base-100);
    margin: 0 -1rem;
    padding: 0.75rem 1rem;
}
.activity-item:last-child[b-6gsfwjcnnn] {
    border-bottom: none;
}
.activity-icon[b-6gsfwjcnnn] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.activity-icon.ticket[b-6gsfwjcnnn] { background: rgba(var(--rz-warning-rgb), 0.15); color: var(--rz-warning); }
.activity-icon.project[b-6gsfwjcnnn] { background: rgba(var(--rz-success-rgb), 0.15); color: var(--rz-success); }
.activity-icon.invoice[b-6gsfwjcnnn] { background: rgba(var(--rz-info-rgb), 0.15); color: var(--rz-info); }
.activity-icon.license[b-6gsfwjcnnn] { background: rgba(var(--rz-primary-rgb), 0.15); color: var(--rz-primary); }
.activity-content[b-6gsfwjcnnn] {
    flex: 1;
    min-width: 0;
}
.activity-title[b-6gsfwjcnnn] {
    font-weight: 500;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.activity-meta[b-6gsfwjcnnn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}
.activity-entity[b-6gsfwjcnnn] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.activity-time[b-6gsfwjcnnn] {
    font-size: 0.7rem;
    color: var(--rz-text-tertiary-color);
    white-space: nowrap;
}

/* List Cards (Tickets, Projects) */
.index-page[b-6gsfwjcnnn]  .list-card {
    min-height: 280px;
}
.list-item[b-6gsfwjcnnn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--rz-base-200);
    cursor: pointer;
    transition: background 0.2s;
}
.list-item:hover[b-6gsfwjcnnn] {
    background: var(--rz-base-100);
    margin: 0 -1rem;
    padding: 0.6rem 1rem;
}
.list-item:last-child[b-6gsfwjcnnn] {
    border-bottom: none;
}
.list-item-main[b-6gsfwjcnnn] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}
.list-item-code[b-6gsfwjcnnn] {
    font-size: 0.7rem;
    color: var(--rz-text-tertiary-color);
    font-family: monospace;
}
.list-item-title[b-6gsfwjcnnn] {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list-item-meta[b-6gsfwjcnnn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* AI Card */
.index-page[b-6gsfwjcnnn]  .ai-card {
    background: linear-gradient(180deg, var(--rz-base-100) 0%, var(--rz-base-background-color) 100%);
    border: 1px solid var(--rz-primary-lighter);
}
.ai-generating[b-6gsfwjcnnn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--rz-text-secondary-color);
}
.ai-content[b-6gsfwjcnnn] {
    padding: 0.5rem;
    background: var(--rz-base-background-color);
    border-radius: var(--rz-border-radius);
}
.ai-empty[b-6gsfwjcnnn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    text-align: center;
}

/* AI Summary Card (Full width in main column) */
.index-page[b-6gsfwjcnnn]  .ai-summary-card {
    background: linear-gradient(135deg, var(--rz-base-100) 0%, rgba(var(--rz-primary-rgb), 0.05) 100%);
    border: 1px solid var(--rz-primary-lighter);
    border-left: 4px solid var(--rz-primary);
}
.ai-icon-wrapper[b-6gsfwjcnnn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--rz-primary);
    color: white;
    border-radius: 8px;
}
.ai-icon-wrapper[b-6gsfwjcnnn]  .rz-icon {
    font-size: 1.1rem;
}
.ai-generating-inline[b-6gsfwjcnnn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--rz-text-secondary-color);
    background: var(--rz-base-background-color);
    border-radius: var(--rz-border-radius);
}
.ai-summary-content[b-6gsfwjcnnn] {
    padding: 1rem;
    background: var(--rz-base-background-color);
    border-radius: var(--rz-border-radius);
    line-height: 1.7;
    font-size: 0.95rem;
    color: var(--rz-text-color);
    white-space: pre-wrap;
}
.ai-empty-inline[b-6gsfwjcnnn] {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: var(--rz-base-background-color);
    border-radius: var(--rz-border-radius);
}

/* Upcoming Dates */
.upcoming-item[b-6gsfwjcnnn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rz-base-200);
}
.upcoming-item:last-child[b-6gsfwjcnnn] {
    border-bottom: none;
}
.upcoming-date[b-6gsfwjcnnn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
    padding: 0.25rem;
    background: var(--rz-primary-lighter);
    border-radius: var(--rz-border-radius);
}
.upcoming-day[b-6gsfwjcnnn] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rz-primary);
}
.upcoming-month[b-6gsfwjcnnn] {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--rz-primary);
}
.upcoming-info[b-6gsfwjcnnn] {
    display: flex;
    flex-direction: column;
}
.upcoming-title[b-6gsfwjcnnn] {
    font-size: 0.85rem;
}
.upcoming-type[b-6gsfwjcnnn] {
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
}

/* Consumption Card */
.index-page[b-6gsfwjcnnn]  .consumption-card {
    background: linear-gradient(135deg, var(--rz-base-100) 0%, rgba(0, 120, 212, 0.05) 100%);
    border: 1px solid rgba(0, 120, 212, 0.2);
    border-left: 4px solid #0078d4;
}
.consumption-icon-wrapper[b-6gsfwjcnnn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #0078d4, #00a4ef);
    color: white;
    border-radius: 8px;
}
.consumption-icon-wrapper[b-6gsfwjcnnn]  .rz-icon {
    font-size: 1.2rem;
}
.consumption-loading[b-6gsfwjcnnn], .consumption-empty[b-6gsfwjcnnn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--rz-text-secondary-color);
}
.consumption-empty[b-6gsfwjcnnn] {
    flex-direction: column;
}
.consumption-summary[b-6gsfwjcnnn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.consumption-total[b-6gsfwjcnnn] {
    display: flex;
    flex-direction: column;
}
.consumption-label[b-6gsfwjcnnn] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.consumption-value[b-6gsfwjcnnn] {
    font-size: 2rem;
    font-weight: 700;
    color: #0078d4;
}
.consumption-comparison[b-6gsfwjcnnn] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
}
.text-danger[b-6gsfwjcnnn] { color: var(--rz-danger); }
.text-success[b-6gsfwjcnnn] { color: var(--rz-success); }

/* Empty States */
.empty-state[b-6gsfwjcnnn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}
.empty-state-small[b-6gsfwjcnnn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
}

/* Status Card */
.index-page[b-6gsfwjcnnn]  .status-card {
    background: linear-gradient(135deg, var(--rz-base-100) 0%, rgba(var(--rz-success-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--rz-success-rgb), 0.2);
}
.status-icon-wrapper[b-6gsfwjcnnn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: white;
}
.status-icon-wrapper.ok[b-6gsfwjcnnn] {
    background: var(--rz-success);
}
.status-icon-wrapper.warning[b-6gsfwjcnnn] {
    background: var(--rz-warning);
}
.status-icon-wrapper[b-6gsfwjcnnn]  .rz-icon {
    font-size: 1.2rem;
}
.status-services[b-6gsfwjcnnn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.status-service-item[b-6gsfwjcnnn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--rz-base-background-color);
    border-radius: var(--rz-border-radius);
}
.status-service-item span[b-6gsfwjcnnn] {
    flex: 1;
    font-size: 0.85rem;
}

/* Expiring Licenses Card */
.index-page[b-6gsfwjcnnn]  .expiring-card {
    background: linear-gradient(135deg, var(--rz-base-100) 0%, rgba(var(--rz-warning-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--rz-warning-rgb), 0.2);
}
.expiring-item[b-6gsfwjcnnn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem;
    margin: 0 -0.5rem;
    border-radius: var(--rz-border-radius);
    cursor: pointer;
    transition: background 0.2s;
}
.expiring-item:hover[b-6gsfwjcnnn] {
    background: var(--rz-base-100);
}
.expiring-info[b-6gsfwjcnnn] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.expiring-name[b-6gsfwjcnnn] {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.expiring-date[b-6gsfwjcnnn] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}
.expiring-days[b-6gsfwjcnnn] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-200);
    color: var(--rz-text-color);
}
.expiring-days.warning[b-6gsfwjcnnn] {
    background: rgba(var(--rz-warning-rgb), 0.2);
    color: var(--rz-warning);
}
.expiring-days.critical[b-6gsfwjcnnn] {
    background: rgba(var(--rz-danger-rgb), 0.2);
    color: var(--rz-danger);
}

/* Quick Ticket Card */
.index-page[b-6gsfwjcnnn]  .quick-ticket-card {
    background: linear-gradient(135deg, var(--rz-base-100) 0%, rgba(var(--rz-primary-rgb), 0.05) 100%);
    border: 1px solid var(--rz-primary-lighter);
}

/* Admin Dashboard */
.index-page[b-6gsfwjcnnn]  .stat-card {
    text-align: center;
    transition: transform 0.2s;
    cursor: pointer;
}
.index-page[b-6gsfwjcnnn]  .stat-card:hover {
    transform: translateY(-2px);
}
.stat-value[b-6gsfwjcnnn] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--rz-text-color);
}
.stat-label[b-6gsfwjcnnn] {
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
}

/* Admin Consumption Card */
.index-page[b-6gsfwjcnnn]  .consumption-admin-card {
    background: linear-gradient(135deg, var(--rz-base-100) 0%, rgba(0, 120, 212, 0.03) 100%);
    border: 1px solid rgba(0, 120, 212, 0.15);
}
.consumption-admin-summary[b-6gsfwjcnnn] {
    display: flex;
    gap: 2rem;
    padding: 1rem;
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
}
.admin-summary-item[b-6gsfwjcnnn] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.admin-summary-label[b-6gsfwjcnnn] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.admin-summary-value[b-6gsfwjcnnn] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0078d4;
}

/* ── Contribución cross-cluster (de pages/index.css) aplicada por el orquestador ── */
/* Correccion del revisor en Index.razor.css: '.alert-arrow' quedo muerta (va sobre
   <RadzenIcon>, Index.razor:125, sin b-hash). Reanclar desde el div propio .alert-item. */
.alert-item[b-6gsfwjcnnn]  .alert-arrow {
    opacity: 0.3;
}
/* /Components/Pages/Invoices.razor.rz.scp.css */
/* Estilos propios de Invoices — CSS isolation.
   Vienen de wwwroot/css/pages/invoices.css. Verificado: ningun otro componente depende de
   estas clases sin declararlas en su propia hoja.
   ───────────────────────────────────────────────────────────────────────── */

.fade-in[b-13cb3x5z24] {
    animation: invoices-fadeIn-b-13cb3x5z24 0.3s ease-in-out;
}

@keyframes invoices-fadeIn-b-13cb3x5z24 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Corporate KPI Cards - matching TicketList design */
.kpi-card[b-13cb3x5z24] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius);
    padding: 1.25rem;
    text-align: center;
    transition: all 0.15s ease;
}

.kpi-card:hover[b-13cb3x5z24] {
    border-color: var(--rz-primary-lighter);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.kpi-value[b-13cb3x5z24] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.kpi-label[b-13cb3x5z24] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* /Components/Pages/KnowledgeBase/KbHome.razor.rz.scp.css */
/* Home de la wiki — handoff §5 (rejilla) y §10 (listados).
   ─────────────────────────────────────────────────────────────────────────────
   Sustituye al layout de RadzenCard + RadzenRow/Column anterior. El motivo no es
   estético: con columnas de Radzen no se puede fijar el nav en 308px ni centrar
   el contenido a 820px sin pelearse con los breakpoints del grid, que es lo que
   hacía que esta pantalla se viera distinta al resto de la wiki.

   Al ser HTML propio, casi nada necesita `::deep` — sólo lo que pinta RadzenIcon.
   ───────────────────────────────────────────────────────────────────────────── */

.kb-home[b-byqi6bzyuk] {
    /* Una sola columna: el nav de 308px del handoff §3 lo aporta el sidebar del
       portal (KbMenuTree), no esta página. Ver el comentario del .razor. */
    display: block;
    min-height: calc(100vh - var(--rz-header-min-height, 56px));
}

/* ── Nav ───────────────────────────────────────────────────────────────────── */
.kb-nav[b-byqi6bzyuk] {
    display: flex;
    flex-direction: column;
    /* Sticky con scroll propio: el árbol puede ser largo sin arrastrar la página. */
    position: sticky;
    top: 0;
    max-height: calc(100vh - var(--rz-header-min-height, 56px));
    padding: 12px 8px;
    gap: 8px;
}

.kb-nav-scroll[b-byqi6bzyuk] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.kb-nav-foot[b-byqi6bzyuk] {
    flex: 0 0 auto;
    border-top: 1px solid var(--rz-base-300);
    padding-top: 8px;
}

/* Fila fantasma: misma geometría que una fila del árbol, sin acciones. */
.kb-ghost-row[b-byqi6bzyuk] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 36px;
    padding: 0 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--rz-text-secondary-color);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.kb-ghost-row:hover[b-byqi6bzyuk] {
    background: var(--rz-base-200);
    color: var(--rz-text-primary-color);
}

.kb-ghost-row[b-byqi6bzyuk]  .rz-icon,
.kb-ghost-row[b-byqi6bzyuk]  .notranslate {
    font-size: 16px;
}

/* ── Contenido ─────────────────────────────────────────────────────────────── */
.kb-main[b-byqi6bzyuk] {
    min-width: 0;   /* deja encoger al hijo: sin esto la tabla desborda la rejilla */
    background: var(--rz-base-background-color);
    border-top-left-radius: 10px;          /* la curva del handoff §2 */
    border-left: 1px solid var(--rz-base-200);
    border-top: 1px solid var(--rz-base-200);
    min-height: calc(100vh - var(--rz-header-min-height, 56px));
}

/* Barra de comandos: sticky, repite el radio superior izquierdo para que la
   curva no se corte al hacer scroll (handoff §2). */
.kb-cmdbar[b-byqi6bzyuk] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 48px;
    padding: 0 24px;
    border-bottom: 1px solid var(--rz-base-200);
    border-top-left-radius: 10px;
    background: var(--rz-base-background-color);
}

.kb-crumbs[b-byqi6bzyuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    color: var(--rz-text-secondary-color);
}

.kb-crumbs[b-byqi6bzyuk]  .rz-icon,
.kb-crumbs[b-byqi6bzyuk]  .notranslate {
    font-size: 18px;
}

.kb-crumb-current[b-byqi6bzyuk] {
    font-weight: 600;
    color: var(--rz-text-primary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Contenedor de 1280px del handoff §5 —NO los 820px de la columna de artículo.
   Los 820 son para leer prosa; aquí el contenido es un listado tabular, y con ese
   ancho quedaba una franja vacía enorme a la izquierda porque esta pantalla no
   tiene el carril del índice que ocupa la derecha en un artículo. */
.kb-content[b-byqi6bzyuk] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 40px 48px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.kb-h2[b-byqi6bzyuk] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

/* ── Buscador ──────────────────────────────────────────────────────────────── */
.kb-search[b-byqi6bzyuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--rz-base-300);
    border-radius: 6px;
    background: var(--rz-base-50);
}

.kb-search:focus-within[b-byqi6bzyuk] {
    border-color: var(--rz-primary);
}

.kb-search[b-byqi6bzyuk]  .rz-icon,
.kb-search[b-byqi6bzyuk]  .notranslate {
    font-size: 18px;
    color: var(--rz-text-tertiary-color);
}

.kb-search-input[b-byqi6bzyuk] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    outline: none;
}

/* ── Pivots (tabs subrayadas, handoff §10) ─────────────────────────────────── */
.kb-pivots[b-byqi6bzyuk] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--rz-base-200);
}

.kb-pivot[b-byqi6bzyuk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--rz-text-secondary-color);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.kb-pivot:hover[b-byqi6bzyuk] {
    color: var(--rz-text-primary-color);
}

.kb-pivot.is-on[b-byqi6bzyuk] {
    color: var(--rz-primary);
    border-bottom-color: var(--rz-primary);
    font-weight: 600;
}

/* ── Listado: cabecera 36px, filas 44px ────────────────────────────────────── */
.kb-table[b-byqi6bzyuk] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    overflow: hidden;
}

/* Columnas del handoff: nombre+subtitulo · ubicacion · estado · modificado · menu.
   La ultima es de 32px y no de auto para que el boton no baile de fila en fila
   segun lo larga que sea la fecha. */
.kb-thead[b-byqi6bzyuk],
.kb-trow[b-byqi6bzyuk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px 110px 150px 32px;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    text-align: left;
}

/* Por debajo de 900px sobran ubicacion y estado: el nombre es lo que se busca. */
@media (max-width: 900px) {
    .kb-thead[b-byqi6bzyuk],
    .kb-trow[b-byqi6bzyuk] {
        grid-template-columns: minmax(0, 1fr) 120px 32px;
    }

    .kb-thead > :nth-child(2)[b-byqi6bzyuk],
    .kb-thead > :nth-child(3)[b-byqi6bzyuk],
    .kb-trow > .kb-row-loc[b-byqi6bzyuk],
    .kb-trow > :nth-child(3)[b-byqi6bzyuk] {
        display: none;
    }
}

.kb-thead[b-byqi6bzyuk] {
    height: 36px;
    background: var(--rz-base-100);
    border-bottom: 1px solid var(--rz-base-200);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
}

.kb-trow[b-byqi6bzyuk] {
    min-height: 44px;
    border: 0;
    border-bottom: 1px solid var(--rz-base-100);
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Nombre + subtitulo apilados: el icono se queda arriba, alineado con el titulo. */
.kb-row-stack[b-byqi6bzyuk] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.kb-row-loc[b-byqi6bzyuk] {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Avatar del autor: iniciales, 24px, tinte de marca. */
.kb-avatar[b-byqi6bzyuk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Menu de fila: aparece al pasar por encima, como en el arbol. */
.kb-row-menu[b-byqi6bzyuk] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    visibility: hidden;
}

.kb-trow:hover .kb-row-menu[b-byqi6bzyuk],
.kb-row-menu:focus-visible[b-byqi6bzyuk] {
    visibility: visible;
}

.kb-row-menu:hover[b-byqi6bzyuk] {
    background: var(--rz-base-200);
    color: var(--rz-text-primary-color);
}

.kb-trow:last-child[b-byqi6bzyuk] {
    border-bottom: 0;
}

.kb-trow:hover[b-byqi6bzyuk] {
    background: var(--rz-base-50);
}

.kb-row-main[b-byqi6bzyuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.kb-row-main[b-byqi6bzyuk]  .kb-row-icon {
    font-size: 16px;
    color: var(--rz-text-secondary-color);
    flex-shrink: 0;
}

.kb-row-title[b-byqi6bzyuk] {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-row-sub[b-byqi6bzyuk] {
    display: block;
    font-size: 12px;
    color: var(--rz-text-tertiary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-row-when[b-byqi6bzyuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--rz-text-tertiary-color);
    white-space: nowrap;
}

/* Pill de estado (handoff §10). */
.kb-pill[b-byqi6bzyuk] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
}

.kb-pill.is-pub[b-byqi6bzyuk] {
    background: color-mix(in srgb, var(--rz-success) 12%, transparent);
    color: var(--rz-success);
}

.kb-pill.is-draft[b-byqi6bzyuk] {
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
}

/* ── Resultados de búsqueda ────────────────────────────────────────────────── */
.kb-list[b-byqi6bzyuk] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    overflow: hidden;
}

.kb-list-row[b-byqi6bzyuk] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--rz-base-100);
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.kb-list-row:last-child[b-byqi6bzyuk] {
    border-bottom: 0;
}

.kb-list-row:hover[b-byqi6bzyuk] {
    background: var(--rz-base-50);
}

.kb-list-row[b-byqi6bzyuk]  .kb-row-icon {
    font-size: 16px;
    color: var(--rz-text-secondary-color);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Tarjetas de espacio (handoff §10) ─────────────────────────────────────── */
/* Contador de la pestana: pastilla gris a la derecha de la etiqueta. Sin esto el
   numero se pega al texto y se lee como parte del nombre ("Secciones1"). */
.kb-pivot-count[b-byqi6bzyuk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.kb-pivot.is-on .kb-pivot-count[b-byqi6bzyuk] {
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
}

/* Cabecera del bloque de espacios: titulo a la izquierda, resumen a la derecha. */
.kb-spaces-head[b-byqi6bzyuk] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 32px 0 12px;
}

.kb-spaces-meta[b-byqi6bzyuk] {
    font-size: 12px;
    color: var(--rz-text-tertiary-color);
}

.kb-space-head[b-byqi6bzyuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.kb-spaces[b-byqi6bzyuk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.kb-space[b-byqi6bzyuk] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    background: var(--rz-base-background-color);
    text-align: left;
    cursor: pointer;
}

.kb-space:hover[b-byqi6bzyuk] {
    box-shadow: var(--rz-shadow-2);
}

.kb-space[b-byqi6bzyuk]  .kb-space-icon {
    font-size: 22px;
    color: var(--rz-primary);
}

.kb-space-title[b-byqi6bzyuk] {
    font-size: 14px;
    font-weight: 600;
}

.kb-space-count[b-byqi6bzyuk] {
    font-size: 12px;
    color: var(--rz-text-tertiary-color);
}

/* ── Vacío ─────────────────────────────────────────────────────────────────── */
.kb-empty[b-byqi6bzyuk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    border: 1px dashed var(--rz-base-300);
    border-radius: 8px;
    color: var(--rz-text-tertiary-color);
}

.kb-empty p[b-byqi6bzyuk] {
    margin: 0;
    font-size: 14px;
}

.kb-empty[b-byqi6bzyuk]  .rz-icon,
.kb-empty[b-byqi6bzyuk]  .notranslate {
    font-size: 40px;
    opacity: 0.5;
}

/* Foco visible (handoff §12). */
.kb-ghost-row:focus-visible[b-byqi6bzyuk],
.kb-pivot:focus-visible[b-byqi6bzyuk],
.kb-trow:focus-visible[b-byqi6bzyuk],
.kb-list-row:focus-visible[b-byqi6bzyuk],
.kb-space:focus-visible[b-byqi6bzyuk] {
    outline: 2px solid var(--rz-primary);
    outline-offset: -2px;
}

/* Por debajo de 1024px el nav se oculta (lo gestiona el componente) y el
   contenido pasa a ocupar todo el ancho. */
@media (max-width: 1024px) {
    .kb-home[b-byqi6bzyuk] {
        grid-template-columns: 1fr;
    }

    .kb-main[b-byqi6bzyuk] {
        border-radius: 0;
        border-left: 0;
    }

    .kb-content[b-byqi6bzyuk] {
        padding: 16px;
    }
}
/* /Components/Pages/KnowledgeBase/KbMembersDialog.razor.rz.scp.css */
/* Estilos propios de KbMembersDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/kb/kb-settings-panel.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.kb-member-row[b-jr1eu087xh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    background: var(--rz-base-200);
}
/* /Components/Pages/KnowledgeBase/KbNewPageDialog.razor.rz.scp.css */
/* Diálogo de crear página o subsección — handoff §7.

   Los bloques `.kb-field`, `.kb-hint`, `.kb-required` y la rejilla de iconos son
   los MISMOS que en KbSettingsPanel.razor.css, y están repetidos a propósito: el
   CSS aislado de Blazor cuelga cada regla del `b-{hash}` de su componente, así
   que una hoja no alcanza el marcado de la otra. La alternativa —sacarlos a una
   hoja compartida— movería estilos que hoy sólo tocan el panel de ajustes y
   arriesgaría esa pantalla por ahorrar cuarenta líneas aquí. Si un día un tercer
   componente los necesita, ese es el momento de promoverlos.
   Fuente de la verdad visual: KbSettingsPanel.razor.css. */

.kb-new[b-yijqwzex3o] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kb-field[b-yijqwzex3o] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.kb-hint[b-yijqwzex3o] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--rz-text-secondary-color);
}

.kb-hint[b-yijqwzex3o]  .rz-icon,
.kb-hint[b-yijqwzex3o]  .notranslate {
    font-size: 15px;
    flex-shrink: 0;
    color: var(--rz-primary);
    margin-top: 1px;
}

.kb-required[b-yijqwzex3o] {
    font-size: 0.75rem;
    color: var(--rz-danger);
}

/* ── Ubicación ─────────────────────────────────────────────────────────────
   Es un dato, no un campo: se lee de dónde va a colgar la página y se sigue. */
.kb-new-location[b-yijqwzex3o] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-100);
    font-size: 0.85rem;
    color: var(--rz-text-primary-color);
}

.kb-new-location[b-yijqwzex3o]  .rz-icon,
.kb-new-location[b-yijqwzex3o]  .notranslate {
    font-size: 18px;
    color: var(--rz-primary);
}

/* ── Plantillas ────────────────────────────────────────────────────────────
   Cada opción lleva su descripción: sin ella hay que abrir las cinco para saber
   cuál es cuál, y se acaba eligiendo siempre la primera. */
.kb-new-templates[b-yijqwzex3o] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kb-new-template[b-yijqwzex3o] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-background-color);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.kb-new-template:hover[b-yijqwzex3o] {
    border-color: var(--rz-primary-light);
}

.kb-new-template.is-on[b-yijqwzex3o] {
    border-color: var(--rz-primary);
    background: var(--rz-primary-lighter);
}

.kb-new-template-name[b-yijqwzex3o] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rz-text-primary-color);
}

.kb-new-template-desc[b-yijqwzex3o] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* ── Toggle de sección ─────────────────────────────────────────────────────── */
.kb-new-toggle[b-yijqwzex3o] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* ── Rejilla de iconos: 9 columnas, «sin icono» primero ────────────────────── */
.kb-icon-grid[b-yijqwzex3o] {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 4px;
}

.kb-icon-tile[b-yijqwzex3o] {
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rz-base-300);
    border-radius: 4px;
    background: var(--rz-base-background-color);
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    padding: 0;
}

.kb-icon-tile:hover[b-yijqwzex3o] {
    border-color: var(--rz-primary-light);
    color: var(--rz-text-primary-color);
}

.kb-icon-tile.is-on[b-yijqwzex3o] {
    border-color: var(--rz-primary);
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
}

.kb-icon-tile[b-yijqwzex3o]  .rz-icon,
.kb-icon-tile[b-yijqwzex3o]  .notranslate {
    font-size: 18px;
}

/* ── Pie ───────────────────────────────────────────────────────────────────── */
.kb-new-footer[b-yijqwzex3o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rz-base-200);
}

.kb-new-owner[b-yijqwzex3o] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.kb-new-actions[b-yijqwzex3o] {
    display: flex;
    gap: 0.5rem;
}

/* En un teléfono el pie no cabe en una línea y los botones se salían. */
@media (max-width: 640px) {
    .kb-new-footer[b-yijqwzex3o] {
        flex-wrap: wrap;
    }

    .kb-new-actions[b-yijqwzex3o] {
        width: 100%;
        flex-wrap: wrap;
    }

    .kb-icon-grid[b-yijqwzex3o] {
        grid-template-columns: repeat(6, 1fr);
    }
}
/* /Components/Pages/KnowledgeBase/KbPageEditor.razor.rz.scp.css */
/* Estilos propios de KbPageEditor — CSS isolation.
   Vienen de wwwroot/css/kb/kb-page-editor.css, que se cargaba en TODAS las paginas del
   portal. Verificado antes de mover: todas sus clases van sobre HTML de este
   marcado, ningun otro componente las usa, y todo el color sale de tokens de
   theme.css — asi que sigue respondiendo al color primario del cliente y al
   modo oscuro igual que antes.
   ───────────────────────────────────────────────────────────────────────── */

/* `::deep` porque `kb-title-input` va sobre un <RadzenTextBox>, no sobre HTML:
   el compilador no le pone el `b-{hash}` a lo que pinta un componente, así que
   la regla acotada no casaría con nada y el foco del título perdería el borde.
   El ancla es el <div class="kb-title-field"> de este marcado. */
.kb-title-field[b-zx7hqnsxpa]  .kb-title-input:focus {
    outline: 2px solid var(--rz-primary);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.02);
}


/* ══ De wwwroot/css/kb/kb-page-inline-editor.css (tanda 2 de la migración) ══ */

/* TITLE - Confluence-style full-width prominent title with block highlighting */
[b-zx7hqnsxpa] .kb-title-input {
    font-size: 2.5rem;
    font-weight: 600;
    border: none;
    outline: none;
    width: 100%;
    padding: 0.5rem 12px;
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: 2rem;
    background: transparent;
    color: #172b4d;
    line-height: 1.2;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    letter-spacing: -0.01em;
    border-radius: 4px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

[b-zx7hqnsxpa] .kb-title-input::placeholder {
    color: #c1c7cf;
    font-weight: 500;
}

[b-zx7hqnsxpa] .kb-title-input:hover {
    background: rgba(9, 30, 66, 0.04);
}

[b-zx7hqnsxpa] .kb-title-input:focus {
    background: rgba(0, 82, 204, 0.08);
    box-shadow: -4px 0 0 0 #0052cc;
}

.kb-page.compact .kb-title[b-zx7hqnsxpa],
.kb-page.compact[b-zx7hqnsxpa]  .kb-title-input {
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
.kb-page.compact .kb-title[b-zx7hqnsxpa],
    .kb-page.compact[b-zx7hqnsxpa]  .kb-title-input {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/KnowledgeBase/KbPageInlineEditor.razor.rz.scp.css */
/* Estilos propios de KbPageInlineEditor — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/kb/kb-page-inline-editor.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.kb-page[b-5yvm8gox9w] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px);
    background: #fff;
}

/* TOP BAR - Confluence-style minimal header */
/* La barra de comandos (handoff §4) va ENCIMA del contenido y alineada con él:
   mismo contenedor de 1280px y mismo padding lateral. Antes ocupaba todo el ancho
   de la ventana mientras el contenido vivía en la rejilla centrada, así que la
   miga de pan empezaba ~200px a la izquierda del título. */
.kb-topbar[b-5yvm8gox9w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    padding: 0.75rem 40px;
    border-bottom: 1px solid #e1e4e8;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
}

.kb-breadcrumbs[b-5yvm8gox9w] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: #6b778c;
}

.kb-crumb[b-5yvm8gox9w] {
    color: #6b778c;
    text-decoration: none;
    transition: color 0.15s ease;
}

.kb-crumb:hover[b-5yvm8gox9w] { color: #0052cc; }

.kb-sep[b-5yvm8gox9w] { color: #dfe1e6; margin: 0 0.25rem; }

.kb-current[b-5yvm8gox9w] { color: #42526e; font-weight: 500; }

.kb-actions[b-5yvm8gox9w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* TOOLBAR - Confluence-style floating toolbar */
/* Cinta de formato — handoff §9: 44 px sobre fondo gris.

   Se recorre deslizando cuando no cabe. Sin eso, en un telefono los ultimos
   botones (tabla, IA) quedaban fuera de pantalla y ademas empujaban el shell de
   lado, porque el area de contenido del portal es `overflow-x: auto` y absorbe
   lo que le sobresalga: la pagina entera se movia al deslizar. */
.kb-toolbar[b-5yvm8gox9w] {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 44px;
    padding: 0 2rem;
    border-bottom: 1px solid #e1e4e8;
    background: #fafbfc;
    position: sticky;
    top: 49px;
    z-index: 99;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.kb-toolbar[b-5yvm8gox9w]::-webkit-scrollbar {
    display: none;
}

/* Nada se encoge: un boton estrujado a la mitad es peor que uno al que hay que
   deslizar para llegar. */
.kb-toolbar > *[b-5yvm8gox9w] {
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .kb-toolbar[b-5yvm8gox9w] {
        padding: 0 0.75rem;
    }
}

/* ── Linea de metadatos del lienzo (handoff §9) ─────────────────────────────
   Quien escribe necesita saber si lo que teclea lo esta viendo alguien mas. El
   estado de publicacion vivia solo en el boton de guardar, que esta arriba y
   fuera de la vista en cuanto se baja un poco. */
.kb-meta[b-5yvm8gox9w] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.85rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.kb-meta-sep[b-5yvm8gox9w] {
    opacity: 0.5;
}

.kb-meta-draft[b-5yvm8gox9w] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--rz-warning-lighter, #fff4e5);
    color: var(--rz-warning-dark, #8a5300);
    font-weight: 600;
}

/* ── Chips de bloque ────────────────────────────────────────────────────────
   Insertan un esqueleto, no prosa: el mismo criterio que las plantillas del §7. */
.kb-chips[b-5yvm8gox9w] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 1rem;
}

.kb-chip[b-5yvm8gox9w] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 4px 10px;
    border: 1px dashed var(--rz-base-300);
    border-radius: 999px;
    background: transparent;
    color: var(--rz-text-secondary-color);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.kb-chip:hover[b-5yvm8gox9w] {
    border-style: solid;
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.kb-chip[b-5yvm8gox9w]  .rz-icon,
.kb-chip[b-5yvm8gox9w]  .notranslate {
    font-size: 15px;
}

.kb-tb-btn[b-5yvm8gox9w] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: #42526e;
    font-size: 0.875rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.kb-tb-btn:hover[b-5yvm8gox9w] { background: #e4e6eb; }

.kb-tb-btn.kb-tb-ai[b-5yvm8gox9w] { color: var(--rz-primary); }

.kb-tb-btn.kb-tb-ai:hover[b-5yvm8gox9w] { background: var(--rz-primary-lighter); }

.kb-tb-btn.kb-tb-loading[b-5yvm8gox9w] { cursor: wait; opacity: 0.7; }

.kb-tb-btn[disabled][b-5yvm8gox9w] { opacity: 0.5; cursor: not-allowed; }

.kb-tb-loading[b-5yvm8gox9w]  .rz-icon { animation: kb-spin-b-5yvm8gox9w 1s linear infinite; }

.kb-tb-sep[b-5yvm8gox9w] { width: 1px; height: 20px; background: #dfe1e6; margin: 0 6px; }

.kb-tb-select[b-5yvm8gox9w] {
    height: 32px;
    padding: 0 6px;
    border: 1px solid #dfe1e6;
    border-radius: 4px;
    background: transparent;
    color: #42526e;
    font-size: 0.8rem;
    cursor: pointer;
    outline: none;
}

.kb-tb-select:hover[b-5yvm8gox9w] { border-color: #b3b9c4; }

.kb-tb-select:focus[b-5yvm8gox9w] { border-color: var(--rz-primary); }

/* Rejilla del handoff §5: [contenido 1fr][carril 232px], gap 48px, contenedor
   máx. 1280px. Sin carril (editando, o con menos de dos encabezados) la columna
   de contenido se queda sola y centrada, como estaba. */
.kb-layout[b-5yvm8gox9w] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}

.kb-layout.with-toc[b-5yvm8gox9w] {
    grid-template-columns: minmax(0, 1fr) 232px;
}

/* Por debajo de 1240px el carril fluye bajo el contenido (handoff §5). */
@media (max-width: 1240px) {
    .kb-layout.with-toc[b-5yvm8gox9w] {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

/* Movil: 40px de padding a cada lado en una pantalla de 390 dejan la columna de
   lectura en 256px — mas margen que texto. Se baja a 16 y la columna pasa a ~358. */
@media (max-width: 600px) {
    .kb-layout[b-5yvm8gox9w] {
        padding: 0 16px;
        gap: 16px;
    }

    .kb-topbar[b-5yvm8gox9w] {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* CONTENT AREA - Confluence-style wide layout */
.kb-content-area[b-5yvm8gox9w] {
    max-width: 820px;
    margin: 0;
    padding: 2.5rem 0 4rem;
    width: 100%;
}

/* ── Carril del índice ─────────────────────────────────────────────────────── */
.kb-toc[b-5yvm8gox9w] {
    position: sticky;
    top: 88px;
    align-self: start;
    padding: 2.5rem 0 2rem;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.kb-toc-title[b-5yvm8gox9w] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rz-text-tertiary-color);
    margin-bottom: 8px;
}

.kb-toc-list[b-5yvm8gox9w] {
    display: flex;
    flex-direction: column;
}

/* Borde izquierdo de 2px: es el riel del carril y a la vez el marcador del activo,
   así que la posición del texto no cambia al resaltarse. */
.kb-toc-link[b-5yvm8gox9w] {
    display: block;
    padding: 6px 0 6px 12px;
    border-left: 2px solid var(--rz-base-300);
    font-size: 13px;
    line-height: 1.35;
    color: var(--rz-text-secondary-color);
    text-decoration: none;
}

.kb-toc-link:hover[b-5yvm8gox9w] {
    color: var(--rz-text-primary-color);
    border-left-color: var(--rz-base-400);
}

.kb-toc-link.is-active[b-5yvm8gox9w] {
    color: var(--rz-primary);
    border-left-color: var(--rz-primary);
    font-weight: 600;
}

/* Jerarquía del índice: sangría por nivel, sin cambiar el tamaño de letra. */
.kb-toc-l2[b-5yvm8gox9w] { padding-left: 22px; }
.kb-toc-l3[b-5yvm8gox9w] { padding-left: 32px; }

@media (max-width: 1240px) {
    .kb-toc[b-5yvm8gox9w] {
        position: static;
        max-height: none;
        padding-top: 0;
    }
}

[b-5yvm8gox9w] .kb-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0 0 2rem 0;
    color: #172b4d;
    cursor: text;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

[b-5yvm8gox9w] .kb-title:empty::before {
    content: attr(data-placeholder);
    color: #a5adba;
    font-style: italic;
}

.kb-icon[b-5yvm8gox9w] { margin-right: 0.75rem; }

/* EDITOR - Confluence-style block highlighting */
.kb-editor[b-5yvm8gox9w] {
    min-height: 500px;
    outline: none;
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #172b4d;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

.kb-editor:empty[b-5yvm8gox9w]::before {
    content: "Comienza a escribir o usa / para comandos...";
    color: #b3bac5;
    font-style: italic;
}

.kb-editor:focus[b-5yvm8gox9w] {
    outline: none;
}

/* Confluence-style block highlighting on hover and focus */
.kb-editor[b-5yvm8gox9w]  p,
.kb-editor[b-5yvm8gox9w]  h1,
.kb-editor[b-5yvm8gox9w]  h2,
.kb-editor[b-5yvm8gox9w]  h3,
.kb-editor[b-5yvm8gox9w]  h4,
.kb-editor[b-5yvm8gox9w]  ul,
.kb-editor[b-5yvm8gox9w]  ol,
.kb-editor[b-5yvm8gox9w]  blockquote,
.kb-editor[b-5yvm8gox9w]  pre {
    position: relative;
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 4px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.kb-editor[b-5yvm8gox9w]  p:hover,
.kb-editor[b-5yvm8gox9w]  h1:hover,
.kb-editor[b-5yvm8gox9w]  h2:hover,
.kb-editor[b-5yvm8gox9w]  h3:hover,
.kb-editor[b-5yvm8gox9w]  h4:hover,
.kb-editor[b-5yvm8gox9w]  ul:hover,
.kb-editor[b-5yvm8gox9w]  ol:hover,
.kb-editor[b-5yvm8gox9w]  blockquote:hover,
.kb-editor[b-5yvm8gox9w]  pre:hover {
    background: rgba(9, 30, 66, 0.04);
}

.kb-editor[b-5yvm8gox9w]  p:focus,
.kb-editor[b-5yvm8gox9w]  h1:focus,
.kb-editor[b-5yvm8gox9w]  h2:focus,
.kb-editor[b-5yvm8gox9w]  h3:focus,
.kb-editor[b-5yvm8gox9w]  h4:focus,
.kb-editor[b-5yvm8gox9w]  ul:focus,
.kb-editor[b-5yvm8gox9w]  ol:focus,
.kb-editor[b-5yvm8gox9w]  blockquote:focus,
.kb-editor[b-5yvm8gox9w]  pre:focus {
    outline: none;
    background: rgba(0, 82, 204, 0.08);
    box-shadow: -4px 0 0 0 #0052cc;
}

.kb-editor[b-5yvm8gox9w]  p { margin-bottom: 1rem; }

.kb-editor[b-5yvm8gox9w]  h1, .kb-editor[b-5yvm8gox9w]  h2, .kb-editor[b-5yvm8gox9w]  h3, .kb-editor[b-5yvm8gox9w]  h4 { margin: 2rem 0 1rem; font-weight: 600; }

.kb-editor[b-5yvm8gox9w]  h1 { font-size: 1.875rem; }

.kb-editor[b-5yvm8gox9w]  h2 { font-size: 1.5rem; border-bottom: 1px solid #e1e4e8; padding-bottom: 0.5rem; }

.kb-editor[b-5yvm8gox9w]  h3 { font-size: 1.25rem; }

.kb-editor[b-5yvm8gox9w]  h4 { font-size: 1.125rem; }

.kb-editor[b-5yvm8gox9w]  ul, .kb-editor[b-5yvm8gox9w]  ol { margin-bottom: 1rem; padding-left: 2rem; }

.kb-editor[b-5yvm8gox9w]  li { margin-bottom: 0.25rem; }

.kb-editor[b-5yvm8gox9w]  a { color: #0052cc; text-decoration: none; }

.kb-editor[b-5yvm8gox9w]  a:hover { text-decoration: underline; }

.kb-editor[b-5yvm8gox9w]  img { max-width: 100%; border-radius: 4px; margin: 1rem 0; }

.kb-editor[b-5yvm8gox9w]  blockquote {
    border-left: 3px solid #0052cc;
    background: #f4f5f7;
    padding: 0.75rem 1rem 0.75rem 1rem !important;
    margin: 1rem -12px;
    font-style: italic;
    color: #5e6c84;
}

.kb-editor[b-5yvm8gox9w]  code {
    background: #f4f5f7;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.875em;
    font-family: "SFMono-Regular", Consolas, monospace;
    color: #d63384;
}

.kb-editor[b-5yvm8gox9w]  pre {
    background: #1e1e1e !important;
    color: #d4d4d4;
    padding: 1rem 1.25rem !important;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1rem -12px;
}

.kb-editor[b-5yvm8gox9w]  pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* VIEW MODE CONTENT - Confluence-style readable typography */
.kb-content[b-5yvm8gox9w] {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #172b4d;
    cursor: text;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

.kb-content.kb-empty[b-5yvm8gox9w] { min-height: 200px; }

[b-5yvm8gox9w] .kb-placeholder { color: #a5adba; font-style: italic; }

.kb-content[b-5yvm8gox9w]  h1, .kb-content[b-5yvm8gox9w]  h2, .kb-content[b-5yvm8gox9w]  h3, .kb-content[b-5yvm8gox9w]  h4 { margin: 2rem 0 1rem; font-weight: 600; }

.kb-content[b-5yvm8gox9w]  h1 { font-size: 1.875rem; }

.kb-content[b-5yvm8gox9w]  h2 { font-size: 1.5rem; border-bottom: 1px solid #e1e4e8; padding-bottom: 0.5rem; }

.kb-content[b-5yvm8gox9w]  h3 { font-size: 1.25rem; }

.kb-content[b-5yvm8gox9w]  h4 { font-size: 1.125rem; }

.kb-content[b-5yvm8gox9w]  p { margin-bottom: 1rem; }

.kb-content[b-5yvm8gox9w]  ul, .kb-content[b-5yvm8gox9w]  ol { margin-bottom: 1rem; padding-left: 2rem; }

.kb-content[b-5yvm8gox9w]  li { margin-bottom: 0.25rem; }

.kb-content[b-5yvm8gox9w]  a { color: #0052cc; text-decoration: none; }

.kb-content[b-5yvm8gox9w]  a:hover { text-decoration: underline; }

.kb-content[b-5yvm8gox9w]  img { max-width: 100%; border-radius: 4px; margin: 1rem 0; }

.kb-content[b-5yvm8gox9w]  blockquote {
    border-left: 3px solid #0052cc;
    background: #f4f5f7;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: #5e6c84;
}

.kb-content[b-5yvm8gox9w]  code { background: #f4f5f7; padding: 2px 6px; border-radius: 3px; font-size: 0.875em; font-family: "SFMono-Regular", Consolas, monospace; color: #d63384; }

.kb-content[b-5yvm8gox9w]  pre { background: #1e1e1e; color: #d4d4d4; padding: 1rem 1.25rem; border-radius: 6px; overflow-x: auto; margin: 1rem 0; }

.kb-content[b-5yvm8gox9w]  pre code { background: transparent; color: inherit; padding: 0; }

.kb-content[b-5yvm8gox9w]  table { width: 100%; border-collapse: collapse; margin: 1rem 0; }

.kb-content[b-5yvm8gox9w]  th, .kb-content[b-5yvm8gox9w]  td { border: 1px solid #dfe1e6; padding: 0.75rem; text-align: left; }

.kb-content[b-5yvm8gox9w]  th { background: #f4f5f7; font-weight: 600; }

.kb-content[b-5yvm8gox9w]  tr:hover { background: rgba(9, 30, 66, 0.04); }

/* CHILDREN */
.kb-children[b-5yvm8gox9w] {
    border-top: 1px solid #e1e4e8;
    margin-top: 3rem;
    padding-top: 2rem;
}

.kb-child[b-5yvm8gox9w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    color: #172b4d;
    text-decoration: none;
}

.kb-child:hover[b-5yvm8gox9w] { color: #0052cc; }

/* PULSE ANIMATION for new section members button */
.kb-pulse-button[b-5yvm8gox9w] {
    animation: kb-pulse-b-5yvm8gox9w 1.5s ease-in-out infinite;
}

.kb-page.compact[b-5yvm8gox9w] {
    min-height: auto;
}

.kb-page.compact .kb-topbar[b-5yvm8gox9w],
.kb-page.compact .kb-toolbar[b-5yvm8gox9w] {
    position: static;
}

.kb-page.compact .kb-topbar[b-5yvm8gox9w] {
    padding: 0.875rem 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
}

.kb-page.compact .kb-breadcrumbs[b-5yvm8gox9w] {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 0.125rem;
}

.kb-page.compact .kb-actions[b-5yvm8gox9w] {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.kb-page.compact .kb-toolbar[b-5yvm8gox9w] {
    padding: 0.5rem 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.kb-page.compact .kb-content-area[b-5yvm8gox9w] {
    max-width: 100%;
    padding: 1rem 1rem 2rem;
}

.kb-page.compact[b-5yvm8gox9w]  .kb-title,
.kb-page.compact[b-5yvm8gox9w]  .kb-title-input {
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
}

.kb-page.compact .kb-content[b-5yvm8gox9w],
.kb-page.compact .kb-editor[b-5yvm8gox9w] {
    font-size: 1rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.kb-page.compact .kb-editor[b-5yvm8gox9w] {
    min-height: 55dvh;
}

.kb-page.compact .kb-editor[b-5yvm8gox9w]  p,
.kb-page.compact .kb-editor[b-5yvm8gox9w]  h1,
.kb-page.compact .kb-editor[b-5yvm8gox9w]  h2,
.kb-page.compact .kb-editor[b-5yvm8gox9w]  h3,
.kb-page.compact .kb-editor[b-5yvm8gox9w]  h4,
.kb-page.compact .kb-editor[b-5yvm8gox9w]  ul,
.kb-page.compact .kb-editor[b-5yvm8gox9w]  ol,
.kb-page.compact .kb-editor[b-5yvm8gox9w]  blockquote,
.kb-page.compact .kb-editor[b-5yvm8gox9w]  pre {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.kb-page.compact .kb-editor[b-5yvm8gox9w]  blockquote,
.kb-page.compact .kb-editor[b-5yvm8gox9w]  pre {
    margin: 1rem 0;
}

.kb-page.compact .kb-content[b-5yvm8gox9w]  table,
.kb-page.compact .kb-editor[b-5yvm8gox9w]  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.kb-page.compact .kb-content[b-5yvm8gox9w]  img,
.kb-page.compact .kb-editor[b-5yvm8gox9w]  img {
    height: auto;
}

.kb-page.compact .kb-children[b-5yvm8gox9w] {
    margin-top: 2rem;
    padding-top: 1.25rem;
}

@media (max-width: 768px) {
.kb-page.compact .kb-actions[b-5yvm8gox9w]  .rz-button {
        min-height: 36px;
    }

.kb-page.compact[b-5yvm8gox9w]  .kb-title,
    .kb-page.compact[b-5yvm8gox9w]  .kb-title-input {
        font-size: 1.5rem;
    }
}

@keyframes kb-spin-b-5yvm8gox9w { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@keyframes kb-pulse-b-5yvm8gox9w {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 82, 204, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(0, 82, 204, 0); }
}

/* ── Contenido ancho en pantalla estrecha ──────────────────────────────────── */
/* Tablas y bloques de codigo son lo unico del cuerpo que no encoge: una tabla de
   dos columnas con parametros se sale de la columna de lectura y, como la pagina
   no hace scroll horizontal, lo que sobra queda cortado. Cada uno hace scroll en
   su propia caja, que es la regla del proyecto para contenido ancho. */
@media (max-width: 900px) {
    .kb-content[b-5yvm8gox9w]  table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .kb-content[b-5yvm8gox9w]  pre {
        overflow-x: auto;
    }

    .kb-content[b-5yvm8gox9w]  img {
        max-width: 100%;
        height: auto;
    }
}
/* /Components/Pages/KnowledgeBase/KbPeopleStack.razor.rz.scp.css */
/* Pila de personas + contador de lecturas (CAMBIOS-2026-08-18 §1).
   ─────────────────────────────────────────────────────────────────────────────
   Las dos piezas van en la zona derecha de la barra y NUNCA deben empujar los
   botones fuera: por eso `flex-shrink: 0` aquí y ellipsis en las migas, que son
   las que ceden ancho. */

.pplstack[b-qr35a0mdfi] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 4px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* Solapadas -7px con anillo blanco: el anillo es lo que separa un avatar del
   siguiente sin necesidad de hueco. */
.pplstack-av[b-qr35a0mdfi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: -7px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--rz-base-background-color, #fff);
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

.pplstack-av:first-child[b-qr35a0mdfi] {
    margin-left: 0;
}

.pplstack-av.is-more[b-qr35a0mdfi] {
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
}

.pplstack:hover .pplstack-av[b-qr35a0mdfi] {
    box-shadow: 0 0 0 2px var(--rz-base-100);
}

.pplstack:focus-visible[b-qr35a0mdfi] {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
    border-radius: 99px;
}

/* Contador de lecturas: es un dato, no un control. Ni cursor de mano ni hover. */
.vmeter[b-qr35a0mdfi] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 0 8px 0 4px;
    font-size: 12.5px;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

.vmeter[b-qr35a0mdfi]  .rz-icon,
.vmeter[b-qr35a0mdfi]  .notranslate {
    font-size: 15px;
}
/* /Components/Pages/KnowledgeBase/KbSettingsPanel.razor.rz.scp.css */
/* Panel de ajustes de la wiki — handoff §6.
   ─────────────────────────────────────────────────────────────────────────────
   Una sola columna: el panel antiguo era de dos (ajustes | personas) y por eso
   necesitaba 520px. El handoff lo baja a 388px y pone las personas al final,
   dentro del bloque «Es sección», que es de donde dependen.

   Todo el color sale de tokens. Lo literal son geometrías (388px, rejilla de 9)
   que no cambian con el tema del cliente.
   ───────────────────────────────────────────────────────────────────────────── */

.kb-panel[b-u6xv81fm48] {
    display: flex;
    flex-direction: column;
    /* El drawer de Radzen ya acota el ancho; aquí sólo se ocupa el alto para que
       el pie quede pegado abajo aunque el contenido sea corto. */
    height: 100%;
    min-height: 0;
}

.kb-panel-body[b-u6xv81fm48] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 1rem;
}

.kb-field[b-u6xv81fm48] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* ── Ayuda semántica ───────────────────────────────────────────────────────── */
/* El icono no se encoge y el texto respira: es la explicación de por qué la
   descripción es obligatoria, así que tiene que leerse, no decorar. */
.kb-hint[b-u6xv81fm48] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--rz-text-secondary-color);
}

.kb-hint[b-u6xv81fm48]  .rz-icon,
.kb-hint[b-u6xv81fm48]  .notranslate {
    font-size: 15px;
    flex-shrink: 0;
    color: var(--rz-primary);
    margin-top: 1px;
}

.kb-required[b-u6xv81fm48] {
    font-size: 0.75rem;
    color: var(--rz-danger);
}

.kb-sub[b-u6xv81fm48] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* ── Rejilla de iconos: 9 columnas, «sin icono» primero ────────────────────── */
.kb-icon-grid[b-u6xv81fm48] {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 4px;
}

.kb-icon-tile[b-u6xv81fm48] {
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rz-base-300);
    border-radius: 4px;
    background: var(--rz-base-background-color);
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    padding: 0;
}

.kb-icon-tile:hover[b-u6xv81fm48] {
    border-color: var(--rz-primary-light);
    color: var(--rz-text-primary-color);
}

.kb-icon-tile.is-on[b-u6xv81fm48] {
    border-color: var(--rz-primary);
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
}

.kb-icon-tile[b-u6xv81fm48]  .rz-icon,
.kb-icon-tile[b-u6xv81fm48]  .notranslate {
    font-size: 18px;
}

/* ── Es sección + personas ─────────────────────────────────────────────────── */
.kb-toggle-row[b-u6xv81fm48] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 6px;
    background: var(--rz-base-50);
}

/* Bloqueado, no oculto: el handoff quiere que se vea qué falta para desbloquearlo. */
.kb-locked[b-u6xv81fm48] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px dashed var(--rz-base-300);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--rz-text-tertiary-color);
}

.kb-locked[b-u6xv81fm48]  .rz-icon,
.kb-locked[b-u6xv81fm48]  .notranslate {
    font-size: 16px;
}

.kb-people[b-u6xv81fm48] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kb-person[b-u6xv81fm48] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.25rem;
    border-radius: 4px;
}

.kb-person:hover[b-u6xv81fm48] {
    background: var(--rz-base-100);
}

.kb-av[b-u6xv81fm48] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kb-av-ini[b-u6xv81fm48] {
    background: var(--rz-primary);
    color: var(--rz-on-primary);
    font-size: 0.7rem;
    font-weight: 600;
}

.kb-av-group[b-u6xv81fm48] {
    background: var(--rz-base-300);
    color: var(--rz-text-secondary-color);
}

.kb-person-info[b-u6xv81fm48] {
    flex: 1 1 auto;
    min-width: 0;
}

.kb-person-name[b-u6xv81fm48] {
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-person-mail[b-u6xv81fm48],
.kb-person-inherited[b-u6xv81fm48] {
    font-size: 0.7rem;
    color: var(--rz-text-tertiary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-person-inherited[b-u6xv81fm48] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.kb-person-inherited[b-u6xv81fm48]  .rz-icon,
.kb-person-inherited[b-u6xv81fm48]  .notranslate {
    font-size: 13px;
}

.kb-role-fixed[b-u6xv81fm48] {
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 99px;
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* Enlace, no botón con caja: en el handoff es «Añadir personas» a secas. */
.kb-add-people[b-u6xv81fm48] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
    padding: 0.375rem 0.25rem;
    border: 0;
    background: transparent;
    color: var(--rz-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    align-self: flex-start;
}

.kb-add-people:hover[b-u6xv81fm48] {
    text-decoration: underline;
}

.kb-add-people[b-u6xv81fm48]  .rz-icon,
.kb-add-people[b-u6xv81fm48]  .notranslate {
    font-size: 16px;
}

/* ── Pie fijo ──────────────────────────────────────────────────────────────── */
.kb-panel-foot[b-u6xv81fm48] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rz-base-200);
    background: var(--rz-base-background-color);
}

/* Foco visible en todo control accionable (handoff §12). */
.kb-icon-tile:focus-visible[b-u6xv81fm48],
.kb-add-people:focus-visible[b-u6xv81fm48] {
    outline: 2px solid var(--rz-primary);
    outline-offset: 1px;
}

/* ── Herencia de personas (CAMBIOS-2026-08-18 §2) ──────────────────────────── */
/* La fila del toggle se separa de la lista para que se lea como lo que es: el
   interruptor que decide qué enseña la lista de abajo. */
.kb-inherit-row[b-u6xv81fm48] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rz-base-200);
}

/* Heredando, la lista es de sólo lectura: se atenúa lo justo para que se note sin
   volverse ilegible. */
.kb-people.is-readonly .kb-person[b-u6xv81fm48] {
    opacity: 0.85;
}

.kb-pill-inherited[b-u6xv81fm48] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
/* /Components/Pages/KnowledgeBase/KbTreeNode.razor.rz.scp.css */
/* Fila del árbol de la wiki — handoff §3.
   ─────────────────────────────────────────────────────────────────────────────
   Medidas del handoff mapeadas a tokens del tema (regla nº2: los valores en crudo
   del documento son para reproducir el diseño, no para hardcodear color por
   segunda vez). Lo único literal son las medidas geométricas —36px de alto, 12px
   de sangría, 3px de acento—, que no dependen del tema del cliente.

   `::deep` en lo que pinta RadzenIcon: el icono es un componente, así que no
   recibe el b-hash (la lección de esta misma migración: KbPageEditor, el
   organigrama, el scheduler de RRHH). El ancla es .wk-row, que sí es HTML de
   este marcado.
   ───────────────────────────────────────────────────────────────────────────── */

.wk-node[b-h2iqzumguv] {
    /* Sangría por nivel = ancho del icono (16px) + hueco (8px). Ese valor no es
       decorativo: hace que el icono de un hijo caiga EXACTAMENTE bajo la primera
       letra de su padre, que es como se lee la jerarquía de un vistazo. Con los
       12px sueltos del handoff los iconos quedaban a medio camino, ni bajo el
       icono ni bajo el texto, y el árbol parecía descuadrado.
       --wk-icon marca dónde está el centro del icono, que es de donde cuelga la
       línea guía del grupo hijo. */
    --wk-icon: 16px;
    --wk-gap: 8px;
    --wk-indent: calc(var(--wk-icon) + var(--wk-gap));
}

.wk-row[b-h2iqzumguv] {
    position: relative;               /* ancla de las acciones absolutas */
    display: flex;
    align-items: center;
    gap: 10px;
    /* min-height, no height: con el título a dos líneas una altura fija recortaba la
       segunda. Las filas de una línea siguen midiendo exactamente 36. */
    min-height: 36px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 4px;
    padding-left: calc(var(--wk-depth, 0) * var(--wk-indent));
    border-radius: 4px;
    font-size: 14px;
    color: var(--rz-text-primary-color);
    cursor: default;
}

.wk-row:hover[b-h2iqzumguv] {
    background: var(--rz-base-200);
}

/* Seleccionada: tinte de marca, texto de marca, peso 600 y barra de acento de
   3px pegada al borde izquierdo. La barra es un ::before y no un border-left
   porque un borde desplazaría el contenido 3px al seleccionar. */
.wk-row.is-selected[b-h2iqzumguv] {
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    font-weight: 600;
}

.wk-row.is-selected[b-h2iqzumguv]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--rz-primary);
}

/* ── Chevron ───────────────────────────────────────────────────────────────── */
.wk-chev[b-h2iqzumguv] {
    /* A la derecha de la fila (handoff §3). Antes abría la fila por la izquierda y
       comía 20px de sangría en cada nivel, con lo que la jerarquía se leía peor
       justo donde más falta hace: en los niveles 3 y 4. */
    flex: 0 0 auto;
    margin-left: auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rz-text-tertiary-color);
    cursor: pointer;
    border-radius: 3px;
}

.wk-row.is-open .wk-chev[b-h2iqzumguv]  .rz-icon,
.wk-row.is-open .wk-chev[b-h2iqzumguv]  .notranslate {
    transform: rotate(180deg);
}

.wk-chev[b-h2iqzumguv]  .rz-icon,
.wk-chev[b-h2iqzumguv]  .notranslate {
    font-size: 16px;
    transition: transform 0.15s ease;
}

/* ── Etiqueta ──────────────────────────────────────────────────────────────── */
/* `min-width: 0` es lo que permite que el ellipsis funcione dentro de un flex:
   sin él, el botón se niega a encoger por debajo de su contenido y el texto
   empuja las acciones fuera de la fila. */
.wk-label[b-h2iqzumguv] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* El título se lee ENTERO. El carril más ancho resuelve la mayoría, pero un título
   largo en el nivel 4 sigue sin caber en una línea, y ahí los puntos suspensivos
   dejaban filas indistinguibles entre sí ("BIOT · Referen…" / "BIOT · Refresc…").
   Dos líneas como techo: con una no cabe y sin techo un título kilométrico
   convierte la fila en un párrafo. */
.wk-text[b-h2iqzumguv] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.wk-label[b-h2iqzumguv]  .wk-icon {
    font-size: 16px;
    flex-shrink: 0;
    color: var(--rz-text-secondary-color);
}

.wk-row.is-selected .wk-label[b-h2iqzumguv]  .wk-icon {
    color: var(--rz-primary);
}

/* ── Punto de revisión vencida ─────────────────────────────────────────────── */
.wk-dot[b-h2iqzumguv] {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rz-warning);
}

/* ── Acciones de fila ──────────────────────────────────────────────────────── */
/* Absolutas: nunca restan ancho a la etiqueta (handoff §3). El degradado por
   debajo evita que el texto largo se lea "por detrás" de los iconos. */
.wk-actions[b-h2iqzumguv] {
    position: absolute;
    right: 2px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    /* El degradado tiene que ser MAS ANCHO que el hueco entre iconos, si no el
       titulo asoma por los huecos y se lee mezclado con ellos. */
    padding-left: 28px;
    visibility: hidden;
    background: linear-gradient(to right, transparent, var(--rz-base-200) 28px);
    /* La banda NO captura clics; sólo sus botones (ver .wk-act más abajo).
       Como es absoluta y se extiende de arriba abajo de la fila, con el puntero
       encima se volvía visible y se quedaba con los clics que caían sobre la
       MITAD DERECHA DEL TÍTULO: el usuario apuntaba al nombre de la página y no
       pasaba nada, porque el clic aterrizaba en el degradado. Cuanto más largo el
       título, más superficie perdía. Es la mitad del "no todos son clicables". */
    pointer-events: none;
}

.wk-actions .wk-act[b-h2iqzumguv] {
    pointer-events: auto;
}

/* Las acciones se apartan del chevron en vez de montarse encima.

   El diseno original las ponia deliberadamente sobre esa esquina, y el resultado
   era que al apuntar a una rama desaparecia el unico control para plegarla:
   justo cuando el puntero esta en la fila, que es cuando vas a usarlo. Ademas el
   boton de "mas acciones" caia exactamente sobre el chevron y se leia como dos
   controles pisandose.

   Solo se aparta cuando hay chevron: en una hoja no hay nada debajo y dejar el
   hueco reservado descuadraria la columna de iconos. */
.wk-row:has(.wk-chev) .wk-actions[b-h2iqzumguv] {
    right: 26px;
}

.wk-row:hover .wk-actions[b-h2iqzumguv],
.wk-row.is-selected .wk-actions[b-h2iqzumguv],
.wk-actions:focus-within[b-h2iqzumguv] {
    visibility: visible;
}

.wk-row.is-selected .wk-actions[b-h2iqzumguv] {
    background: linear-gradient(to right, transparent, var(--rz-primary-lighter) 28px);
}

.wk-act[b-h2iqzumguv] {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
}

.wk-act:hover[b-h2iqzumguv] {
    background: var(--rz-base-300);
    color: var(--rz-text-primary-color);
}

.wk-act[b-h2iqzumguv]  .rz-icon,
.wk-act[b-h2iqzumguv]  .notranslate {
    font-size: 14px;
}

/* Foco visible en todo control accionable (handoff §12). */
.wk-chev:focus-visible[b-h2iqzumguv],
.wk-label:focus-visible[b-h2iqzumguv],
.wk-act:focus-visible[b-h2iqzumguv] {
    outline: 2px solid var(--rz-primary);
    outline-offset: -2px;
    border-radius: 3px;
}

/* ── Grupo hijo ────────────────────────────────────────────────────────────── */
/* El hairline se dibuja a la izquierda del grupo, alineado con el chevron del
   padre. `left` se calcula con la misma variable de sangría para que no haya dos
   sitios que ajustar si cambia. */
.wk-children[b-h2iqzumguv] {
    position: relative;
}

.wk-children[b-h2iqzumguv]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    /* Centro del icono del PADRE: su sangría + medio icono. Así la línea nace bajo
       el icono del que cuelga el grupo, no pegada al texto del hijo. */
    left: calc(var(--wk-depth, 0) * var(--wk-indent) + (var(--wk-icon) / 2));
    width: 1px;
    background: var(--rz-base-300);
}
/* /Components/Pages/Licenses/CustomerConsumptionDashboard.razor.rz.scp.css */
/* CRÍTICO — crear CustomerConsumptionDashboard.razor.css Y envolver el RadzenPivotDataGrid
   (linea ~383) en <div class="consumption-pivot-host"> (patron LinkToHoldedDialog):
   sin el div ancla, nada de este fichero casara jamas.
   Vienen de wwwroot/css/commerce/customer-consumption-dashboard.css (gemela
   byte a byte de admin/consumption-analytics.css; cada pagina su copia). */

.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid .rz-pivot-data-grid-table {
    width: 100%;
    table-layout: fixed;
}

.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid .rz-pivot-data-grid-table th,
.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid .rz-pivot-data-grid-table td {
    padding: 0.25rem 0.35rem;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid .rz-pivot-data-grid-table th,
.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid .rz-pivot-data-grid-table td,
.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid .rz-pivot-data-grid-table .rz-cell-data {
    white-space: nowrap;
}

.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid .rz-pivot-data-grid-table th[scope="col"] {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
}

.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid .rz-pivot-row-header.rz-frozen-cell-left-end,
.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid .rz-pivot-footer-header.rz-frozen-cell-left-end {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    inset-inline-start: 0 !important;
}

.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid .rz-pivot-row-header.rz-frozen-cell-left:not(.rz-frozen-cell-left-end),
.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid .rz-pivot-footer-header.rz-frozen-cell-left:not(.rz-frozen-cell-left-end) {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    inset-inline-start: 140px !important;
}

.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid .rz-pivot-row-header .rz-pivot-header-text,
.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid .rz-pivot-row-header,
.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid .rz-pivot-footer-header {
    overflow: hidden;
    text-overflow: ellipsis;
}

.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid .rz-pivot-total-cell.rz-frozen-cell-right,
.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid .rz-pivot-footer-total.rz-frozen-cell-right,
.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid th.rz-frozen-cell-right {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    inset-inline-end: 0 !important;
}

.consumption-pivot-host[b-gt29iet2em]  .consumption-pivot-grid .pivot-aggregate-header {
    display: inline-block;
    width: 100%;
    min-height: 1px;
}
/* /Components/Pages/Licenses/IncreaseLicensesDialog.razor.rz.scp.css */
/* Estilos propios de IncreaseLicensesDialog — CSS isolation.
   Vienen de wwwroot/css/commerce/increase-licenses-dialog.css.

   En la mudanza se han sustituido 3 colores escritos a pelo por sus tokens de
   theme.css. No es cosmetica: un #e9ecef no sabe que el cliente ha cambiado su
   color primario desde la UI, y en modo oscuro se queda gris claro sobre fondo
   oscuro. Los equivalentes se han elegido por cercania en la escala neutra
   (#f8f9fa~base-50, #e9ecef~base-200, #8c96a3~text-secondary...), no a ojo.
   ───────────────────────────────────────────────────────────────────────── */

/* IncreaseLicensesDialog styles */
.license-dialog-header[b-0qdvyb3c4s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.license-dialog-logo[b-0qdvyb3c4s] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--rz-base-50);
    flex-shrink: 0;
}
.license-dialog-logo-placeholder[b-0qdvyb3c4s] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* /Components/Pages/Licenses/LicenseDetailDialog.razor.rz.scp.css */
/* Estilos propios de LicenseDetailDialog — CSS isolation.
   Vienen de wwwroot/css/commerce/license-detail-dialog.css.

   En la mudanza se han sustituido 1 colores escritos a pelo por sus tokens de
   theme.css. No es cosmetica: un #e9ecef no sabe que el cliente ha cambiado su
   color primario desde la UI, y en modo oscuro se queda gris claro sobre fondo
   oscuro. Los equivalentes se han elegido por cercania en la escala neutra
   (#f8f9fa~base-50, #e9ecef~base-200, #8c96a3~text-secondary...), no a ojo.
   ───────────────────────────────────────────────────────────────────────── */

/* LicenseDetailDialog styles */
.license-detail-header[b-aw1luon7dx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--rz-base-100), transparent);
    border-radius: 10px;
    border-left: 3px solid var(--rz-primary);
}
.license-detail-logo[b-aw1luon7dx] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 10px;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    padding: 3px;
    flex-shrink: 0;
}
.license-detail-logo-placeholder[b-aw1luon7dx] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--rz-primary-lighter), var(--rz-base-200));
    color: var(--rz-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.license-detail-section[b-aw1luon7dx] {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rz-base-200);
}
.license-detail-section:last-child[b-aw1luon7dx] { border-bottom: none; }
.license-detail-label[b-aw1luon7dx] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-tertiary-color);
    margin-bottom: 0.2rem;
}
.license-detail-value[b-aw1luon7dx] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--rz-text-color);
}
.license-kpi-card[b-aw1luon7dx] {
    text-align: center;
    padding: 0.75rem;
    border-radius: 10px;
    background: var(--rz-base-100);
    border: 1px solid var(--rz-base-200);
}
.license-kpi-value[b-aw1luon7dx] { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.license-kpi-label[b-aw1luon7dx] { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rz-text-tertiary-color); margin-top: 0.2rem; }
/* /Components/Pages/Licenses/List.razor.rz.scp.css */
/* Estilos propios de List (/licenses) — CSS isolation.
   Vienen de wwwroot/css/commerce/licenses-list.css.

   Casi todo son reglas directas sobre HTML escrito en este marcado (divs, img,
   spans de los templates del grid — el compilador SI marca el HTML propio
   aunque viva dentro de un RenderFragment). Los badge-status-* se calculan en
   List.razor.cs (GetStatusDisplay) pero se aplican a <span> propios: reciben
   el hash igual; se conservan los ::before de active/suspended.

   La excepcion es `license-product-meta`: cae sobre un <RadzenStack>
   (componente, no recibe el `b-{hash}`) y su regla hija apunta a `.rz-text`,
   DOM que pinta Radzen. Ambas salen por `::deep` anclado en
   `.license-product-cell`, el <div> propio ancestro directo en los 3 usos.

   LicensesAdmin genera los mismos badges: su copia vive en
   LicensesAdmin.razor.css (duplicar bajo isolation es correcto, regla 12).
   theme.css conserva sus badge-status-* globales como fallback mas debil.
   ───────────────────────────────────────────────────────────────────────────── */

.license-product-cell[b-189tnfdyr5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.license-product-logo[b-189tnfdyr5] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--rz-base-100);
    border: 1px solid var(--rz-base-200);
    padding: 2px;
    flex-shrink: 0;
}
.license-product-logo-placeholder[b-189tnfdyr5] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--rz-base-100), var(--rz-base-200));
    color: var(--rz-text-tertiary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8rem;
}
.license-product-cell[b-189tnfdyr5]  .license-product-meta {
    min-width: 0;
}
.license-product-cell[b-189tnfdyr5]  .license-product-meta .rz-text { line-height: 1.3; }

/* Status badges */
.badge-status-active[b-189tnfdyr5] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: var(--rz-success-lighter); color: var(--rz-success-dark);
    padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.78rem; font-weight: 600;
}
.badge-status-active[b-189tnfdyr5]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--rz-success); }
.badge-status-cancelled[b-189tnfdyr5], .badge-status-inactive[b-189tnfdyr5] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: var(--rz-base-200); color: var(--rz-text-tertiary-color);
    padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.78rem; font-weight: 500;
}
.badge-status-suspended[b-189tnfdyr5] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: var(--rz-warning-lighter); color: var(--rz-warning-dark);
    padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.78rem; font-weight: 600;
}
.badge-status-suspended[b-189tnfdyr5]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--rz-warning); }
.badge-status-expired[b-189tnfdyr5] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: var(--rz-info-lighter); color: var(--rz-info-dark);
    padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.78rem; font-weight: 500;
}
.badge-status-pending[b-189tnfdyr5] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: var(--rz-secondary-lighter); color: var(--rz-secondary-dark);
    padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.78rem; font-weight: 500;
}

/* Org group header */
.org-group-header[b-189tnfdyr5] {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem; margin-bottom: 0.75rem;
    background: linear-gradient(135deg, var(--rz-base-100), transparent);
    border-left: 3px solid var(--rz-primary);
    border-radius: 0 8px 8px 0;
}
.org-group-header .org-icon[b-189tnfdyr5] {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--rz-primary-lighter); color: var(--rz-primary);
    display: flex; align-items: center; justify-content: center;
}

/* Seats badge */
.license-seats-badge[b-189tnfdyr5] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 24px; padding: 0 0.5rem;
    border-radius: 12px; font-weight: 700; font-size: 0.8rem;
    background: var(--rz-primary-lighter); color: var(--rz-primary);
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
/* Estilos propios de NotFound — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/pages/not-found.css. Todo el marcado de la página
   (/notfound) es HTML plano escrito en NotFound.razor (error-container,
   error-card, error-code, quick-links, btn-primary…), así que el compilador
   pone el b-{hash} directamente: no hace falta ::deep ni envoltorio. El
   <i class="rzi"> también es un elemento plano del propio .razor.

   OJO homónimos: Error.razor y AccessDenied.razor comparten nombres
   (error-container/error-card/error-message/error-actions) pero reciben SUS
   bloques desde el antiguo access-denied.css, ahora en sus propios .razor.css
   — cada componente se lleva la definición de su propia hoja.
   ───────────────────────────────────────────────────────────────────────────── */

.error-container[b-zqg3tad4ux] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.error-card[b-zqg3tad4ux] {
    text-align: center;
    max-width: 420px;
    padding: 2.5rem;
    background: rgba(25, 25, 45, 0.95);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

.error-code[b-zqg3tad4ux] {
    font-size: 5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.error-card h1[b-zqg3tad4ux] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 0.5rem;
}

.error-message[b-zqg3tad4ux] {
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
}

.error-search[b-zqg3tad4ux] {
    margin-bottom: 1.5rem;
}

.error-search p[b-zqg3tad4ux] {
    color: #64748b;
    font-size: 0.8rem;
    margin: 0 0 0.75rem;
}

.quick-links[b-zqg3tad4ux] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.quick-link[b-zqg3tad4ux] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.1);
    border-radius: 10px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.75rem;
    transition: all 0.2s;
}

.quick-link:hover[b-zqg3tad4ux] {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
    color: #f1f5f9;
}

.quick-link i[b-zqg3tad4ux] {
    font-size: 1.25rem;
    color: #8b5cf6;
}

.error-actions[b-zqg3tad4ux] {
    display: flex;
    justify-content: center;
}

.btn-primary[b-zqg3tad4ux] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.5rem;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: white;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-primary:hover[b-zqg3tad4ux] {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}
/* /Components/Pages/Orders/OrderDetailDialog.razor.rz.scp.css */
/* Estilos propios de OrderDetailDialog — CSS isolation.
   Vienen de wwwroot/css/commerce/order-detail-dialog.css.

   Sin `::deep` ni envoltorio: las 52 clases caen sobre HTML escrito en este
   marcado bajo el <div class="order-detail-dialog"> raiz, que si recibe el
   `b-{hash}`. Los modificadores runtime (type-badge iaas/saas/paas,
   status-badge provisioned/pending/processing/fulfilled) se interpolan en C#
   pero sobre <span> propios: el hash cae en el elemento y los compuestos
   funcionan.

   OJO homonimos (regla 11): hasta hoy, dentro de este dialogo ganaban las
   definiciones de quote-detail-dialog.css para info-item/info-label/info-value,
   products-table, product-name/sku y col-product/qty/price (orden de carga);
   al aislar, este dialogo recupera LAS SUYAS — cambio visible esperado.
   El bloque `empty-state` tambien esta duplicado en
   CustomerDetailDialog.razor.css, que vivia de esta definicion ganadora.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════ */
/* DIALOG CONTAINER                                                            */
/* ═══════════════════════════════════════════════════════════════════════════ */
.order-detail-dialog[b-28g0canbvu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    min-width: 600px;
    max-width: 800px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SKELETON LOADING                                                            */
/* ═══════════════════════════════════════════════════════════════════════════ */
.skeleton-header[b-28g0canbvu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rz-base-200);
}
.skeleton-header-info[b-28g0canbvu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.skeleton-client[b-28g0canbvu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0.5rem 0;
}
.skeleton-info-row[b-28g0canbvu] {
    display: flex;
    gap: 2rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rz-base-200);
}
.skeleton-info-item[b-28g0canbvu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.skeleton-products[b-28g0canbvu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* HEADER                                                                      */
/* ═══════════════════════════════════════════════════════════════════════════ */
.dialog-header[b-28g0canbvu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rz-base-200);
}

.header-icon[b-28g0canbvu] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--rz-primary-lighter);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rz-primary);
}

.header-info[b-28g0canbvu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-title[b-28g0canbvu] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.header-subtitle[b-28g0canbvu] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    font-family: ui-monospace, monospace;
}

.header-status[b-28g0canbvu] {
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* CLIENT ROW                                                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */
.client-row[b-28g0canbvu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.5rem 0;
}

.client-label[b-28g0canbvu] {
    font-size: 0.65rem;
    color: var(--rz-text-tertiary-color);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.client-name[b-28g0canbvu] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.client-ref[b-28g0canbvu] {
    font-size: 0.7rem;
    color: var(--rz-text-tertiary-color);
    font-family: ui-monospace, monospace;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* INFO ROW                                                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */
.info-row[b-28g0canbvu] {
    display: flex;
    gap: 2.5rem;
    padding: 0.5rem 0 0.75rem 0;
    border-bottom: 1px solid var(--rz-base-200);
}

.info-item[b-28g0canbvu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-label[b-28g0canbvu] {
    font-size: 0.65rem;
    color: var(--rz-text-tertiary-color);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.info-value[b-28g0canbvu] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--rz-text-color);
    line-height: 1.3;
}

.info-sub[b-28g0canbvu] {
    font-size: 0.65rem;
    color: var(--rz-text-tertiary-color);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* PRODUCTS SECTION                                                            */
/* ═══════════════════════════════════════════════════════════════════════════ */
.products-section[b-28g0canbvu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.section-header[b-28g0canbvu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title[b-28g0canbvu] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--rz-text-secondary-color);
}

.section-count[b-28g0canbvu] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-200);
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* PRODUCTS TABLE                                                              */
/* ═══════════════════════════════════════════════════════════════════════════ */
.products-table[b-28g0canbvu] {
    border: 1px solid var(--rz-base-200);
    border-radius: 6px;
    overflow: hidden;
}

.table-header[b-28g0canbvu] {
    display: grid;
    grid-template-columns: 2fr 60px 50px 70px 70px 90px;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--rz-base-100);
    border-bottom: 1px solid var(--rz-base-200);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--rz-text-tertiary-color);
}

.table-row[b-28g0canbvu] {
    display: grid;
    grid-template-columns: 2fr 60px 50px 70px 70px 90px;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    align-items: center;
    border-bottom: 1px solid var(--rz-base-100);
    transition: background 0.1s ease;
}

.table-row:last-child[b-28g0canbvu] { border-bottom: none; }
.table-row:hover[b-28g0canbvu] { background: var(--rz-base-50); }

.col-product[b-28g0canbvu] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.product-name[b-28g0canbvu] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rz-text-color);
    line-height: 1.3;
}

.product-sku[b-28g0canbvu] {
    font-size: 0.6rem;
    color: var(--rz-text-tertiary-color);
    font-family: ui-monospace, monospace;
}

.col-type[b-28g0canbvu], .col-qty[b-28g0canbvu], .col-price[b-28g0canbvu], .col-total[b-28g0canbvu] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.col-qty[b-28g0canbvu] { text-align: center; font-weight: 500; }
.col-price[b-28g0canbvu] { text-align: right; }
.col-total[b-28g0canbvu] { text-align: right; font-weight: 600; color: var(--rz-text-color); }

.col-status[b-28g0canbvu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.status-date[b-28g0canbvu] {
    font-size: 0.55rem;
    color: var(--rz-text-tertiary-color);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BADGES                                                                      */
/* ═══════════════════════════════════════════════════════════════════════════ */
.type-badge[b-28g0canbvu] {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.type-badge.iaas[b-28g0canbvu] { background: #e0f2fe; color: #0369a1; }
.type-badge.saas[b-28g0canbvu] { background: #f0fdf4; color: #15803d; }
.type-badge.paas[b-28g0canbvu] { background: #fef3c7; color: #b45309; }

.status-badge[b-28g0canbvu] {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: 0.55rem;
    font-weight: 500;
    text-transform: capitalize;
}
.status-badge.provisioned[b-28g0canbvu] { background: #dcfce7; color: #15803d; }
.status-badge.pending[b-28g0canbvu] { background: #fef3c7; color: #b45309; }
.status-badge.processing[b-28g0canbvu] { background: #dbeafe; color: #1d4ed8; }
.status-badge.fulfilled[b-28g0canbvu] { background: #dcfce7; color: #15803d; }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* TOTALS                                                                      */
/* ═══════════════════════════════════════════════════════════════════════════ */
.products-total[b-28g0canbvu] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--rz-base-100);
    border-radius: 6px;
    margin-top: 0.25rem;
}

.total-label[b-28g0canbvu] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.total-amount[b-28g0canbvu] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--rz-primary);
}

.total-amount small[b-28g0canbvu] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--rz-text-tertiary-color);
    margin-left: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* EMPTY STATE                                                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */
.empty-state[b-28g0canbvu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--rz-text-tertiary-color);
    font-size: 0.8rem;
    background: var(--rz-base-50);
    border-radius: 6px;
    border: 1px dashed var(--rz-base-300);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FOOTER                                                                      */
/* ═══════════════════════════════════════════════════════════════════════════ */
.dialog-footer[b-28g0canbvu] {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rz-base-200);
}
/* /Components/Pages/Projects/ClientProposalsDrawer.razor.rz.scp.css */
/* Estilos propios de ClientProposalsDrawer — CSS isolation.
   Vienen de wwwroot/css/projects/client-proposals.css (todo menos
   .proposals-action / .proposals-count-badge, que pertenecen al header del
   tablero y se fueron a KanbanBoard.razor.css).

   Llevan `::deep` las reglas cuyo sujeto pinta Radzen y no recibe el `b-{hash}`:
   `.cpd-back` (va sobre un <RadzenButton>) y los iconos `.rzi`/`.rz-icon` que
   emiten los <RadzenIcon> dentro de `.cpd-row-date` y `.cpd-empty`. El ancla es
   siempre un elemento HTML propio de este marcado (el root
   <div class="client-proposals-drawer"> o los spans/divs cpd-*).

   OJO: el detalle reutiliza la superficie `.proposal-card` de
   pages/proposal-view.css (cluster chat-pages); aquí solo vive el ajuste local
   `.client-proposals-drawer .cpd-proposal-card`. El bloque base .proposal-card
   debe llegar como contribution de chat-pages o la tarjeta blanca del detalle
   pierde su fondo.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   Client proposals — board header affordance + side drawer.
   Consumes Radzen theme tokens (--rz-*) so light/dark are inherited. The proposal
   detail reuses the .proposal-card surface from pages/proposal-view.css (a white
   commercial-document card) on purpose, so it reads identically to the public
   /proposal/{token} page inside the drawer.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Drawer shell ────────────────────────────────────────────────────────── */
.client-proposals-drawer[b-i61xh5x19n] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.25rem 0.25rem 1rem;
}

.cpd-topbar[b-i61xh5x19n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rz-border, rgba(0, 0, 0, 0.12));
}

.cpd-topbar-title[b-i61xh5x19n] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--rz-text-color, #1f2937);
}

.cpd-subheader[b-i61xh5x19n] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.25rem;
}

.cpd-project[b-i61xh5x19n] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color, #6b7280);
}

.cpd-count[b-i61xh5x19n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--rz-base-200, rgba(0, 0, 0, 0.06));
    color: var(--rz-text-secondary-color, #6b7280);
    font-size: 0.75rem;
    font-weight: 700;
}

/* ── List ─────────────────────────────────────────────────────────────────── */
.cpd-list[b-i61xh5x19n] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cpd-row[b-i61xh5x19n] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--rz-border, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--rz-base-background-color, #fff);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.cpd-row:hover[b-i61xh5x19n] {
    border-color: var(--rz-primary, #2563eb);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.cpd-row:active[b-i61xh5x19n] {
    transform: translateY(1px);
}

.cpd-row-main[b-i61xh5x19n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.cpd-row-title[b-i61xh5x19n] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rz-text-color, #1f2937);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpd-row-meta[b-i61xh5x19n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color, #6b7280);
}

.cpd-row-date[b-i61xh5x19n] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.cpd-row-date[b-i61xh5x19n]  .rzi,
.cpd-row-date[b-i61xh5x19n]  .rz-icon {
    font-size: 0.95rem;
}

.cpd-row-total[b-i61xh5x19n] {
    font-weight: 700;
    color: var(--rz-text-color, #1f2937);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.cpd-empty[b-i61xh5x19n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--rz-text-secondary-color, #6b7280);
}

.cpd-empty[b-i61xh5x19n]  .rzi,
.cpd-empty[b-i61xh5x19n]  .rz-icon {
    font-size: 2.75rem;
    opacity: 0.55;
}

.cpd-empty p[b-i61xh5x19n] {
    margin: 0;
    font-size: 0.9rem;
}

/* ── Detail ──────────────────────────────────────────────────────────────── */
.cpd-detail[b-i61xh5x19n] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.client-proposals-drawer[b-i61xh5x19n]  .cpd-back {
    align-self: flex-start;
}

/* Reuse the public proposal card, but let it fill the drawer width. */
.client-proposals-drawer .cpd-proposal-card[b-i61xh5x19n] {
    max-width: none;
    padding: 1.5rem;
}

/* ── Contribución cross-cluster (de pages/proposal-view.css) aplicada por el orquestador ── */
/* CRÍTICO — pegar en ClientProposalsDrawer.razor.css ANTES de .cpd-proposal-card.
   De wwwroot/css/pages/proposal-view.css: el drawer escribe .proposal-card en su
   propio marcado (linea 40); duplicado byte a byte (regla 12). Resuelve el
   interbloqueo cross-cluster detectado por el revisor de projects. */
.proposal-card[b-i61xh5x19n] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 900px;
    width: 100%;
    padding: 2rem;
}
/* /Components/Pages/Projects/GanttChart.razor.rz.scp.css */
/* Estilos propios de GanttChart — CSS isolation.
   Vienen de wwwroot/css/projects/gantt-chart.css. Todo el marcado es HTML
   propio (toolbar, lista de tareas, timeline, barras), asi que casi nada
   necesita `::deep`; la excepcion es `.gantt-empty-icon`, que va sobre un
   <RadzenIcon> (no recibe el `b-{hash}`) y sale anclada desde el
   <div class="gantt-empty">.

   Estados nacidos en C# (GanttChart.razor.cs y las interpolaciones del
   .razor): .dragging, .weekend, .today, .overdue, .status-done, .priority-*,
   .updated, .active y .saving/.saved/.error — caen sobre elementos HTML
   propios, asi que reciben hash aunque el compilador no los vea literales.

   OJO: la familia .save-indicator TAMBIEN la consume este componente
   (GanttChart.razor linea 215, el pie "guardado automatico"), no solo
   ProjectsGantt — por eso viaja aqui ademas de la copia identica que ya vive
   en ProjectsGantt.razor.css. Duplicar bloques identicos por componente es lo
   correcto bajo isolation: cada copia lleva su hash.

   @keyframes pulse-red se copia tal cual: los nombres de keyframes no se
   reescriben con hash, siguen siendo globales en el bundle.
   ───────────────────────────────────────────────────────────────────────────── */

.gantt-toolbar[b-l2djyi2mpu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: var(--rz-base-100);
    border-bottom: 1px solid var(--rz-base-300);
    border-radius: 8px 8px 0 0;
}

.gantt-zoom-controls[b-l2djyi2mpu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gantt-view-toggle[b-l2djyi2mpu] {
    display: flex;
    border: 1px solid var(--rz-base-300);
    border-radius: 6px;
    overflow: hidden;
}

.gantt-view-btn[b-l2djyi2mpu] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--rz-base-background-color);
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--rz-text-secondary-color);
}

.gantt-view-btn:not(:last-child)[b-l2djyi2mpu] {
    border-right: 1px solid var(--rz-base-300);
}

.gantt-view-btn:hover[b-l2djyi2mpu] {
    background: var(--rz-base-200);
}

.gantt-view-btn.active[b-l2djyi2mpu] {
    background: var(--rz-primary);
    color: white;
}

.gantt-container[b-l2djyi2mpu] {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
    border: 1px solid var(--rz-base-300);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: var(--rz-base-background-color);
    -webkit-user-select: none;
    user-select: none;
}

.gantt-wrapper[b-l2djyi2mpu] {
    display: flex;
    min-width: fit-content;
}

.gantt-task-list[b-l2djyi2mpu] {
    flex-shrink: 0;
    width: 320px;
    border-right: 2px solid var(--rz-base-300);
    background: var(--rz-base-background-color);
    position: sticky;
    left: 0;
    z-index: 10;
}

.gantt-task-list-header[b-l2djyi2mpu] {
    display: grid;
    grid-template-columns: 1fr 80px 80px;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--rz-base-200);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    border-bottom: 1px solid var(--rz-base-300);
    position: sticky;
    top: 0;
    z-index: 11;
}

.gantt-task-row[b-l2djyi2mpu] {
    display: grid;
    grid-template-columns: 1fr 80px 80px;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--rz-base-200);
    align-items: center;
    min-height: 40px;
    cursor: pointer;
}

.gantt-task-row:hover[b-l2djyi2mpu] { background: var(--rz-base-100); }
.gantt-task-row.dragging[b-l2djyi2mpu] { background: var(--rz-primary-lighter); }

.task-name[b-l2djyi2mpu] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    overflow: hidden;
}

.task-code[b-l2djyi2mpu] {
    font-size: 0.7rem;
    color: var(--rz-text-tertiary-color);
    font-weight: 500;
}

.task-title[b-l2djyi2mpu] {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-date[b-l2djyi2mpu] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    text-align: center;
}

.task-date.updated[b-l2djyi2mpu] {
    color: var(--rz-success);
    font-weight: 600;
}

.gantt-timeline[b-l2djyi2mpu] {
    flex: 1;
    min-width: 600px;
}

.gantt-timeline-header[b-l2djyi2mpu] {
    display: flex;
    background: var(--rz-base-200);
    border-bottom: 1px solid var(--rz-base-300);
    position: sticky;
    top: 0;
    z-index: 9;
}

.gantt-days[b-l2djyi2mpu] { display: flex; }

.gantt-day[b-l2djyi2mpu] {
    flex-shrink: 0;
    width: var(--day-width, 24px);
    text-align: center;
    font-size: 0.65rem;
    padding: 0.25rem 0;
    border-right: 1px solid var(--rz-base-200);
    color: var(--rz-text-tertiary-color);
}

.gantt-day.weekend[b-l2djyi2mpu] { background: var(--rz-base-100); }
.gantt-day.today[b-l2djyi2mpu] {
    background: var(--rz-primary-lighter);
    font-weight: 700;
    color: var(--rz-primary);
}

.gantt-timeline-body[b-l2djyi2mpu] { position: relative; }

.gantt-bar-row[b-l2djyi2mpu] {
    display: flex;
    align-items: center;
    min-height: 40px;
    border-bottom: 1px solid var(--rz-base-200);
    position: relative;
}

.gantt-bar-row:hover[b-l2djyi2mpu] { background: var(--rz-base-100); }

.gantt-grid-day[b-l2djyi2mpu] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--day-width, 24px);
    border-right: 1px solid var(--rz-base-200);
}

.gantt-grid-day.weekend[b-l2djyi2mpu] { background: rgba(0,0,0,0.02); }
.gantt-grid-day.today[b-l2djyi2mpu] {
    background: rgba(var(--rz-primary-rgb), 0.08);
    border-right: 2px solid var(--rz-primary);
}

.gantt-bar[b-l2djyi2mpu] {
    position: absolute;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 500;
    color: white;
    cursor: grab;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    z-index: 5;
}

.gantt-bar:hover[b-l2djyi2mpu] {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

.gantt-bar.dragging[b-l2djyi2mpu] {
    cursor: grabbing;
    opacity: 0.9;
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    z-index: 100;
}

.gantt-bar-progress[b-l2djyi2mpu] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(255,255,255,0.25);
    border-radius: 4px 0 0 4px;
    pointer-events: none;
}

.gantt-bar-label[b-l2djyi2mpu] {
    position: relative;
    z-index: 1;
    padding: 0 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.gantt-bar-handle[b-l2djyi2mpu] {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 14px;
    cursor: ew-resize;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.15s;
    background: rgba(255,255,255,0.2);
}

.gantt-bar:hover .gantt-bar-handle[b-l2djyi2mpu] { opacity: 1; }

.gantt-bar-handle-left[b-l2djyi2mpu] { left: -5px; border-radius: 4px 0 0 4px; }
.gantt-bar-handle-right[b-l2djyi2mpu] { right: -5px; border-radius: 0 4px 4px 0; }
.gantt-bar-handle:hover[b-l2djyi2mpu] { background: rgba(255,255,255,0.5); }

.gantt-bar-handle[b-l2djyi2mpu]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 10px;
    border-left: 2px solid rgba(255,255,255,0.7);
    border-right: 2px solid rgba(255,255,255,0.7);
}

.gantt-bar.priority-critical[b-l2djyi2mpu] { background: linear-gradient(135deg, #DC2626, #B91C1C); }
.gantt-bar.priority-high[b-l2djyi2mpu] { background: linear-gradient(135deg, #F59E0B, #D97706); }
.gantt-bar.priority-medium[b-l2djyi2mpu] { background: linear-gradient(135deg, #6B7280, #4B5563); }
.gantt-bar.priority-low[b-l2djyi2mpu] { background: linear-gradient(135deg, #10B981, #059669); }

.gantt-bar.status-done[b-l2djyi2mpu] { opacity: 0.7; }

.gantt-bar.overdue[b-l2djyi2mpu] { animation: pulse-red-b-l2djyi2mpu 2s infinite; }

@keyframes pulse-red-b-l2djyi2mpu {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); }
}

.gantt-milestone[b-l2djyi2mpu] {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--rz-primary);
    transform: rotate(45deg);
    z-index: 5;
    cursor: pointer;
}

.gantt-milestone:hover[b-l2djyi2mpu] { transform: rotate(45deg) scale(1.1); }

.gantt-empty[b-l2djyi2mpu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--rz-text-secondary-color);
}

.gantt-empty[b-l2djyi2mpu]  .gantt-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.gantt-footer[b-l2djyi2mpu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--rz-base-100);
    border-top: 1px solid var(--rz-base-300);
}

.gantt-legend[b-l2djyi2mpu] {
    display: flex;
    gap: 1.5rem;
    font-size: 0.75rem;
}

.legend-item[b-l2djyi2mpu] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.legend-color[b-l2djyi2mpu] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.save-indicator[b-l2djyi2mpu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.save-indicator.saving[b-l2djyi2mpu] { color: var(--rz-warning); }
.save-indicator.saved[b-l2djyi2mpu] { color: var(--rz-success); }
.save-indicator.error[b-l2djyi2mpu] { color: var(--rz-danger); }

/* Month header for monthly view */
.gantt-month-header[b-l2djyi2mpu] {
    display: flex;
    background: var(--rz-base-300);
    border-bottom: 1px solid var(--rz-base-400);
    position: sticky;
    top: 0;
    z-index: 10;
}

.gantt-month[b-l2djyi2mpu] {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.375rem 0;
    border-right: 1px solid var(--rz-base-400);
    color: var(--rz-text-color);
}
/* /Components/Pages/Projects/KanbanBoard.razor.rz.scp.css */
/* Estilos propios de KanbanBoard — CSS isolation.
   Vienen de wwwroot/css/projects/kanban-board.css, mas los dos bloques del
   header del tablero (.proposals-action / .proposals-count-badge) que vivian
   en wwwroot/css/projects/client-proposals.css (el resto de esa hoja se fue a
   ClientProposalsDrawer.razor.css).

   Llevan `::deep` las reglas cuyo sujeto lo pinta Radzen y no recibe el
   `b-{hash}`: el icono `.search-icon` (RadzenIcon dentro de .search-box), el
   chrome interno del RadzenDropDown del menu de columna (.rz-dropdown,
   .rz-dropdown-trigger, .rz-helper, .rzi bajo .column-header-actions) y los
   iconos .rzi/.rz-icon que emiten los <RadzenIcon> dentro de .view-btn,
   .quick-filter-btn, .task-priority y .task-badge. Tambien
   `.column-body.dragging-active ::deep > *`, porque el comodin debe alcanzar
   cualquier hijo, lo haya escrito este marcado o no. El ancla es siempre un
   elemento HTML propio (div/button/span de este .razor).

   Estados nacidos en C# (KanbanBoard.razor.cs): .dragging, .drag-over,
   .dragging-active, .due-overdue y .active — el compilador no los ve en el
   marcado pero caen sobre elementos HTML propios, asi que reciben hash igual.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════ */
/* LAYOUT & CONTAINER                                                          */
/* ═══════════════════════════════════════════════════════════════════════════ */

.board-wrapper[b-kdhu8w04v9] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    background: var(--rz-body-background-color);
}

.board-header[b-kdhu8w04v9] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rz-base-300);
    background: var(--rz-base-background-color);
    flex-shrink: 0;
}

.board-header-top[b-kdhu8w04v9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.board-title-section[b-kdhu8w04v9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.board-title[b-kdhu8w04v9] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--rz-text-color);
    margin: 0;
}

.board-subtitle[b-kdhu8w04v9] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.board-actions[b-kdhu8w04v9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.view-toggle[b-kdhu8w04v9] {
    display: flex;
    background: var(--rz-base-200);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.view-btn[b-kdhu8w04v9] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: var(--rz-text-tertiary-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.view-btn:hover[b-kdhu8w04v9] {
    background: var(--rz-base-300);
    color: var(--rz-text-color);
}

.view-btn.active[b-kdhu8w04v9] {
    background: var(--rz-base-background-color);
    color: var(--rz-primary);
    box-shadow: var(--rz-shadow-1);
}

.view-btn[b-kdhu8w04v9]  .rzi {
    font-size: 1.25rem;
}

.board-toolbar[b-kdhu8w04v9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.search-box[b-kdhu8w04v9] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box input[b-kdhu8w04v9] {
    padding: 0.375rem 0.75rem 0.375rem 2rem;
    border: 1px solid var(--rz-base-400);
    border-radius: 6px;
    background: var(--rz-base-100);
    color: var(--rz-text-color);
    font-size: 0.8125rem;
    width: 200px;
    transition: all 0.15s ease;
}

.search-box input:focus[b-kdhu8w04v9] {
    outline: none;
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 2px var(--rz-primary-lighter);
}

.search-box[b-kdhu8w04v9]  .search-icon {
    position: absolute;
    left: 0.5rem;
    color: var(--rz-text-tertiary-color);
    font-size: 1rem;
    pointer-events: none;
}

.avatar-stack[b-kdhu8w04v9] {
    display: flex;
    align-items: center;
}

.avatar-stack .avatar[b-kdhu8w04v9] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rz-primary);
    border: 2px solid var(--rz-base-background);
    margin-left: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--rz-on-primary);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.avatar-stack .avatar:first-child[b-kdhu8w04v9] {
    margin-left: 0;
}

.avatar-stack .avatar:hover[b-kdhu8w04v9] {
    transform: scale(1.1);
    z-index: 10;
}

/* ── Header button + count badge (de client-proposals.css) ───────────────── */
.proposals-action[b-kdhu8w04v9] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.proposals-count-badge[b-kdhu8w04v9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: -6px;
    border-radius: 9px;
    background: var(--rz-primary, #2563eb);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* KANBAN BOARD                                                                */
/* ═══════════════════════════════════════════════════════════════════════════ */

.kanban-board[b-kdhu8w04v9] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    overflow-x: auto;
    flex: 1;
    align-items: stretch;
    background: var(--rz-body-background-color);
}

.kanban-board[b-kdhu8w04v9]::-webkit-scrollbar {
    height: 8px;
}

.kanban-board[b-kdhu8w04v9]::-webkit-scrollbar-track {
    background: var(--rz-base-200);
    border-radius: 4px;
}

.kanban-board[b-kdhu8w04v9]::-webkit-scrollbar-thumb {
    background: var(--rz-base-400);
    border-radius: 4px;
}

.kanban-board[b-kdhu8w04v9]::-webkit-scrollbar-thumb:hover {
    background: var(--rz-base-500);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* COLUMNS - Enterprise Kanban Style                                           */
/* ═══════════════════════════════════════════════════════════════════════════ */

.kanban-column[b-kdhu8w04v9] {
    flex: 1;
    min-width: 280px;
    max-width: none;
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius, 6px);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
    border: 1px solid var(--rz-base-200);
}

.column-header[b-kdhu8w04v9] {
    padding: 0.5rem 0.5rem 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.column-header-left[b-kdhu8w04v9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.column-indicator[b-kdhu8w04v9] {
    width: 3px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
}

.column-name[b-kdhu8w04v9] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rz-text-secondary-color);
}

.column-count[b-kdhu8w04v9] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-200);
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
}

.column-header-actions[b-kdhu8w04v9] {
    /* Always visible - no hover required */
}

/* Column header dropdown styling */
.column-header-actions[b-kdhu8w04v9]  .rz-dropdown {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.column-header-actions[b-kdhu8w04v9]  .rz-dropdown .rz-dropdown-trigger {
    display: none !important;
}

.column-header-actions[b-kdhu8w04v9]  .rz-dropdown .rz-helper {
    border: none !important;
    background: transparent !important;
    min-height: auto !important;
    padding: 0.25rem !important;
}

.column-header-actions[b-kdhu8w04v9]  .rz-dropdown:hover .rz-helper {
    background: var(--rz-base-100) !important;
    border-radius: 4px !important;
}

.column-header-actions[b-kdhu8w04v9]  .rz-dropdown:hover .rzi {
    color: var(--rz-primary) !important;
}

.column-body[b-kdhu8w04v9] {
    flex: 1;
    overflow-y: auto;
    padding: 0 0.5rem 0.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.column-body[b-kdhu8w04v9]::-webkit-scrollbar {
    width: 6px;
}

.column-body[b-kdhu8w04v9]::-webkit-scrollbar-track {
    background: transparent;
}

.column-body[b-kdhu8w04v9]::-webkit-scrollbar-thumb {
    background: var(--rz-base-300);
    border-radius: 3px;
}

.column-body.drag-over[b-kdhu8w04v9] {
    background: var(--rz-primary-lighter);
    border: 2px dashed var(--rz-primary);
    border-radius: var(--rz-border-radius, 6px);
}

/* Disable pointer events on children during drag to prevent flickering */
.column-body.dragging-active[b-kdhu8w04v9]  > * {
    pointer-events: none;
}

.column-body.dragging-active .task-card.dragging[b-kdhu8w04v9] {
    pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* TASK CARDS - Jira Style                                                     */
/* ═══════════════════════════════════════════════════════════════════════════ */

.task-card[b-kdhu8w04v9] {
    background: var(--rz-base-background-color);
    border-radius: var(--rz-border-radius, 6px);
    padding: 0.75rem;
    cursor: grab;
    transition: all 0.15s ease;
    border: 1px solid var(--rz-base-200);
    box-shadow: var(--rz-shadow-1);
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.task-card:active[b-kdhu8w04v9] {
    cursor: grabbing;
}

.task-card:hover[b-kdhu8w04v9] {
    background: var(--rz-base-50);
    border-color: var(--rz-base-300);
    box-shadow: var(--rz-shadow-2);
    transform: translateY(-1px);
}

.task-card.dragging[b-kdhu8w04v9] {
    opacity: 0.6;
    transform: rotate(2deg) scale(1.02);
    box-shadow: var(--rz-shadow-3);
    cursor: grabbing;
    z-index: 100;
}

.task-card-header[b-kdhu8w04v9] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.task-type-icon[b-kdhu8w04v9] {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: 2px;
}

.task-type-icon[b-kdhu8w04v9]  .rzi {
    font-size: 12px;
}

.task-title[b-kdhu8w04v9] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--rz-text-color);
    line-height: 1.35;
    flex: 1;
    word-break: break-word;
}

.task-labels[b-kdhu8w04v9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.375rem;
}

.task-label[b-kdhu8w04v9] {
    height: 6px;
    width: 32px;
    border-radius: 3px;
}

.task-footer[b-kdhu8w04v9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.task-meta[b-kdhu8w04v9] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.task-code[b-kdhu8w04v9] {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--rz-text-tertiary-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.task-priority[b-kdhu8w04v9] {
    display: flex;
    align-items: center;
}

.task-priority[b-kdhu8w04v9]  .rzi {
    font-size: 14px;
}

.priority-critical[b-kdhu8w04v9] { color: var(--rz-danger); }
.priority-high[b-kdhu8w04v9] { color: var(--rz-danger-light); }
.priority-medium[b-kdhu8w04v9] { color: var(--rz-warning); }
.priority-low[b-kdhu8w04v9] { color: var(--rz-success); }

.task-assignee[b-kdhu8w04v9] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--rz-base-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--rz-on-primary);
    text-transform: uppercase;
}

.task-badges[b-kdhu8w04v9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    color: var(--rz-text-tertiary-color);
}

.task-badge[b-kdhu8w04v9] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.task-badge[b-kdhu8w04v9]  .rzi {
    font-size: 12px;
}

.due-overdue[b-kdhu8w04v9] {
    color: var(--rz-danger);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* EMPTY STATE                                                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */

.empty-column[b-kdhu8w04v9] {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--rz-text-tertiary-color);
}

.empty-column-icon[b-kdhu8w04v9] {
    font-size: 1.5rem;
    opacity: 0.4;
    margin-bottom: 0.5rem;
}

.empty-column-text[b-kdhu8w04v9] {
    font-size: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* QUICK FILTERS                                                               */
/* ═══════════════════════════════════════════════════════════════════════════ */

.quick-filters[b-kdhu8w04v9] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.quick-filter-btn[b-kdhu8w04v9] {
    /* Pill chips matched to the header's "Solo mis tareas" toggle: same height and
       radius, icon and label on one flex baseline. The old 4px-radius mixed-height
       buttons read as unfinished next to the rounded search box and summary count. */
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 32px;
    padding: 0 0.75rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 999px;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.quick-filter-btn[b-kdhu8w04v9]  .rzi,
.quick-filter-btn[b-kdhu8w04v9]  .rz-icon {
    font-size: 1rem;
    line-height: 1;
}

/* Keep the count block on the same visual axis as the chips. */
.tickets-summary[b-kdhu8w04v9] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 32px;
}

.quick-filter-btn:hover[b-kdhu8w04v9] {
    background: var(--rz-base-200);
    border-color: var(--rz-base-400);
}

.quick-filter-btn.active[b-kdhu8w04v9] {
    background: var(--rz-primary);
    border-color: var(--rz-primary);
    color: var(--rz-on-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE                                                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .kanban-board[b-kdhu8w04v9] {
        overflow-x: auto;
    }

    .kanban-column[b-kdhu8w04v9] {
        min-width: 280px;
        flex: 0 0 280px;
    }

    .board-header-top[b-kdhu8w04v9] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .board-actions[b-kdhu8w04v9] {
        width: 100%;
        justify-content: flex-end;
    }

    .board-toolbar[b-kdhu8w04v9] {
        width: 100%;
    }

    .search-box input[b-kdhu8w04v9] {
        width: 100%;
    }
}
/* /Components/Pages/Projects/MyTasks.razor.rz.scp.css */
/* Crear MyTasks.razor.css — de wwwroot/css/projects/my-tasks.css (hoja retirada).
   Los dos @media ya traian ::deep (muertos como CSS global, RESUCITAN bajo isolation). */
.table-responsive-wrapper[b-mdl4cod4rq] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 992px) {
    .table-responsive-wrapper[b-mdl4cod4rq]  .rz-datatable {
        min-width: 800px;
    }
}

@media (max-width: 576px) {
    .table-responsive-wrapper[b-mdl4cod4rq]  .rz-datatable {
        min-width: 650px;
    }
}
/* /Components/Pages/Projects/ProjectList.razor.rz.scp.css */
/* Estilos propios de ProjectList — CSS isolation.
   Vienen de wwwroot/css/projects/project-list.css.

   Llevan `::deep` las reglas cuyo sujeto pinta Radzen y no recibe el
   `b-{hash}`: los internos `.rz-textbox`/`.rz-dropdown` de la barra de filtros
   (ancla: <div class="filter-bar">, HTML propio), `.board-expand-icon` (va
   sobre un <RadzenIcon> con la clase interpolada desde C#; ancla
   .board-accordion-header) y los iconos `.rz-icon` que emiten los <RadzenIcon>
   dentro de `.view-toggle button` y `.board-stat-inline`.

   Estados nacidos en C# (ProjectList.razor.cs): corp-badge-* (via
   GetStatusBadgeClass), .expanded, .dragging/.drag-over y .overdue-text — caen
   sobre elementos HTML propios y reciben hash, SALVO el `.overdue-text` que la
   vista de tabla pone sobre un <RadzenText> (linea 439 del .razor): ese queda
   fuera del ambito porque no hay ningun elemento HTML propio por encima desde
   el que anclar un ::deep (la RadzenDataGrid cuelga directamente del
   RadzenStack raiz). Riesgo visual anotado en la salida de la migracion.

   La superficie base de `.filter-bar` la define theme.css para todo el portal
   (historico abajo, conservado tal cual de la hoja origen); aqui solo viven
   los compuestos que afinan sus internos Radzen.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   ENTERPRISE CORPORATE DESIGN - Using theme.css variables
   ═══════════════════════════════════════════════════════════════════════════ */

.project-card[b-46ku3ub706] {
    background: var(--rz-base-background-color);
    border-radius: var(--rz-border-radius);
    padding: 1rem;
    transition: all 0.15s ease;
    cursor: pointer;
    border: 1px solid var(--rz-base-200);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.project-card:hover[b-46ku3ub706] {
    border-color: var(--rz-base-400);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.project-card.dragging[b-46ku3ub706] {
    opacity: 0.5;
    transform: scale(0.98);
}

.project-card.drag-over[b-46ku3ub706] {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 2px var(--rz-primary-lighter);
}

.project-card[draggable="true"][b-46ku3ub706] {
    cursor: grab;
}

.project-card[draggable="true"]:active[b-46ku3ub706] {
    cursor: grabbing;
}

.project-icon[b-46ku3ub706] {
    width: 36px;
    height: 36px;
    border-radius: var(--rz-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: var(--rz-primary);
    color: var(--rz-on-primary);
}

.project-avatar[b-46ku3ub706] {
    width: 36px;
    height: 36px;
    border-radius: var(--rz-border-radius);
    object-fit: cover;
}

.project-avatar-small[b-46ku3ub706] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
}

.project-stats[b-46ku3ub706] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rz-base-100);
}

.stat-item[b-46ku3ub706] {
    text-align: center;
    padding: 0.35rem;
    background: var(--rz-base-50);
    border-radius: 4px;
}

.stat-value[b-46ku3ub706] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.stat-label[b-46ku3ub706] {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* La superficie de `.filter-bar` la define ahora theme.css para todo el portal.
   Estaba declarada aquí y, con otros valores, en servicedesk/ticket-list.css:
   dos módulos peleando por un nombre de clase genérico, y ganaba el que cargara
   más tarde — de hecho esta barra se estaba pintando con los números de
   ServiceDesk sin que nadie lo supiera. */

/* Clean search input styling */
.filter-search-input[b-46ku3ub706],
.filter-bar[b-46ku3ub706]  .rz-textbox {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

/* Compact dropdowns in filter bar */
.filter-bar[b-46ku3ub706]  .rz-dropdown {
    font-size: 0.875rem;
}

.empty-state[b-46ku3ub706] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--rz-base-background-color);
    border-radius: var(--rz-border-radius);
    border: 1px solid var(--rz-base-200);
}

.view-toggle[b-46ku3ub706] {
    display: flex;
    background: var(--rz-base-100);
    border-radius: 6px;
    padding: 3px;
}

.view-toggle button[b-46ku3ub706] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--rz-text-secondary-color);
    font-weight: 500;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.view-toggle button[b-46ku3ub706]  .rz-icon {
    font-size: 16px;
}

.view-toggle button.active[b-46ku3ub706] {
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.view-toggle button:hover:not(.active)[b-46ku3ub706] {
    color: var(--rz-text-color);
}

/* Badge styles override */
.corp-badge[b-46ku3ub706] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.corp-badge-active[b-46ku3ub706] {
    background: var(--rz-success-lighter);
    color: var(--rz-success);
}

/* "Completado" used to reuse the success green of "Activo": two loud chips
   competing on the same card, and the brighter one was the state nobody needs
   to act on. Completed is a finished, on-brand state, so it wears the primary
   colour and leaves green to mean "running". */
.corp-badge-completed[b-46ku3ub706] {
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
}

.corp-badge-archived[b-46ku3ub706] {
    background: var(--rz-base-100);
    color: var(--rz-text-secondary-color);
}

/* Progress bar override */
.corp-progress[b-46ku3ub706] {
    height: 4px;
    border-radius: 2px;
    background: var(--rz-base-200);
    overflow: hidden;
}

.corp-progress-bar[b-46ku3ub706] {
    height: 100%;
    background: var(--rz-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Search input */
.corp-search[b-46ku3ub706] {
    background: var(--rz-base-50);
    border-radius: 6px;
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--rz-base-200);
    transition: all 0.15s ease;
}

.corp-search:focus-within[b-46ku3ub706] {
    border-color: var(--rz-primary);
    background: var(--rz-base-background-color);
    box-shadow: 0 0 0 3px var(--rz-primary-lighter);
}

/* Overdue styling */
.overdue-text[b-46ku3ub706] {
    color: var(--rz-warning) !important;
    font-weight: 500;
}

/* Count badge */
.corp-badge-count[b-46ku3ub706] {
    background: var(--rz-base-100);
    color: var(--rz-text-secondary-color);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BOARDS VIEW - Accordion projects with mini-kanban                         */
/* ═══════════════════════════════════════════════════════════════════════════ */

.board-accordion-item[b-46ku3ub706] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius);
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.board-accordion-header[b-46ku3ub706] {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    gap: 0.75rem;
    -webkit-user-select: none;
    user-select: none;
}

.board-accordion-header:hover[b-46ku3ub706] {
    background: var(--rz-base-50);
}

.board-accordion-header.expanded[b-46ku3ub706] {
    border-bottom: 1px solid var(--rz-base-200);
}

.board-accordion-header[b-46ku3ub706]  .board-expand-icon {
    font-size: 18px !important;
    color: var(--rz-text-tertiary-color);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.board-accordion-header[b-46ku3ub706]  .board-expand-icon.expanded {
    transform: rotate(90deg);
}

.board-project-icon[b-46ku3ub706] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    color: var(--rz-on-primary);
}

.board-project-icon img[b-46ku3ub706] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
}

.board-project-info[b-46ku3ub706] {
    flex: 1;
    min-width: 0;
}

.board-project-name[b-46ku3ub706] {
    font-weight: 600;
    color: var(--rz-text-color);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-project-meta[b-46ku3ub706] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.board-project-code[b-46ku3ub706] {
    font-family: monospace;
    background: var(--rz-base-100);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
}

.board-stats-inline[b-46ku3ub706] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    flex-shrink: 0;
}

.board-stat-inline[b-46ku3ub706] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.board-stat-inline[b-46ku3ub706]  .rz-icon {
    font-size: 14px;
    color: var(--rz-text-tertiary-color);
}

.board-content[b-46ku3ub706] {
    padding: 1rem;
    background: var(--rz-base-50);
}

.mini-kanban[b-46ku3ub706] {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.mini-kanban[b-46ku3ub706]::-webkit-scrollbar {
    height: 6px;
}

.mini-kanban[b-46ku3ub706]::-webkit-scrollbar-track {
    background: var(--rz-base-200);
    border-radius: 3px;
}

.mini-kanban[b-46ku3ub706]::-webkit-scrollbar-thumb {
    background: var(--rz-base-400);
    border-radius: 3px;
}

.mini-col[b-46ku3ub706] {
    flex: 0 0 220px;
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
    border: 1px solid var(--rz-base-200);
    max-height: 320px;
    display: flex;
    flex-direction: column;
}

.mini-col-header[b-46ku3ub706] {
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--rz-base-200);
    flex-shrink: 0;
}

.mini-col-dot[b-46ku3ub706] {
    width: 3px;
    height: 14px;
    border-radius: 2px;
}

.mini-col-name[b-46ku3ub706] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rz-text-secondary-color);
}

.mini-col-count[b-46ku3ub706] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-200);
    padding: 0.0625rem 0.3125rem;
    border-radius: 8px;
    margin-left: auto;
}

.mini-col-body[b-46ku3ub706] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.mini-task[b-46ku3ub706] {
    background: var(--rz-base-background-color);
    border-radius: 4px;
    padding: 0.5rem;
    border: 1px solid var(--rz-base-200);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mini-task:hover[b-46ku3ub706] {
    border-color: var(--rz-primary-light);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.mini-task-head[b-46ku3ub706] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
}

.mini-task-type[b-46ku3ub706] {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mini-task-title[b-46ku3ub706] {
    font-size: 0.75rem;
    color: var(--rz-text-color);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mini-task-foot[b-46ku3ub706] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.375rem;
}

.mini-task-code[b-46ku3ub706] {
    font-family: monospace;
    font-size: 0.625rem;
    color: var(--rz-text-tertiary-color);
}

.mini-task-avatar[b-46ku3ub706] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5625rem;
    font-weight: 600;
    color: white;
}

.mini-col-empty[b-46ku3ub706] {
    text-align: center;
    padding: 1rem 0.5rem;
    color: var(--rz-text-tertiary-color);
    font-size: 0.6875rem;
}

.board-loading[b-46ku3ub706] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--rz-text-tertiary-color);
}

.board-view-full[b-46ku3ub706] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--rz-primary);
    text-decoration: none;
    margin-top: 0.75rem;
}

.board-view-full:hover[b-46ku3ub706] {
    text-decoration: underline;
}
/* /Components/Pages/Projects/ProjectMetrics.razor.rz.scp.css */
/* Estilos propios de ProjectMetrics — CSS isolation.
   Vienen de wwwroot/css/projects/project-metrics.css.

   Esta página no tenía NINGÚN elemento HTML propio por encima del contenido:
   el root era el <RadzenStack class="metrics-page-shell"> directamente bajo
   ModuleGate, y a lo que pinta un componente no le llega el `b-{hash}`. De ahí
   el <div class="metrics-page-root"> nuevo en el marcado — es el ancla desde
   la que salen los ::deep de todo lo que cae sobre componentes Radzen:
   .metrics-page-shell (RadzenStack), .metrics-loading-card (RadzenCard),
   .metrics-skeleton (RadzenSkeleton), .metrics-toolbar-scroll (RadzenStack) y
   sus internos .rz-selectbar*, .metrics-pivot-grid (RadzenPivotDataGrid) con
   todos sus .rz-pivot-*, y el .rz-card del @media.

   Sí reciben hash directamente (HTML propio, sin ::deep): kpi-grid/kpi-card/
   kpi-icon/kpi-value/kpi-label/kpi-sub, entry-*, billable-*, metrics-loading-
   filters/-kpis, metrics-chart-scroll/-canvas y metrics-grid-scroll (los divs
   están escritos en el .razor, también dentro de templates del grid).
   billable-yes/billable-no y single-aggregate nacen por interpolación C# pero
   caen sobre marcado propio o viajan con su compuesto ::deep. Los !important
   y ambos @media van copiados byte a byte.
   ───────────────────────────────────────────────────────────────────────────── */

.kpi-grid[b-6skbt3t1se] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.kpi-card[b-6skbt3t1se] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-300);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.kpi-card:hover[b-6skbt3t1se] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-color: var(--rz-primary);
}
.kpi-icon[b-6skbt3t1se] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}
.kpi-value[b-6skbt3t1se] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--rz-text-color);
}
.kpi-label[b-6skbt3t1se] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kpi-sub[b-6skbt3t1se] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}
.entry-description[b-6skbt3t1se] {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--rz-text-secondary-color);
    font-size: 0.85rem;
}
.entry-user[b-6skbt3t1se] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.entry-user-avatar[b-6skbt3t1se] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
.entry-user-initials[b-6skbt3t1se] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}
.billable-badge[b-6skbt3t1se] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}
.billable-yes[b-6skbt3t1se] {
    background: color-mix(in srgb, var(--rz-success) 15%, transparent);
    color: var(--rz-success);
}
.billable-no[b-6skbt3t1se] {
    background: color-mix(in srgb, var(--rz-text-tertiary-color) 15%, transparent);
    color: var(--rz-text-tertiary-color);
}
.metrics-page-root[b-6skbt3t1se]  .metrics-skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--rz-base-300) 72%, transparent) 0%,
        color-mix(in srgb, white 72%, var(--rz-base-300)) 50%,
        color-mix(in srgb, var(--rz-base-300) 72%, transparent) 100%);
    background-size: 200% 100%;
    animation: metrics-skeleton-shimmer-b-6skbt3t1se 1.15s linear infinite;
}
@keyframes metrics-skeleton-shimmer-b-6skbt3t1se {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.metrics-page-root[b-6skbt3t1se]  .metrics-loading-card {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 16px;
}
.metrics-loading-filters[b-6skbt3t1se] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem;
}
.metrics-loading-kpis[b-6skbt3t1se] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-row-header,
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-row-header-cell,
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-row-header th,
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-row-header td {
    max-width: 260px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.3;
    vertical-align: top;
}
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-row-header .rz-pivot-header-text,
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-row-header .rz-pivot-drill-down-header {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-value-header,
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-total-cell,
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-value-cell {
    min-width: 88px;
}
/* Hide repeated aggregate sub-header row when only 1 aggregate is active */
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid.single-aggregate .rz-pivot-aggregate-header-row {
    display: none;
}
.metrics-page-root[b-6skbt3t1se]  .metrics-toolbar-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
}
.metrics-page-root[b-6skbt3t1se]  .metrics-toolbar-scroll .rz-selectbar {
    min-width: max-content;
    flex-wrap: nowrap;
}
.metrics-page-root[b-6skbt3t1se]  .metrics-toolbar-scroll .rz-selectbar-item,
.metrics-page-root[b-6skbt3t1se]  .metrics-toolbar-scroll .rz-button-text {
    white-space: nowrap;
}
.metrics-chart-scroll[b-6skbt3t1se],
.metrics-grid-scroll[b-6skbt3t1se] {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.metrics-chart-scroll[b-6skbt3t1se] {
    padding-bottom: 0.25rem;
}
.metrics-chart-canvas[b-6skbt3t1se] {
    width: 100%;
}
/* ─── Page shell: more breathing room around the page title ─── */
.metrics-page-root[b-6skbt3t1se]  .metrics-page-shell {
    padding: 1.5rem 1.75rem 2rem 1.75rem !important;
}

.metrics-page-root[b-6skbt3t1se]  .metrics-page-shell > :first-child {
    /* Página cabecera — separarla visualmente del contenido */
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--rz-base-100);
}

.metrics-grid-scroll[b-6skbt3t1se]  > .metrics-pivot-grid,
.metrics-grid-scroll[b-6skbt3t1se]  > .rz-data-grid {
    min-width: 720px;
}

/* ─── Sticky headers: solid background + subtle shadow so cells don't bleed through ─── */
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-fields-picker,
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-fields-picker-header,
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-header,
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-row-header-row,
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-aggregate-header-row,
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid thead,
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid thead th {
    background: var(--rz-base-background-color) !important;
}

/* "Ajustes de métricas" picker label — give it real breathing room */
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-fields-picker-header {
    padding: 0.9rem 1rem !important;
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--rz-base-200);
    position: sticky;
    top: 0;
    z-index: 6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Pivot grid column headers sit just below the picker header */
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid thead th,
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-aggregate-header-row {
    position: sticky;
    z-index: 5;
    box-shadow: 0 1px 0 var(--rz-base-200);
}

/* Row header column also stays visible while scrolling horizontally */
.metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-row-header {
    background: var(--rz-base-background-color) !important;
}

@media (max-width: 768px) {
    .metrics-page-root[b-6skbt3t1se]  .metrics-page-shell {
        padding: 1rem 1rem 1.5rem 1rem !important;
    }
    .metrics-page-root[b-6skbt3t1se]  .metrics-page-shell .rz-card {
        border-radius: 12px;
    }
    .metrics-grid-scroll[b-6skbt3t1se]  > .metrics-pivot-grid,
    .metrics-grid-scroll[b-6skbt3t1se]  > .rz-data-grid {
        min-width: 840px;
    }
    .metrics-page-root[b-6skbt3t1se]  .metrics-pivot-grid .rz-pivot-fields-picker-header {
        padding: 0.7rem 0.85rem !important;
        font-size: 0.78rem;
    }
}
/* /Components/Pages/Projects/ProjectsBoard.razor.rz.scp.css */
/* Estilos propios de ProjectsBoard — CSS isolation.
   Vienen de wwwroot/css/projects/projects-board.css. Casi todo el marcado es
   HTML propio (root <div class="boards-container">); llevan `::deep`:
   - .project-expand-icon (+ .expanded): la clase va sobre un <RadzenIcon> con
     interpolacion C# (linea 52 del .razor) y no recibe el `b-{hash}`; ancla
     .project-accordion-header (div propio).
   - .stat-inline .rz-icon: iconos que emite <RadzenIcon> dentro del span
     propio .stat-inline.
   El estado .expanded nace en C# pero cae sobre HTML propio (header) o viaja
   con el ::deep del icono. ProjectList lleva sus propias copias de los bloques
   mini-* compartidos: duplicar bloques identicos por componente es lo correcto
   bajo isolation (cada uno con su hash).
   ───────────────────────────────────────────────────────────────────────────── */

/* ProjectsBoard — Jira-style expandable project list with embedded mini-kanbans. */

.boards-container[b-yv3uh7gvpc] {
    padding: 1rem;
    background: var(--rz-body-background-color);
    min-height: 100vh;
}

.boards-header[b-yv3uh7gvpc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.boards-title[b-yv3uh7gvpc] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
    margin: 0;
}

/* Project accordion item */
.project-accordion-item[b-yv3uh7gvpc] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius);
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.project-accordion-header[b-yv3uh7gvpc] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    gap: 0.75rem;
}

.project-accordion-header:hover[b-yv3uh7gvpc] {
    background: var(--rz-base-50);
}

.project-accordion-header.expanded[b-yv3uh7gvpc] {
    border-bottom: 1px solid var(--rz-base-200);
}

.project-accordion-header[b-yv3uh7gvpc]  .project-expand-icon {
    color: var(--rz-text-tertiary-color);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.project-accordion-header[b-yv3uh7gvpc]  .project-expand-icon.expanded {
    transform: rotate(90deg);
}

.project-icon[b-yv3uh7gvpc] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--rz-primary);
    color: var(--rz-on-primary);
    flex-shrink: 0;
}

.project-info[b-yv3uh7gvpc] {
    flex: 1;
    min-width: 0;
}

.project-name[b-yv3uh7gvpc] {
    font-weight: 600;
    color: var(--rz-text-color);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-meta[b-yv3uh7gvpc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.project-code[b-yv3uh7gvpc] {
    font-family: monospace;
    background: var(--rz-base-100);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
}

.project-stats-inline[b-yv3uh7gvpc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    flex-shrink: 0;
}

.stat-inline[b-yv3uh7gvpc] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.stat-inline[b-yv3uh7gvpc]  .rz-icon {
    font-size: 14px;
    color: var(--rz-text-tertiary-color);
}

/* Mini Kanban inside accordion */
.project-board-content[b-yv3uh7gvpc] {
    padding: 1rem;
    background: var(--rz-base-50);
}

.mini-kanban[b-yv3uh7gvpc] {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.mini-kanban[b-yv3uh7gvpc]::-webkit-scrollbar {
    height: 6px;
}

.mini-kanban[b-yv3uh7gvpc]::-webkit-scrollbar-track {
    background: var(--rz-base-200);
    border-radius: 3px;
}

.mini-kanban[b-yv3uh7gvpc]::-webkit-scrollbar-thumb {
    background: var(--rz-base-400);
    border-radius: 3px;
}

.mini-column[b-yv3uh7gvpc] {
    flex: 0 0 240px;
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
    border: 1px solid var(--rz-base-200);
    max-height: 350px;
    display: flex;
    flex-direction: column;
}

.mini-column-header[b-yv3uh7gvpc] {
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--rz-base-200);
    flex-shrink: 0;
}

.mini-column-indicator[b-yv3uh7gvpc] {
    width: 3px;
    height: 14px;
    border-radius: 2px;
}

.mini-column-name[b-yv3uh7gvpc] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rz-text-secondary-color);
}

.mini-column-count[b-yv3uh7gvpc] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-200);
    padding: 0.0625rem 0.3125rem;
    border-radius: 8px;
    margin-left: auto;
}

.mini-column-body[b-yv3uh7gvpc] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.mini-task-card[b-yv3uh7gvpc] {
    background: var(--rz-base-background-color);
    border-radius: 4px;
    padding: 0.5rem;
    border: 1px solid var(--rz-base-200);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mini-task-card:hover[b-yv3uh7gvpc] {
    border-color: var(--rz-primary-light);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.mini-task-header[b-yv3uh7gvpc] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
}

.mini-task-type-icon[b-yv3uh7gvpc] {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mini-task-title[b-yv3uh7gvpc] {
    font-size: 0.75rem;
    color: var(--rz-text-color);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mini-task-footer[b-yv3uh7gvpc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.375rem;
}

.mini-task-code[b-yv3uh7gvpc] {
    font-family: monospace;
    font-size: 0.625rem;
    color: var(--rz-text-tertiary-color);
}

.mini-task-assignee[b-yv3uh7gvpc] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5625rem;
    font-weight: 600;
    color: white;
}

.empty-column-mini[b-yv3uh7gvpc] {
    text-align: center;
    padding: 1rem 0.5rem;
    color: var(--rz-text-tertiary-color);
    font-size: 0.6875rem;
}

.board-loading[b-yv3uh7gvpc] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--rz-text-tertiary-color);
}

.view-full-board-link[b-yv3uh7gvpc] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--rz-primary);
    text-decoration: none;
    margin-top: 0.75rem;
}

.view-full-board-link:hover[b-yv3uh7gvpc] {
    text-decoration: underline;
}
/* /Components/Pages/Projects/ProjectSettings.razor.rz.scp.css */
/* Estilos propios de ProjectSettings — CSS isolation.
   Vienen de wwwroot/css/projects/project-settings.css.

   Llevan `::deep` (anclado en el root <div class="settings-container"> o en un
   elemento HTML propio mas cercano) las reglas cuyo sujeto pinta Radzen o un
   componente hijo:
   - .project-hours-switch* — la clase va sobre <RadzenSwitch> (lineas 420/434
     del .razor, en la tabla de miembros, no en el header) y no recibe hash.
   - .rz-tabview-left .rz-tabview-nav / .rz-tabview-panel — internos de
     RadzenTabs; el sujeto esta DENTRO del componente, asi que ::deep baja bien.
   - .section-visibility-toggle (+ .rz-switch) — marcado del componente hijo
     LinkedSectionVisibilityToggle, renderizado dentro del chip; ancla
     .proposal-section-chip (span propio).

   Estados nacidos en C# (.planned/.active/.completed/.cancelled de sprint,
   .warning/.error de danger-card) caen sobre HTML propio: reciben hash.

   DEUDA ENTRANTE: este componente usa .section-header (linea 615) y esta hoja
   nunca la definio — hoy la pinta commerce/order-detail-dialog.css. Falta la
   contribution del cluster commerce con esa definicion o la cabecera de la
   pestana Propuestas queda sin estilo.

   Excepcion exportada: .media-grid tambien la consume MediaGallery (cluster
   chat-pages) y solo estaba definida aqui — va como contribution en la salida
   de la migracion, este fichero no la comparte.
   ───────────────────────────────────────────────────────────────────────────── */

.settings-container[b-cm4gsehem1] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    background: var(--rz-body-background-color);
}

.settings-header[b-cm4gsehem1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--rz-base-300);
    background: var(--rz-base-background-color);
}

.header-left[b-cm4gsehem1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-right[b-cm4gsehem1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-title h1[b-cm4gsehem1] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--rz-text-color);
    margin: 0;
}

.header-title .project-name[b-cm4gsehem1] {
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    display: block;
    margin-top: 0.125rem;
}

.settings-container[b-cm4gsehem1]  .project-hours-switch.rz-switch {
    background-color: var(--rz-base-300);
}

.settings-container[b-cm4gsehem1]  .project-hours-switch .rz-switch-circle {
    background-color: var(--rz-white);
}

.settings-container[b-cm4gsehem1]  .project-hours-switch.rz-switch-checked {
    background-color: var(--rz-primary);
}

.settings-container[b-cm4gsehem1]  .project-hours-switch.rz-switch-checked .rz-switch-circle {
    background-color: var(--rz-white);
}

/* Sin scroll propio. Con `overflow: auto` y una altura impuesta por el flex padre,
   esta caja abría una segunda barra de desplazamiento DENTRO de la de la página:
   dos barras pegadas en el borde derecho, y la rueda del ratón haciendo una cosa u
   otra según dónde estuviera el puntero. El scroll lo lleva el cuerpo del portal. */
.settings-content[b-cm4gsehem1] {
    flex: 1;
    min-height: 0;
    padding: 1.5rem;
}

.settings-section[b-cm4gsehem1] {
    padding: 1.5rem;
}

.section-title[b-cm4gsehem1] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--rz-text-color);
    margin: 0 0 1.5rem 0;
}

.section-title.danger[b-cm4gsehem1] {
    color: var(--rz-danger);
}

.member-avatar[b-cm4gsehem1] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.danger-card[b-cm4gsehem1] {
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.danger-card.warning[b-cm4gsehem1] {
    border: 1px solid var(--rz-warning);
    background: color-mix(in srgb, var(--rz-warning) 8%, transparent);
}

.danger-card.error[b-cm4gsehem1] {
    border: 1px solid var(--rz-danger);
    background: color-mix(in srgb, var(--rz-danger) 8%, transparent);
}

/* Media grid */
.media-grid[b-cm4gsehem1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.media-card[b-cm4gsehem1] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.media-card:hover[b-cm4gsehem1] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.media-preview[b-cm4gsehem1] {
    aspect-ratio: 16/9;
    background: var(--rz-base-200);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.media-preview img[b-cm4gsehem1],
.media-preview video[b-cm4gsehem1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-info[b-cm4gsehem1] {
    padding: 0.75rem;
}

.media-actions[b-cm4gsehem1] {
    padding: 0 0.75rem 0.75rem;
    display: flex;
    justify-content: flex-end;
}

/* Tabs styling — behind .settings-container, this page's root element.
   ProjectSettings is the only screen using TabPosition.Left today, so this is
   the same set of elements it was already matching; the scope is what stops the
   next left-tabbed page from silently inheriting a 180px rail. */
/* El carril tiene su propia superficie. En blanco sobre blanco no se leía como un
   carril de navegación sino como una lista suelta flotando junto al contenido: sin
   fondo, sin estado activo visible y sin nada que separase una pestaña de otra. */
/* Tarjeta, no columna. El carril se encoge a su contenido —el propio RadzenTabs mide
   por el contenido, no por el alto disponible—, así que pintado como columna de borde
   a borde se ve CORTADO: el gris termina bajo la última pestaña y debajo queda blanco,
   como si faltara algo. Con esquinas redondeadas y borde completo termina donde tiene
   que terminar y se lee como una caja deliberada. Estirarlo al alto del panel exigiría
   encadenar alturas desde el shell hasta aquí, que es justo la clase de plomería que
   se rompe la próxima vez que alguien toca el layout. */
.settings-container[b-cm4gsehem1]  .rz-tabview-left .rz-tabview-nav {
    min-width: 200px;
    padding: 0.5rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    background: var(--rz-base-100, var(--rz-base-background-color));
    align-self: flex-start;
}

/* La SELECCIÓN se deja a Radzen. Se intentó sustituirla por una pastilla propia y salió
   peor: un recuadro morado duro alrededor de la pestaña. El indicador nativo ya resuelve
   ese trabajo, y lo que faltaba no era la marca de activo sino el carril donde vive. */

.settings-container[b-cm4gsehem1]  .rz-tabview-left .rz-tabview-nav li .rz-tabview-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}

.settings-container[b-cm4gsehem1]  .rz-tabview-left .rz-tabview-nav li .rz-tabview-title .rzi,
.settings-container[b-cm4gsehem1]  .rz-tabview-left .rz-tabview-nav li .rz-tabview-title i {
    font-size: 1.15rem;
    opacity: 0.85;
}

.settings-container[b-cm4gsehem1]  .rz-tabview-left .rz-tabview-panel {
    padding: 0 0 0 1.5rem;
}

@media (max-width: 768px) {
    .settings-container[b-cm4gsehem1]  .rz-tabview-left .rz-tabview-nav {
        min-width: 0;
    }

    .settings-container[b-cm4gsehem1]  .rz-tabview-left .rz-tabview-panel {
        padding-left: 0.75rem;
    }
}

/* Project Avatar Edit */
.project-avatar-edit[b-cm4gsehem1] {
    flex-shrink: 0;
}

.project-avatar-img[b-cm4gsehem1] {
    width: 64px;
    height: 64px;
    border-radius: var(--rz-border-radius);
    object-fit: cover;
    border: 2px solid var(--rz-base-300);
}

.project-avatar-initials[b-cm4gsehem1] {
    width: 64px;
    height: 64px;
    border-radius: var(--rz-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    color: white;
    text-transform: uppercase;
}

/* Sprints */
.sprints-actions[b-cm4gsehem1] {
    margin-bottom: 1rem;
}

.sprints-list[b-cm4gsehem1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sprint-card[b-cm4gsehem1] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    padding: 1rem;
    transition: border-color 0.2s;
}

.sprint-card.active[b-cm4gsehem1] {
    border-color: var(--rz-info);
    background: color-mix(in srgb, var(--rz-info) 5%, var(--rz-base-background-color));
}

.sprint-card.completed[b-cm4gsehem1] {
    opacity: 0.7;
}

.sprint-card.cancelled[b-cm4gsehem1] {
    opacity: 0.5;
}

.sprint-header[b-cm4gsehem1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.sprint-info[b-cm4gsehem1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sprint-number[b-cm4gsehem1] {
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    font-size: 0.85rem;
}

.sprint-name[b-cm4gsehem1] {
    font-weight: 600;
    font-size: 1rem;
}

.sprint-status-badge[b-cm4gsehem1] {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.sprint-status-badge.planned[b-cm4gsehem1] {
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
}

.sprint-status-badge.active[b-cm4gsehem1] {
    background: var(--rz-info);
    color: white;
}

.sprint-status-badge.completed[b-cm4gsehem1] {
    background: var(--rz-success);
    color: white;
}

.sprint-status-badge.cancelled[b-cm4gsehem1] {
    background: var(--rz-danger);
    color: white;
}

.sprint-actions[b-cm4gsehem1] {
    display: flex;
    gap: 0.25rem;
}

.sprint-goal[b-cm4gsehem1] {
    color: var(--rz-text-secondary-color);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sprint-dates[b-cm4gsehem1] {
    color: var(--rz-text-secondary-color);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sprint-progress[b-cm4gsehem1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sprint-progress .progress-text[b-cm4gsehem1] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.empty-state[b-cm4gsehem1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--rz-text-secondary-color);
}

.empty-state p[b-cm4gsehem1] {
    margin: 1rem 0 0.25rem;
    font-weight: 500;
}

.empty-state .hint[b-cm4gsehem1] {
    font-size: 0.85rem;
}

/* Proposals */
/* Action row inside the unified proposals empty state (create / link existing). */
.proposals-empty-actions[b-cm4gsehem1] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.proposals-layout[b-cm4gsehem1] {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.2fr);
    gap: 1.5rem;
    align-items: start;
}

/* Editando: una sola columna y el editor arriba. Se hace con `order` y no moviendo
   el marcado para que la lista siga siendo el mismo nodo — así el DataGrid no se
   desmonta y se remonta cada vez que se abre o cierra el editor. */
.proposals-layout.is-editing[b-cm4gsehem1] {
    grid-template-columns: 1fr;
}

.proposals-layout.is-editing .proposal-editor[b-cm4gsehem1] {
    order: -1;
}

/* Con el editor abierto la lista es un secundario: se le baja el peso para que el
   ojo caiga primero en el formulario, que es donde se está trabajando. */
.proposals-layout.is-editing .proposals-list[b-cm4gsehem1] {
    opacity: 0.85;
}

.proposal-editor[b-cm4gsehem1] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* ── Rejilla de campos del editor ──────────────────────────────────────────
   auto-fit + minmax: a ancho completo fluyen tres o cuatro por fila, y en móvil
   caen a una sola sin necesitar una media query por pareja de campos. */
.proposal-fields[b-cm4gsehem1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.25rem;
    padding: 1rem 0 0.25rem;
    border-top: 1px solid var(--rz-base-200);
}

.proposal-field[b-cm4gsehem1] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.proposal-field[b-cm4gsehem1]  .rz-form-field-label,
.proposal-field[b-cm4gsehem1]  label {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

/* El importe calculado se lee como un dato, no como un campo vacío: sin caja de
   input, con el número en grande y la razón debajo. */
.proposal-field--readonly .proposal-field__value[b-cm4gsehem1] {
    font-size: 1.125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.6;
}

.proposal-field__hint[b-cm4gsehem1] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

@media (max-width: 1024px) {
    .proposals-layout[b-cm4gsehem1] {
        grid-template-columns: 1fr;
    }
}

.proposal-lineitems[b-cm4gsehem1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.line-item-row[b-cm4gsehem1] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 6px;
    background: var(--rz-base-100);
}

.line-item-meta[b-cm4gsehem1] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.line-item-total[b-cm4gsehem1] {
    font-weight: 600;
    white-space: nowrap;
}

.line-item-remove[b-cm4gsehem1] {
    border: none;
    background: transparent;
    color: var(--rz-danger);
    cursor: pointer;
}

.line-item-form[b-cm4gsehem1] {
    display: grid;
    grid-template-columns: 1.5fr 80px 70px 120px auto;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
}

.proposal-send-overlay[b-cm4gsehem1] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}

.proposal-send-modal[b-cm4gsehem1] {
    width: 420px;
    max-width: 90vw;
    background: var(--rz-base-background-color);
    border-radius: 10px;
    padding: 1.25rem;
    border: 1px solid var(--rz-base-300);
}

/* Section ↔ proposal link chips (admin-only, in the proposal detail panel). */
.proposal-section-chips[b-cm4gsehem1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.proposal-section-chip[b-cm4gsehem1] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.4rem 0.2rem 0.5rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 999px;
    background: var(--rz-base-100);
    font-size: 0.8125rem;
}

.proposal-section-chip-link[b-cm4gsehem1] {
    border: none;
    background: transparent;
    color: var(--rz-primary);
    cursor: pointer;
    padding: 0;
    font: inherit;
    text-decoration: none;
}

.proposal-section-chip-link:hover[b-cm4gsehem1] {
    text-decoration: underline;
}

.proposal-section-chip-remove[b-cm4gsehem1] {
    display: inline-flex;
    align-items: center;
    border: none;
    background: transparent;
    color: var(--rz-text-tertiary-color);
    cursor: pointer;
    padding: 0;
}

.proposal-section-chip-remove:hover[b-cm4gsehem1] {
    color: var(--rz-danger);
}

/* Compact menu-visibility switch inside a linked-section chip: scaled down so
   the pill keeps its height (LinkedSectionVisibilityToggle component). */
.proposal-section-chip[b-cm4gsehem1]  .section-visibility-toggle {
    display: inline-flex;
    align-items: center;
}

.proposal-section-chip[b-cm4gsehem1]  .section-visibility-toggle .rz-switch {
    transform: scale(0.72);
    margin: -0.35rem -0.3rem;
}

/* ── Contribución cross-cluster (de commerce/order-detail-dialog.css) aplicada por el orquestador ── */
/* Pegar en ProjectSettings.razor.css (salda la 'deuda entrante' declarada en su cabecera).
   De commerce/order-detail-dialog.css (borrada): unica definicion que ponia en fila
   la cabecera de la pestana Sprints (ProjectSettings.razor:615); theme.css:1058 solo
   conserva el margin-bottom. Sujeto = <div> propio: regla directa. */
.section-header[b-cm4gsehem1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* /Components/Pages/Projects/ProjectsGantt.razor.rz.scp.css */
/* PENDIENTE DE DECISION — colores de marca ajena, no tokenizados.
   Este Gantt usa la paleta de Atlassian a proposito (#0052CC azul Jira, #6554C0
   morado, #00875A verde, #DE350B rojo) y las clases se llaman `jira-*`. Por eso
   NO se han pasado a token en la migracion, a diferencia del resto de hojas:
   hacerlo le cambiaria el aspecto, y eso es una decision de producto, no una
   mudanza.

   Pero tiene coste y conviene no olvidarlo: estos 14 literales NO siguen al
   color primario que el cliente configure desde la UI, y en modo oscuro se
   quedan igual sobre fondo oscuro. Los tres semanticos son los que peor
   encajan — `done`, `blocked` y `overdue` deberian salir de --rz-success,
   --rz-danger y --rz-warning, que ya existen y ya se pintan en oscuro.
   ───────────────────────────────────────────────────────────────────────── */

/* Estilos propios de ProjectsGantt — CSS isolation.
   Vienen de wwwroot/css/projects/projects-gantt.css. Verificado: ningun otro componente depende de
   estas clases sin declararlas en su propia hoja.
   ───────────────────────────────────────────────────────────────────────── */

/* ProjectsGantt — Jira-style global Gantt with drag/resize bars. */

.jira-gantt[b-io4fs60ogw] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    background: var(--rz-base-background-color);
    overflow: hidden;
}

.jira-gantt-toolbar[b-io4fs60ogw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--rz-base-100);
    border-bottom: 1px solid var(--rz-base-300);
}

.jira-gantt-filter-section[b-io4fs60ogw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.jira-gantt-utility[b-io4fs60ogw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 999px;
    background: var(--rz-base-background-color);
}

.jira-gantt-utility.active[b-io4fs60ogw] {
    border-color: rgba(0, 82, 204, 0.35);
    background: rgba(0, 82, 204, 0.08);
}

.jira-gantt-utility-copy[b-io4fs60ogw] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.1;
}

.jira-gantt-utility-copy strong[b-io4fs60ogw] {
    font-size: 0.78rem;
    color: var(--rz-text-color);
}

.jira-gantt-utility-copy span[b-io4fs60ogw] {
    font-size: 0.68rem;
    color: var(--rz-text-secondary-color);
}

.jira-gantt-toggle[b-io4fs60ogw] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

.jira-gantt-body[b-io4fs60ogw] {
    display: flex;
    overflow: auto;
    max-height: calc(100vh - 280px);
    -webkit-user-select: none;
    user-select: none;
}

/* Left panel - Fixed columns */
.jira-gantt-left[b-io4fs60ogw] {
    flex-shrink: 0;
    width: 600px;
    border-right: 2px solid var(--rz-base-300);
    background: var(--rz-base-background-color);
    position: sticky;
    left: 0;
    z-index: 10;
}

.jira-gantt-header-row[b-io4fs60ogw] {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 90px 90px 120px;
    background: var(--rz-base-200);
    border-bottom: 1px solid var(--rz-base-300);
    position: sticky;
    top: 0;
    z-index: 11;
}

.jira-gantt-header-cell[b-io4fs60ogw] {
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-right: 1px solid var(--rz-base-300);
}

.jira-gantt-header-cell:last-child[b-io4fs60ogw] { border-right: none; }

.jira-gantt-row[b-io4fs60ogw] {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 90px 90px 120px;
    border-bottom: 1px solid var(--rz-base-200);
    min-height: 40px;
    align-items: center;
    cursor: pointer;
    transition: background 0.1s ease;
}

.jira-gantt-row:hover[b-io4fs60ogw] { background: var(--rz-base-50); }
.jira-gantt-row.project-row[b-io4fs60ogw] { background: var(--rz-base-100); font-weight: 600; }
.jira-gantt-row.project-row:hover[b-io4fs60ogw] { background: var(--rz-base-200); }
.jira-gantt-row.dragging[b-io4fs60ogw] { background: var(--rz-primary-lighter); }

.jira-gantt-cell[b-io4fs60ogw] {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    border-right: 1px solid var(--rz-base-200);
    overflow: hidden;
}

.jira-gantt-cell:last-child[b-io4fs60ogw] { border-right: none; }

.jira-issue-cell[b-io4fs60ogw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.jira-issue-icon[b-io4fs60ogw] {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.jira-issue-icon.project[b-io4fs60ogw] { background: #6554C0; cursor: pointer; }
.jira-issue-icon.task[b-io4fs60ogw] { background: #4BADE8; }
.jira-issue-icon.epic[b-io4fs60ogw] { background: #6554C0; }

.jira-expand-btn[b-io4fs60ogw] {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    color: var(--rz-text-secondary-color);
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.jira-expand-btn:hover[b-io4fs60ogw] {
    background: var(--rz-base-200);
    color: var(--rz-text-color);
}

.jira-task-count[b-io4fs60ogw] {
    background: var(--rz-base-300);
    color: var(--rz-text-secondary-color);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    flex-shrink: 0;
    margin-left: 0.25rem;
}

.jira-issue-key[b-io4fs60ogw] {
    font-size: 0.75rem;
    color: var(--rz-primary);
    font-weight: 500;
    text-decoration: none;
    flex-shrink: 0;
}

.jira-issue-key:hover[b-io4fs60ogw] { text-decoration: underline; }

.jira-issue-title[b-io4fs60ogw] {
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--rz-text-color);
}

.jira-date-cell[b-io4fs60ogw] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    text-align: center;
}

.jira-date-cell.updated[b-io4fs60ogw] {
    color: var(--rz-success);
    font-weight: 600;
}

.jira-status-badge[b-io4fs60ogw] {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.jira-status-badge.todo[b-io4fs60ogw] { background: var(--rz-base-200); color: var(--rz-text-secondary-color); }
.jira-status-badge.in-progress[b-io4fs60ogw] { background: rgba(100, 140, 200, 0.15); color: rgba(100, 140, 200, 0.9); }
.jira-status-badge.in-review[b-io4fs60ogw] { background: rgba(140, 100, 180, 0.12); color: rgba(140, 100, 180, 0.9); }
.jira-status-badge.testing[b-io4fs60ogw] { background: rgba(80, 160, 180, 0.12); color: rgba(80, 160, 180, 0.9); }
.jira-status-badge.done[b-io4fs60ogw] { background: rgba(90, 160, 90, 0.15); color: rgba(90, 160, 90, 0.9); }
.jira-status-badge.blocked[b-io4fs60ogw] { background: rgba(190, 100, 90, 0.15); color: rgba(190, 100, 90, 0.9); }

/* Right panel - Timeline */
.jira-gantt-right[b-io4fs60ogw] {
    flex: 1;
    min-width: 500px;
}

.jira-timeline-header[b-io4fs60ogw] {
    display: flex;
    flex-direction: column;
    background: var(--rz-base-200);
    border-bottom: 1px solid var(--rz-base-300);
    position: sticky;
    top: 0;
    z-index: 9;
}

.jira-timeline-months[b-io4fs60ogw] {
    display: flex;
    border-bottom: 1px solid var(--rz-base-300);
}

.jira-timeline-month[b-io4fs60ogw] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--rz-text-color);
    padding: 0.375rem 0.5rem;
    border-right: 1px solid var(--rz-base-300);
    text-align: center;
}

.jira-timeline-days[b-io4fs60ogw] {
    display: flex;
}

.jira-timeline-day[b-io4fs60ogw] {
    flex-shrink: 0;
    width: var(--day-width, 32px);
    text-align: center;
    font-size: 0.65rem;
    padding: 0.25rem 0;
    border-right: 1px solid var(--rz-base-200);
    color: var(--rz-text-tertiary-color);
}

.jira-timeline-day.weekend[b-io4fs60ogw] { background: var(--rz-base-100); color: var(--rz-text-tertiary-color); }
.jira-timeline-day.today[b-io4fs60ogw] {
    background: #FFF0B3;
    color: #172B4D;
    font-weight: 700;
}

.jira-timeline-day.today[b-io4fs60ogw]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100vh;
    background: #FFAB00;
    z-index: 100;
}

.jira-timeline-body[b-io4fs60ogw] { position: relative; }

.jira-bar-row[b-io4fs60ogw] {
    display: flex;
    align-items: center;
    min-height: 40px;
    border-bottom: 1px solid var(--rz-base-200);
    position: relative;
}

.jira-bar-row.project-row[b-io4fs60ogw] { background: var(--rz-base-100); }

.jira-grid-day[b-io4fs60ogw] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--day-width, 32px);
    border-right: 1px solid var(--rz-base-200);
}

.jira-grid-day.weekend[b-io4fs60ogw] { background: rgba(0,0,0,0.02); }
.jira-grid-day.today[b-io4fs60ogw] { background: rgba(255, 171, 0, 0.1); }

.jira-bar[b-io4fs60ogw] {
    position: absolute;
    height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 500;
    color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    z-index: 5;
    background: #0052CC;
}

.jira-bar.project-bar[b-io4fs60ogw] { background: #6554C0; height: 24px; }
.jira-bar.task-bar[b-io4fs60ogw] { background: #0052CC; }
.jira-bar.task-bar.done[b-io4fs60ogw] { background: #00875A; opacity: 0.7; }
.jira-bar.task-bar.blocked[b-io4fs60ogw] { background: #DE350B; }
.jira-bar.task-bar.overdue[b-io4fs60ogw] {
    background: #FF5630;
    animation: jira-pulse-b-io4fs60ogw 2s infinite;
}

.jira-bar.task-bar.draggable[b-io4fs60ogw] {
    cursor: grab;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.jira-bar.task-bar.draggable:hover[b-io4fs60ogw] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.jira-bar.task-bar.dragging[b-io4fs60ogw] {
    cursor: grabbing;
    opacity: 0.9;
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    z-index: 100;
}

.jira-bar.project-bar.draggable[b-io4fs60ogw] {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.jira-bar.project-bar.draggable:hover[b-io4fs60ogw] {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.jira-bar.project-bar.dragging[b-io4fs60ogw] {
    opacity: 0.9;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    z-index: 100;
}

.jira-bar.project-bar.draggable:hover .jira-bar-handle[b-io4fs60ogw] { opacity: 1; }

.jira-bar-handle[b-io4fs60ogw] {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 14px;
    cursor: ew-resize;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.jira-bar.draggable:hover .jira-bar-handle[b-io4fs60ogw] { opacity: 1; }

.jira-bar-handle-left[b-io4fs60ogw] {
    left: -4px;
    border-radius: 4px 0 0 4px;
    background: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, transparent 100%);
}
.jira-bar-handle-right[b-io4fs60ogw] {
    right: -4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(-90deg, rgba(0,0,0,0.25) 0%, transparent 100%);
}
.jira-bar-handle:hover[b-io4fs60ogw] {
    background: rgba(0,0,0,0.5) !important;
    opacity: 1;
}

.jira-bar-handle[b-io4fs60ogw]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 10px;
    border-left: 2px solid rgba(255,255,255,0.7);
    border-right: 2px solid rgba(255,255,255,0.7);
}

.jira-bar-label[b-io4fs60ogw] {
    padding: 0 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.jira-bar-arrow[b-io4fs60ogw] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
}

.jira-bar-arrow-left[b-io4fs60ogw] {
    left: -6px;
    border-width: 6px 6px 6px 0;
    border-color: transparent #0052CC transparent transparent;
}

.jira-bar-arrow-right[b-io4fs60ogw] {
    right: -6px;
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent #0052CC;
}

@keyframes jira-pulse-b-io4fs60ogw {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 86, 48, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(255, 86, 48, 0); }
}

/* Footer */
.jira-gantt-footer[b-io4fs60ogw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--rz-base-100);
    border-top: 1px solid var(--rz-base-300);
    font-size: 0.75rem;
}

.jira-gantt-legend[b-io4fs60ogw] {
    display: flex;
    gap: 1.5rem;
}

.jira-legend-item[b-io4fs60ogw] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.jira-legend-color[b-io4fs60ogw] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.save-indicator[b-io4fs60ogw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.save-indicator.saving[b-io4fs60ogw] { color: var(--rz-warning); }
.save-indicator.saved[b-io4fs60ogw] { color: var(--rz-success); }
.save-indicator.error[b-io4fs60ogw] { color: var(--rz-danger); }

.jira-gantt-empty[b-io4fs60ogw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/Projects/ProjectSummaryDialog.razor.rz.scp.css */
/* Estilos propios de ProjectSummaryDialog — CSS isolation.
   Vienen de wwwroot/css/projects/project-summary-dialog.css. Todo el marcado
   es HTML propio (root <div class="summary-container">, sin MarkupString), asi
   que nada necesita `::deep` ni envoltorio. Los estados .negative/.attention/
   .positive y health-ok/warning/danger nacen por interpolacion C#
   (GetHealthClass) pero caen sobre divs/spans propios: reciben hash igual.
   ───────────────────────────────────────────────────────────────────────────── */

/* ProjectSummaryDialog — AI summary surface with metrics and email actions. */

.summary-container[b-dusj0p9mtq] {
    padding: 0;
}

.summary-header[b-dusj0p9mtq] {
    background: var(--rz-header-background-color);
    color: var(--rz-text-contrast-color);
    padding: 1.5rem;
    margin: -1rem -1rem 1rem -1rem;
    border-radius: var(--rz-border-radius) var(--rz-border-radius) 0 0;
}

.summary-header h3[b-dusj0p9mtq] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
}

.summary-header p[b-dusj0p9mtq] {
    margin: 0;
    opacity: 0.9;
    font-size: 0.875rem;
}

.metrics-grid[b-dusj0p9mtq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.metric-card[b-dusj0p9mtq] {
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--rz-border-color);
}

.metric-value[b-dusj0p9mtq] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--rz-primary);
}

.metric-value.negative[b-dusj0p9mtq] { color: var(--rz-danger); }
.metric-value.attention[b-dusj0p9mtq] { color: var(--rz-warning); }
.metric-value.positive[b-dusj0p9mtq] { color: var(--rz-success); }

.metric-label[b-dusj0p9mtq] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    margin-top: 0.25rem;
}

.health-badge[b-dusj0p9mtq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    margin-bottom: 1rem;
}

.health-ok[b-dusj0p9mtq] { background: var(--rz-success-lighter); color: var(--rz-success-dark); }
.health-warning[b-dusj0p9mtq] { background: var(--rz-warning-lighter); color: var(--rz-warning-dark); }
.health-danger[b-dusj0p9mtq] { background: var(--rz-danger-lighter); color: var(--rz-danger-dark); }

.progress-section[b-dusj0p9mtq] {
    margin-bottom: 1.5rem;
}

.progress-bar[b-dusj0p9mtq] {
    background: var(--rz-base-300);
    border-radius: 10px;
    height: 24px;
    overflow: hidden;
    margin: 0.5rem 0;
}

.progress-fill[b-dusj0p9mtq] {
    background: linear-gradient(90deg, var(--rz-primary) 0%, var(--rz-info) 100%);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rz-text-contrast-color);
    font-weight: 600;
    font-size: 0.75rem;
    transition: width 0.5s ease;
}

.critical-issues[b-dusj0p9mtq] {
    background: var(--rz-warning-lighter);
    border: 1px solid var(--rz-warning-light);
    border-radius: var(--rz-border-radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.critical-issues h4[b-dusj0p9mtq] {
    color: var(--rz-warning-dark);
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
}

.critical-issues ul[b-dusj0p9mtq] {
    margin: 0;
    padding-left: 1.25rem;
}

.critical-issues li[b-dusj0p9mtq] {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.email-section[b-dusj0p9mtq] {
    background: var(--rz-base-100);
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.email-section h4[b-dusj0p9mtq] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
}

.summary-container .actions[b-dusj0p9mtq] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rz-border-color);
}
/* /Components/Pages/Projects/SprintDialog.razor.rz.scp.css */
/* Estilos propios de SprintDialog — CSS isolation.
   Vienen de wwwroot/css/projects/sprint-dialog.css. Todos los selectores van
   compuestos bajo el root <div class="sprint-dialog"> y los divs .form-group/
   .form-row/.sprint-duration/.dialog-buttons estan escritos en el propio
   .razor (dentro de EditForm, que no les quita el `b-{hash}`): nada necesita
   `::deep` ni envoltorio. Los nombres genericos (form-group, dialog-buttons)
   quedan asi acotados a este dialogo y dejan de pelear con otras hojas.
   ───────────────────────────────────────────────────────────────────────────── */

/* SprintDialog — sprint creation form layout. */

.sprint-dialog[b-rbj5i7oejy] {
    padding: 0.5rem;
}

.sprint-dialog .form-group[b-rbj5i7oejy] {
    margin-bottom: 1rem;
}

.sprint-dialog .form-row[b-rbj5i7oejy] {
    display: flex;
    gap: 1rem;
}

.sprint-dialog .form-row .form-group[b-rbj5i7oejy] {
    flex: 1;
}

.sprint-dialog .sprint-duration[b-rbj5i7oejy] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--rz-base-100);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    margin-bottom: 1rem;
}

.sprint-dialog .dialog-buttons[b-rbj5i7oejy] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rz-base-300);
}
/* /Components/Pages/Projects/TaskDetailDialog.razor.rz.scp.css */
/* Estilos propios de TaskDetailDialog — CSS isolation.
   Vienen de wwwroot/css/projects/task-detail-dialog.css (SPLIT):
   - El chrome del diálogo Radzen que vive POR ENCIMA de este marcado
     (.rz-dialog-content:has(.task-dialog) y .rz-dialog-side.dalatic-detail-dialog
     con su titlebar) NO puede acotarse — ::deep sólo baja — y quedó en
     wwwroot/css/projects/task-detail-dialog-chrome.css (leer su cabecera).
   - El bloque .task-member-picker se fue con TaskMemberPickerDialog.

   Llevan `::deep` (ancla siempre un elemento HTML propio de este .razor):
   - TODA la familia .markdown-content descendiente (p/ul/code/img…): el HTML
     interno llega en runtime por MarkupString / CommentBodyRenderer, el
     compilador no lo marca. Los elementos .markdown-content en sí SÍ son divs
     propios (descripción, resumen IA, comentarios) y conservan el hash.
   - .desc-img-wrapper / .desc-img-delete: DOM que CREA
     wwwroot/js/editor/task-paste.js al pegar imágenes — anclados en .task-main.
   - .ai-summary-icon (RadzenIcon CssClass) y .comment-archived-notice__icon/__cta
     (RadzenIcon/RadzenButton dentro del aviso de proyecto archivado).
   - Los iconos .rzi de .task-type-badge/.section-header/.priority-badge/
     .action-btn/.attachment-dropzone/.preview-not-available (los emite
     <RadzenIcon>).
   - .attachment-dropzone input[type="file"]: lo renderiza <InputFile>
     (componente), no este marcado.
   - .detail-value-dateedit .rz-datepicker/.rz-inputtext (internos de
     RadzenDatePicker).
   - .preview-modal-content img/iframe/video: parte del contenido llega por
     MarkupString (_documentPreviewHtml).

   Estados nacidos en C# (.dragging, .is-dragging, .active, .selected,
   .completed, .warning/.danger del contador, --loading, --sending,
   tk-reaction-chip--active…) caen sobre HTML propio: reciben hash.

   .assignee-dropdown .assignee-option está MUERTO (sin consumidor en el repo)
   — se copia igual, byte a byte, sin "mejorarlo".
   ───────────────────────────────────────────────────────────────────────────── */

    .task-dialog[b-3vh2q5sbxi] {
        /* Outer Radzen dialog (DialogOptions Width/Height) controls the
           footprint. The inner wrapper must fill it 100% — the old
           `max-width: min(1200px, 96vw)` was capping the content to
           1200 px even inside a 1600 px dialog, which left a white
           gutter on each side. Removed; the dialog now uses every pixel
           Radzen gives it. Radius is also dropped here so the rounded
           corners stay with the outer `.rz-dialog` chrome instead of
           being drawn twice. */
        display: flex;
        gap: 0;
        width: 100%;
        height: 100%;
        background: var(--rz-base-background-color);
        overflow: hidden;
    }

    /* Loading / empty variants keep the same footprint as the real dialog
       so nothing jumps when data arrives. Mirrors ServiceDesk's
       .ticket-dialog--loading pattern. */
    .task-dialog--loading[b-3vh2q5sbxi] {
        min-height: 500px;
        align-items: stretch;
        flex-direction: column;
    }

    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* MAIN CONTENT                                                                */
    /* ═══════════════════════════════════════════════════════════════════════════ */
    
    .task-main[b-3vh2q5sbxi] {
        flex: 1;
        padding: 1.625rem 1.5rem;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        border-right: 1px solid var(--rz-base-200);
        min-width: 0;
        /* Required for `overflow-y: auto` to engage inside a flex
           container. Without this the flex item refuses to shrink below
           its content height and the scroll never appears. */
        min-height: 0;
        height: 100%;
        background: var(--rz-base-background-color);
    }
    
    .task-breadcrumb[b-3vh2q5sbxi] {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.75rem;
        color: var(--rz-text-tertiary-color);
    }
    
    .task-breadcrumb a[b-3vh2q5sbxi] {
        color: var(--rz-primary);
        text-decoration: none;
    }
    
    .task-breadcrumb a:hover[b-3vh2q5sbxi] {
        text-decoration: underline;
    }
    
    .task-header[b-3vh2q5sbxi] {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .task-type-badge[b-3vh2q5sbxi] {
        width: 24px;
        height: 24px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .task-type-badge[b-3vh2q5sbxi]  .rzi {
        font-size: 14px;
        color: white;
    }
    
    .task-header-content[b-3vh2q5sbxi] {
        flex: 1;
        min-width: 0;
    }
    
    .task-title-input[b-3vh2q5sbxi] {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--rz-text-color);
        border: none;
        background: transparent;
        width: 100%;
        padding: 0;
        margin: 0;
        outline: none;
        line-height: 1.4;
    }
    
    .task-title-input:focus[b-3vh2q5sbxi] {
        background: var(--rz-base-100);
        border-radius: 4px;
        padding: 0.25rem 0.5rem;
        margin: -0.25rem -0.5rem;
    }
    
    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* DESCRIPTION                                                                 */
    /* ═══════════════════════════════════════════════════════════════════════════ */
    
    .section-header[b-3vh2q5sbxi] {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--rz-text-color);
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }
    
    .section-header[b-3vh2q5sbxi]  .rzi {
        font-size: 0.875rem;
        color: var(--rz-text-tertiary-color);
    }
    
    .description-content[b-3vh2q5sbxi] {
        background: var(--rz-base-100);
        border-radius: 6px;
        padding: 0.75rem;
        min-height: 80px;
        font-size: 0.8125rem;
        color: var(--rz-text-secondary-color);
        line-height: 1.6;
        cursor: pointer;
        border: 1px solid transparent;
        transition: all 0.15s ease;
    }
    
    .description-content:hover[b-3vh2q5sbxi] {
        background: var(--rz-base-50);
        border-color: var(--rz-base-300);
    }
    
    .description-placeholder[b-3vh2q5sbxi] {
        color: var(--rz-text-tertiary-color);
        font-style: italic;
    }
    
    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* MARKDOWN CONTENT STYLING                                                    */
    /* ═══════════════════════════════════════════════════════════════════════════ */
    
    .markdown-content[b-3vh2q5sbxi]  p {
        margin: 0 0 0.5em 0;
    }
    
    .markdown-content[b-3vh2q5sbxi]  p:last-child {
        margin-bottom: 0;
    }
    
    .markdown-content[b-3vh2q5sbxi]  ul, .markdown-content[b-3vh2q5sbxi]  ol {
        margin: 0.5em 0;
        padding-left: 1.5em;
    }
    
    .markdown-content[b-3vh2q5sbxi]  li {
        margin: 0.25em 0;
    }
    
    .markdown-content[b-3vh2q5sbxi]  code {
        background: var(--rz-base-200);
        padding: 0.125em 0.375em;
        border-radius: 4px;
        font-size: 0.9em;
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .markdown-content[b-3vh2q5sbxi]  pre {
        background: var(--rz-base-200);
        padding: 0.75em;
        border-radius: 6px;
        overflow-x: auto;
        margin: 0.5em 0;
    }
    
    .markdown-content[b-3vh2q5sbxi]  pre code {
        background: transparent;
        padding: 0;
    }
    
    .markdown-content[b-3vh2q5sbxi]  blockquote {
        border-left: 3px solid var(--rz-primary);
        padding-left: 1em;
        margin: 0.5em 0;
        color: var(--rz-text-secondary-color);
    }
    
    .markdown-content[b-3vh2q5sbxi]  h1, .markdown-content[b-3vh2q5sbxi]  h2, .markdown-content[b-3vh2q5sbxi]  h3, 
    .markdown-content[b-3vh2q5sbxi]  h4, .markdown-content[b-3vh2q5sbxi]  h5, .markdown-content[b-3vh2q5sbxi]  h6 {
        margin: 0.75em 0 0.5em 0;
        font-weight: 600;
    }
    
    .markdown-content[b-3vh2q5sbxi]  h1 { font-size: 1.25em; }
    .markdown-content[b-3vh2q5sbxi]  h2 { font-size: 1.15em; }
    .markdown-content[b-3vh2q5sbxi]  h3 { font-size: 1.05em; }
    
    .markdown-content[b-3vh2q5sbxi]  a {
        color: var(--rz-primary);
        text-decoration: none;
    }
    
    .markdown-content[b-3vh2q5sbxi]  a:hover {
        text-decoration: underline;
    }
    
    .markdown-content[b-3vh2q5sbxi]  table {
        border-collapse: collapse;
        width: 100%;
        margin: 0.5em 0;
    }
    
    .markdown-content[b-3vh2q5sbxi]  th, .markdown-content[b-3vh2q5sbxi]  td {
        border: 1px solid var(--rz-base-300);
        padding: 0.5em;
        text-align: left;
    }
    
    .markdown-content[b-3vh2q5sbxi]  th {
        background: var(--rz-base-100);
        font-weight: 600;
    }

    /* Inline images in markdown (description/comments) */
    .markdown-content[b-3vh2q5sbxi]  img {
        max-width: 100%;
        border-radius: 6px;
        margin: 0.25rem 0;
        cursor: pointer;
    }

    /* A pasted screenshot in the DESCRIPTION only had max-width:100%, so a big
       capture filled the whole panel. Bound it to a preview box — a click opens
       the existing lightbox (comment-img-preview.js also targets this now). */
    .description-content.markdown-content[b-3vh2q5sbxi]  img {
        max-width: min(420px, 100%);
        max-height: 320px;
        cursor: zoom-in;
    }

    .comments-list .markdown-content[b-3vh2q5sbxi],
    .comments-list .markdown-content[b-3vh2q5sbxi]  p,
    .comments-list .markdown-content[b-3vh2q5sbxi]  ul,
    .comments-list .markdown-content[b-3vh2q5sbxi]  ol,
    .comments-list .markdown-content[b-3vh2q5sbxi]  li,
    .comments-list .markdown-content[b-3vh2q5sbxi]  blockquote,
    .comments-list .markdown-content[b-3vh2q5sbxi]  table,
    .comments-list .markdown-content[b-3vh2q5sbxi]  th,
    .comments-list .markdown-content[b-3vh2q5sbxi]  td {
        font-family: var(--rz-text-font-family);
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    .comments-list .markdown-content[b-3vh2q5sbxi]  img {
        max-width: min(240px, 100%);
        max-height: 180px;
        object-fit: cover;
        border: 1px solid var(--rz-base-200);
        box-shadow: var(--rz-shadow-xs);
    }

    /* Un comentario que llega por correo trae la tabla de Outlook con anchos de
       columna fijos. Con `width: 100%` (la regla de arriba) la tabla ignora el
       ancho disponible y se sale de la tarjeta: el texto acaba pisando el borde
       del panel y, en movil, saliendose de la pantalla. Misma receta que ya usa
       la ficha de incidencia para `.tl-bubble`: la tabla se vuelve un bloque con
       su propio scroll horizontal, dentro de su burbuja. */
    .comments-list .markdown-content[b-3vh2q5sbxi],
    .description-content.markdown-content[b-3vh2q5sbxi] {
        overflow-x: auto;
    }

    .comments-list .markdown-content[b-3vh2q5sbxi]  table,
    .description-content.markdown-content[b-3vh2q5sbxi]  table {
        display: block;
        width: max-content;
        max-width: 100%;
        overflow-x: auto;
        border-collapse: collapse;
    }

    /* Una URL o un identificador largo sin espacios rompe igual que una tabla. */
    .comments-list .markdown-content[b-3vh2q5sbxi],
    .comments-list .markdown-content[b-3vh2q5sbxi]  p,
    .comments-list .markdown-content[b-3vh2q5sbxi]  li {
        overflow-wrap: anywhere;
    }

    .comments-list .markdown-content[b-3vh2q5sbxi]  pre,
    .comments-list .markdown-content[b-3vh2q5sbxi]  code {
        white-space: pre-wrap;
        word-break: break-word;
    }

    .comment-attachment-strip[b-3vh2q5sbxi] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin: 0.65rem 0 0;
        padding-left: 2.625rem;
    }

    .comment-attachment-chip[b-3vh2q5sbxi] {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        min-width: 180px;
        max-width: 260px;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--rz-base-300);
        border-radius: 12px;
        background: var(--rz-base-50);
        box-shadow: var(--rz-shadow-1);
    }

    .comment-attachment-thumb[b-3vh2q5sbxi] {
        width: 52px;
        height: 52px;
        object-fit: cover;
        border-radius: 10px;
        flex: 0 0 auto;
        border: 1px solid color-mix(in srgb, var(--rz-base-400) 45%, transparent);
    }

    .comment-attachment-thumb-btn[b-3vh2q5sbxi] {
        padding: 0;
        background: transparent;
        border: none;
        cursor: zoom-in;
        border-radius: 10px;
        display: inline-flex;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .comment-attachment-thumb-btn:hover[b-3vh2q5sbxi] {
        transform: scale(1.04);
        box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    }

    .comment-attachment-chip--locked[b-3vh2q5sbxi] {
        opacity: 0.65;
        pointer-events: none;
    }
    .comment-attachment-chip--locked .comment-attachment-thumb-btn[b-3vh2q5sbxi] {
        pointer-events: auto;
    }

    .comment-input--sending[b-3vh2q5sbxi] {
        opacity: 0.75;
        cursor: progress;
    }

    .comment-attachment-meta[b-3vh2q5sbxi] {
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .comment-attachment-name[b-3vh2q5sbxi] {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--rz-text-color);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .comment-attachment-size[b-3vh2q5sbxi] {
        font-size: 0.75rem;
        color: var(--rz-text-tertiary-color);
    }

    .comment-attachment-remove[b-3vh2q5sbxi] {
        border: none;
        background: transparent;
        color: var(--rz-text-tertiary-color);
        cursor: pointer;
        padding: 0.15rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .comment-attachment-remove:hover[b-3vh2q5sbxi] {
        background: var(--rz-base-200);
        color: var(--rz-danger);
    }

    .task-main[b-3vh2q5sbxi]  .desc-img-wrapper {
        position: relative;
        display: inline-block;
        margin: 0.25rem 0;
        max-width: 100%;
    }

    .task-main[b-3vh2q5sbxi]  .desc-img-wrapper img {
        display: block;
        max-width: 100%;
    }

    .task-main[b-3vh2q5sbxi]  .desc-img-delete {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: rgba(0,0,0,0.55);
        color: #fff;
        border: none;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        line-height: 1;
        padding: 0;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    .task-main[b-3vh2q5sbxi]  .desc-img-wrapper:hover .desc-img-delete {
        display: flex;
    }

    .task-main[b-3vh2q5sbxi]  .desc-img-delete:hover {
        background: rgba(200,50,50,0.85);
    }

    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* ACTIVITY SECTION                                                            */
    /* ═══════════════════════════════════════════════════════════════════════════ */
    
    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* SUBTASKS SECTION                                                            */
    /* ═══════════════════════════════════════════════════════════════════════════ */
    
    .subtasks-section[b-3vh2q5sbxi] {
        margin: 1rem 0;
    }

    .subtasks-header[b-3vh2q5sbxi] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
    }
    
    .subtasks-header .section-header[b-3vh2q5sbxi] {
        margin-bottom: 0;
    }

    .subtask-list[b-3vh2q5sbxi] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .subtask-item[b-3vh2q5sbxi] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
        background: var(--rz-base-100);
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.15s;
    }

    .subtask-item:hover[b-3vh2q5sbxi] {
        background: var(--rz-base-200);
    }

    .subtask-status[b-3vh2q5sbxi] {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .subtask-status.done[b-3vh2q5sbxi] {
        background: var(--rz-success);
        color: white;
    }

    .subtask-status.in-progress[b-3vh2q5sbxi] {
        background: var(--rz-info);
        color: white;
    }

    .subtask-status.todo[b-3vh2q5sbxi] {
        background: var(--rz-base-300);
        color: var(--rz-text-color);
    }

    .subtask-code[b-3vh2q5sbxi] {
        color: var(--rz-text-secondary-color);
        font-size: 0.8rem;
        font-weight: 500;
        min-width: 60px;
    }

    .subtask-title[b-3vh2q5sbxi] {
        flex: 1;
        font-size: 0.9rem;
    }

    .subtask-title.completed[b-3vh2q5sbxi] {
        text-decoration: line-through;
        color: var(--rz-text-secondary-color);
    }

    .subtask-meta[b-3vh2q5sbxi] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        color: var(--rz-text-secondary-color);
    }

    .subtask-assignee[b-3vh2q5sbxi] {
        font-size: 0.75rem;
    }

    .subtask-input-row[b-3vh2q5sbxi] {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .subtask-input-row input[b-3vh2q5sbxi] {
        flex: 1;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--rz-base-300);
        border-radius: 6px;
        background: var(--rz-base-background-color);
        color: var(--rz-text-color);
    }

    .subtask-input-row input:focus[b-3vh2q5sbxi] {
        outline: none;
        border-color: var(--rz-primary);
    }

    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* AI SUMMARY SECTION                                                          */
    /* ═══════════════════════════════════════════════════════════════════════════ */

    .ai-summary-section[b-3vh2q5sbxi] {
        background: linear-gradient(135deg, var(--rz-primary-lighter), var(--rz-info-lighter));
        border: 1px solid var(--rz-primary-light);
        border-radius: 8px;
        padding: 1rem;
        margin: 1rem 0;
    }
    
    .ai-summary-header[b-3vh2q5sbxi] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }
    
    .ai-summary-header[b-3vh2q5sbxi]  .ai-summary-icon {
        color: var(--rz-primary);
        font-size: 1.25rem;
    }
    
    .ai-summary-title[b-3vh2q5sbxi] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--rz-primary);
    }
    
    .ai-summary-content[b-3vh2q5sbxi] {
        background: var(--rz-base-background-color);
        border-radius: 6px;
        padding: 0.75rem;
        font-size: 0.875rem;
        line-height: 1.6;
        color: var(--rz-text-secondary-color);
    }
    
    .ai-summary-placeholder[b-3vh2q5sbxi] {
        color: var(--rz-text-tertiary-color);
        font-style: italic;
        text-align: center;
        padding: 1rem;
    }
    
    .activity-section[b-3vh2q5sbxi] {
        border-top: 1px solid var(--rz-base-200);
        padding-top: 1rem;
        margin-top: auto;
    }
    
    .activity-tabs[b-3vh2q5sbxi] {
        display: flex;
        gap: 0.25rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--rz-base-200);
        padding-bottom: 0.5rem;
    }
    
    .activity-tab[b-3vh2q5sbxi] {
        padding: 0.375rem 0.75rem;
        border: none;
        background: transparent;
        font-size: 0.8125rem;
        color: var(--rz-text-secondary-color);
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.15s ease;
    }
    
    .activity-tab:hover[b-3vh2q5sbxi] {
        background: var(--rz-base-100);
    }
    
    .activity-tab.active[b-3vh2q5sbxi] {
        background: var(--rz-primary-lighter);
        color: var(--rz-primary);
        font-weight: 500;
    }
    
    .comment-input-wrapper[b-3vh2q5sbxi] {
        display: flex;
        gap: 0.625rem;
        align-items: flex-start;
    }
    
    .comment-avatar[b-3vh2q5sbxi] {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        /* Background set inline via AvatarColors.For(name) so the same
           user renders with the same colour across every surface. */
        background: var(--rz-base-300);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 600;
        color: #ffffff;
        flex-shrink: 0;
    }
    
    .comment-input-area[b-3vh2q5sbxi] {
        flex: 1;
        min-width: 0;
    }

    .comment-input[b-3vh2q5sbxi] {
        width: 100%;
        box-sizing: border-box;
        padding: 0.625rem 0.75rem;
        border: 1px solid var(--rz-base-300);
        border-radius: 6px;
        font-family: var(--rz-text-font-family);
        font-size: 0.8125rem;
        line-height: 1.5;
        /* Clean white input; avoids gray-on-gray with the main panel. */
        background: var(--rz-base-background-color);
        color: var(--rz-text-color);
        resize: none;
        min-height: 36px;
        transition: all 0.15s ease;
    }

    .comment-char-counter[b-3vh2q5sbxi] {
        font-size: 0.6875rem;
        text-align: right;
        padding: 0.25rem 0.25rem 0;
        color: var(--rz-text-tertiary-color);
        transition: color 0.2s ease;
    }

    .comment-char-counter.warning[b-3vh2q5sbxi] {
        color: var(--rz-warning);
    }

    .comment-char-counter.danger[b-3vh2q5sbxi] {
        color: var(--rz-danger);
        font-weight: 500;
    }
    
    .comment-input:focus[b-3vh2q5sbxi] {
        outline: none;
        border-color: var(--rz-primary);
        box-shadow: 0 0 0 2px var(--rz-primary-lighter);
    }
    
    .comment-input[b-3vh2q5sbxi]::placeholder {
        color: var(--rz-text-tertiary-color);
    }
    
    /* Mention popup styles */
    .mention-popup[b-3vh2q5sbxi] {
        position: absolute;
        top: 100%;
        left: 2.625rem;
        right: 0;
        z-index: 1000;
        background: var(--rz-base-background-color);
        border: 1px solid var(--rz-base-300);
        border-radius: 6px;
        box-shadow: var(--rz-shadow-3);
        max-height: 200px;
        overflow-y: auto;
        margin-top: 4px;
    }
    
    .mention-item[b-3vh2q5sbxi] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        cursor: pointer;
        transition: background-color 0.15s;
    }
    
    .mention-item:hover[b-3vh2q5sbxi],
    .mention-item.selected[b-3vh2q5sbxi] {
        background: var(--rz-base-100);
    }
    
    .mention-avatar[b-3vh2q5sbxi] {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
    }
    
    .mention-avatar-initials[b-3vh2q5sbxi] {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--rz-primary);
        color: white;
        font-size: 0.625rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mention-info[b-3vh2q5sbxi] {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    
    .mention-name[b-3vh2q5sbxi] {
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--rz-text-color);
    }
    
    .mention-email[b-3vh2q5sbxi] {
        font-size: 0.6875rem;
        color: var(--rz-text-tertiary-color);
    }
    
    .mention-no-results[b-3vh2q5sbxi] {
        padding: 0.75rem;
        text-align: center;
        color: var(--rz-text-tertiary-color);
        font-size: 0.75rem;
    }
    
    .quick-actions[b-3vh2q5sbxi] {
        display: flex;
        gap: 0.25rem;
        margin-top: 0.5rem;
        padding-left: 2.625rem;
    }
    
    .quick-action[b-3vh2q5sbxi] {
        padding: 0.25rem 0.5rem;
        border: 1px solid var(--rz-base-300);
        border-radius: 4px;
        background: var(--rz-base-50);
        font-size: 0.6875rem;
        color: var(--rz-text-secondary-color);
        cursor: pointer;
        transition: all 0.15s ease;
    }
    
    .quick-action:hover[b-3vh2q5sbxi] {
        background: var(--rz-base-200);
        border-color: var(--rz-base-400);
    }
    
    /* No inner scroll: comments grow naturally and the parent .task-main
       handles vertical overflow. Caps the user perceived as "three scrolls"
       (dialog → main → activity-tab) collapse to a single scroll on .task-main. */
    .activity-tab-content[b-3vh2q5sbxi] {
        flex: 1;
        min-height: 0;
    }
    
    /* ── Time Tracking: Sidebar widget ── */
    .time-widget[b-3vh2q5sbxi] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.125rem 0;
        width: 100%;
        min-height: 40px;
    }

    .time-widget-value[b-3vh2q5sbxi] {
        display: block;
        position: static;
        min-width: 0;
        display: flex;
        align-items: center;
        font-weight: 700;
        font-size: 0.9375rem;
        color: var(--rz-text-color);
        letter-spacing: -0.02em;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .time-widget-info[b-3vh2q5sbxi] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.125rem;
        flex: 1;
        min-width: 0;
    }

    .time-widget-label[b-3vh2q5sbxi] {
        display: none;
    }

    .time-widget-detail[b-3vh2q5sbxi] {
        font-size: 0.6875rem;
        color: var(--rz-text-secondary-color);
        margin-top: 0;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .time-widget-actions[b-3vh2q5sbxi] {
        display: flex;
        gap: 0.375rem;
        align-items: center;
        flex-shrink: 0;
    }

    .time-widget-btn[b-3vh2q5sbxi] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 999px;
        border: 1px solid var(--rz-base-300);
        background: var(--rz-base-background-color);
        color: var(--rz-text-secondary-color);
        cursor: pointer;
        transition: all 0.15s ease;
        box-shadow: none;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
    }

    .time-widget-btn:hover[b-3vh2q5sbxi] {
        background: var(--rz-base-100);
        border-color: color-mix(in srgb, var(--rz-primary) 24%, var(--rz-base-300));
        color: var(--rz-primary);
        transform: translateY(-1px);
    }

    .time-widget-btn.primary[b-3vh2q5sbxi] {
        background: var(--rz-primary-lighter);
        border-color: color-mix(in srgb, var(--rz-primary) 22%, var(--rz-base-300));
        color: var(--rz-primary);
    }

    .time-widget-btn.primary:hover[b-3vh2q5sbxi] {
        background: var(--rz-primary);
        color: var(--rz-on-primary-lighter);
        opacity: 1;
        transform: translateY(-1px);
    }

    /* ── Time Tracking: Sidebar mini-entries ── */
    .time-sidebar-entries[b-3vh2q5sbxi] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.5rem 0 0;
        border-top: 1px solid var(--rz-base-200);
        animation: fadeIn-b-3vh2q5sbxi 0.2s ease;
    }

    .detail-row-time[b-3vh2q5sbxi] {
        align-items: center;
    }

    .detail-value-time[b-3vh2q5sbxi] {
        padding: 0;
        min-height: 48px;
    }

    .detail-value-time-list[b-3vh2q5sbxi] {
        display: block;
        width: 100%;
        padding-top: 0.125rem;
    }

    .detail-time-entries-block[b-3vh2q5sbxi] {
        display: block;
        padding: 0 1rem 0.875rem calc(1rem + 116px + 0.875rem);
        min-height: 0;
    }

    .time-sidebar-entry[b-3vh2q5sbxi] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.375rem 0.5rem;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .time-sidebar-entry:hover[b-3vh2q5sbxi] {
        background: var(--rz-base-200);
    }

    .time-sidebar-entry-avatar[b-3vh2q5sbxi] {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--rz-primary-lighter);
        color: var(--rz-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.5625rem;
        font-weight: 600;
        flex-shrink: 0;
    }

    .time-sidebar-entry-body[b-3vh2q5sbxi] {
        flex: 1;
        min-width: 0;
        font-size: 0.6875rem;
        color: var(--rz-text-secondary-color);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .time-sidebar-entry-hours[b-3vh2q5sbxi] {
        font-weight: 700;
        font-size: 0.6875rem;
        color: var(--rz-primary);
        flex-shrink: 0;
    }

    /* ── Time Tracking: Activity tab ── */
    .time-tab-header[b-3vh2q5sbxi] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0 0.75rem;
    }

    .time-tab-stat[b-3vh2q5sbxi] {
        display: flex;
        align-items: baseline;
        gap: 0.375rem;
    }

    .time-tab-stat-value[b-3vh2q5sbxi] {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--rz-text-color);
        letter-spacing: -0.02em;
    }

    .time-tab-stat-unit[b-3vh2q5sbxi] {
        font-size: 0.75rem;
        color: var(--rz-text-tertiary-color);
        font-weight: 500;
    }

    .time-tab-entries[b-3vh2q5sbxi] {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .time-tab-entry[b-3vh2q5sbxi] {
        display: flex;
        align-items: flex-start;
        gap: 0.625rem;
        padding: 0.625rem 0.5rem;
        border-radius: 8px;
        transition: background 0.15s ease;
        cursor: pointer;
        position: relative;
    }

    .time-tab-entry:hover[b-3vh2q5sbxi] {
        background: var(--rz-base-100);
    }

    .time-tab-entry + .time-tab-entry[b-3vh2q5sbxi] {
        border-top: 1px solid var(--rz-base-200);
    }

    .time-tab-entry-avatar[b-3vh2q5sbxi] {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.625rem;
        font-weight: 600;
        flex-shrink: 0;
    }

    .time-tab-entry-content[b-3vh2q5sbxi] {
        flex: 1;
        min-width: 0;
    }

    .time-tab-entry-row[b-3vh2q5sbxi] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }

    .time-tab-entry-name[b-3vh2q5sbxi] {
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--rz-text-color);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .time-tab-entry-badge[b-3vh2q5sbxi] {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--rz-primary);
        background: var(--rz-primary-lighter);
        padding: 0.125rem 0.5rem;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .time-tab-entry-meta[b-3vh2q5sbxi] {
        font-size: 0.6875rem;
        color: var(--rz-text-tertiary-color);
        margin-top: 0.125rem;
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .time-tab-entry-meta .billable-dot[b-3vh2q5sbxi] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--rz-success);
        flex-shrink: 0;
    }

    .time-tab-entry-meta .billable-dot.non-billable[b-3vh2q5sbxi] {
        background: var(--rz-text-disabled-color);
    }

    .time-tab-entry-desc[b-3vh2q5sbxi] {
        font-size: 0.75rem;
        color: var(--rz-text-secondary-color);
        margin-top: 0.25rem;
        line-height: 1.4;
    }

    .time-tab-empty[b-3vh2q5sbxi] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 2rem 1rem;
        text-align: center;
    }

    .time-tab-empty-icon[b-3vh2q5sbxi] {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--rz-base-200);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--rz-text-tertiary-color);
    }

    .time-tab-empty-text[b-3vh2q5sbxi] {
        font-size: 0.8125rem;
        color: var(--rz-text-tertiary-color);
    }

    @keyframes fadeIn-b-3vh2q5sbxi {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .history-list[b-3vh2q5sbxi] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .history-item[b-3vh2q5sbxi] {
        display: flex;
        gap: 0.5rem;
        padding: 0.5rem;
        font-size: 0.8125rem;
        color: var(--rz-text-secondary-color);
        border-left: 2px solid var(--rz-base-300);
        padding-left: 0.75rem;
    }
    
    .history-item .history-time[b-3vh2q5sbxi] {
        font-size: 0.75rem;
        color: var(--rz-text-tertiary-color);
        white-space: nowrap;
    }
    
    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* SIDEBAR                                                                     */
    /* ═══════════════════════════════════════════════════════════════════════════ */
    
    .task-sidebar[b-3vh2q5sbxi] {
        width: 440px;
        padding: 1rem 1rem 1.25rem;
        background: linear-gradient(180deg, var(--rz-base-50), var(--rz-base-background));
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        flex-shrink: 0;
        /* Fill the dialog height so the sidebar owns its own scroll —
           a long expanded "Adjuntos" section no longer pushes the
           comment thread out of view. `min-height: 0` is required for
           `overflow-y: auto` to engage inside a flex container. */
        height: 100%;
        min-height: 0;
    }
    
    .status-dropdown[b-3vh2q5sbxi] {
        width: 100%;
    }
    
    .status-btn[b-3vh2q5sbxi] {
        width: 100%;
        padding: 0.625rem 0.9375rem;
        border-radius: 10px;
        font-weight: 500;
        font-size: 0.8125rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        border: none;
        transition: all 0.15s ease;
    }
    
    .status-btn.status-inprogress[b-3vh2q5sbxi] {
        background: var(--rz-primary);
        color: var(--rz-on-primary);
    }
    
    .status-btn.status-inprogress:hover[b-3vh2q5sbxi] {
        background: var(--rz-primary-dark);
    }
    
    .status-btn.status-todo[b-3vh2q5sbxi] {
        background: var(--rz-base-200);
        color: var(--rz-text-color);
    }
    
    .status-btn.status-done[b-3vh2q5sbxi] {
        background: var(--rz-success);
        color: var(--rz-on-primary);
    }
    
    .status-btn.status-btn-custom[b-3vh2q5sbxi] {
        background: var(--rz-base-200);
        color: var(--rz-text-color);
    }
    
    .status-btn.status-btn-custom:hover[b-3vh2q5sbxi] {
        filter: brightness(0.95);
    }
    
    .status-menu[b-3vh2q5sbxi] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--rz-base-background-color);
        border: 1px solid var(--rz-base-300);
        border-radius: 6px;
        box-shadow: var(--rz-shadow-3);
        z-index: 1000;
        margin-top: 0.25rem;
        padding: 0.25rem;
    }
    
    .status-option[b-3vh2q5sbxi] {
        padding: 0.5rem 0.75rem;
        border-radius: 4px;
        font-size: 0.8125rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: background-color 0.15s ease;
    }
    
    .status-option:hover[b-3vh2q5sbxi] {
        background-color: var(--rz-base-100);
    }
    
    .status-option.active[b-3vh2q5sbxi] {
        background-color: var(--rz-primary-lighter);
    }
    
    .status-indicator[b-3vh2q5sbxi] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }
    
    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* DETAIL ROWS                                                                 */
    /* ═══════════════════════════════════════════════════════════════════════════ */
    
    .details-section[b-3vh2q5sbxi] {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        background: var(--rz-base-background-color);
        border-radius: 14px;
        border: 1px solid var(--rz-base-200);
        box-shadow: var(--rz-shadow-1);
        overflow: hidden;
    }
    
    .details-header[b-3vh2q5sbxi] {
        padding: 0.875rem 1rem;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--rz-text-tertiary-color);
        border-bottom: 1px solid var(--rz-base-200);
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }
    
    .details-header:hover[b-3vh2q5sbxi] {
        background: var(--rz-base-50);
    }
    
    .details-body[b-3vh2q5sbxi] {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        padding: 0.25rem 0;
    }
    
    .detail-row[b-3vh2q5sbxi] {
        display: grid;
        grid-template-columns: minmax(104px, 116px) minmax(0, 1fr);
        align-items: start;
        padding: 0.8rem 1rem;
        gap: 0.875rem;
        transition: background 0.15s ease;
        min-height: 48px;
    }
    
    .detail-row:hover[b-3vh2q5sbxi] {
        background: var(--rz-base-50);
    }
    
    .detail-label[b-3vh2q5sbxi] {
        width: auto;
        font-size: 0.6875rem;
        color: var(--rz-text-tertiary-color);
        line-height: 1.35;
        letter-spacing: 0.04em;
        overflow-wrap: anywhere;
    }
    
    .detail-value[b-3vh2q5sbxi] {
        font-size: 0.8125rem;
        color: var(--rz-text-color);
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        min-width: 0;
        width: 100%;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.35;
        flex-wrap: wrap;
    }
    
    .detail-value.empty[b-3vh2q5sbxi] {
        color: var(--rz-text-tertiary-color);
    }

    .detail-person-name[b-3vh2q5sbxi] {
        font-size: 0.8125rem;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }
    
    .detail-value.clickable:hover[b-3vh2q5sbxi] {
        background: var(--rz-base-100);
        border-radius: 8px;
        margin: -0.1875rem -0.3125rem;
        padding: 0.1875rem 0.3125rem;
    }

    /* Sidebar dropdowns: no custom styling. Radzen theme handles metrics,
       typography and layout. Width is already forced to 100% via the
       surrounding `.detail-value` flex rules, which is enough. */

    .overdue-text[b-3vh2q5sbxi] {
        color: var(--rz-danger) !important;
        font-weight: 500;
    }
    
    .assignee-avatar[b-3vh2q5sbxi] {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.625rem;
        font-weight: 500;
        color: white;
        flex-shrink: 0;
    }
    
    .priority-badge[b-3vh2q5sbxi] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    
    .priority-badge[b-3vh2q5sbxi]  .rzi {
        font-size: 16px;
    }
    
    .labels-list[b-3vh2q5sbxi] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    .label-chip[b-3vh2q5sbxi] {
        padding: 0.125rem 0.5rem;
        border-radius: 4px;
        font-size: 0.625rem;
        font-weight: 500;
    }
    
    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* ASSIGNEE DROPDOWN & LOG TIME FORM                                           */
    /* ═══════════════════════════════════════════════════════════════════════════ */
    
    .assignee-dropdown .assignee-option:hover[b-3vh2q5sbxi],
    .assignee-dropdown .assignee-option:focus[b-3vh2q5sbxi] {
        background: var(--rz-base-100) !important;
    }
    
    .assignee-dropdown .assignee-option.selected[b-3vh2q5sbxi] {
        background: var(--rz-primary-lighter);
        font-weight: 500;
    }
    
    /* Autocomplete / dropdown popup overrides removed — Radzen's own
       popup chrome (shadow, border, background, z-index) already works
       inside dialogs, and the pile of !important rules here was causing
       inconsistencies with the active theme. */
    
    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* USER OPTION ITEM (for autocomplete dropdowns)                               */
    /* ═══════════════════════════════════════════════════════════════════════════ */
    
    .user-option-item[b-3vh2q5sbxi] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.15rem;
    }
    
    .user-option-item .user-avatar[b-3vh2q5sbxi] {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem;
        color: white;
        flex-shrink: 0;
        object-fit: cover;
    }
    
    .user-option-item .user-info[b-3vh2q5sbxi] {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    
    .user-option-item .user-name[b-3vh2q5sbxi] {
        font-weight: 500;
        color: var(--rz-text-color);
    }
    
    .user-option-item .user-email[b-3vh2q5sbxi] {
        font-size: 0.75rem;
        color: var(--rz-text-secondary-color);
    }

    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* FOOTER ACTIONS                                                              */
    /* ═══════════════════════════════════════════════════════════════════════════ */
    
    .sidebar-actions[b-3vh2q5sbxi] {
        margin-top: auto;
        padding-top: 1rem;
        border-top: 1px solid var(--rz-base-200);
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }
    
    .action-btn[b-3vh2q5sbxi] {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: none;
        border-radius: 4px;
        background: transparent;
        font-size: 0.8125rem;
        color: var(--rz-text-secondary-color);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.15s ease;
    }
    
    .action-btn:hover[b-3vh2q5sbxi] {
        background: var(--rz-base-100);
        color: var(--rz-text-color);
    }
    
    .action-btn.danger:hover[b-3vh2q5sbxi] {
        background: var(--rz-danger-lighter);
        color: var(--rz-danger);
    }
    
    .action-btn[b-3vh2q5sbxi]  .rzi {
        font-size: 1rem;
    }
    
    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* ATTACHMENT PREVIEW                                                          */
    /* ═══════════════════════════════════════════════════════════════════════════ */
    
    .attachment-item[b-3vh2q5sbxi] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
        border-radius: 6px;
        background: var(--rz-base-100);
        transition: all 0.15s ease;
    }
    
    .attachment-item:hover[b-3vh2q5sbxi] {
        background: var(--rz-base-200);
    }
    
    .attachment-thumbnail[b-3vh2q5sbxi] {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        object-fit: cover;
        cursor: pointer;
        transition: transform 0.15s ease;
        background: var(--rz-base-200);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .attachment-thumbnail:hover[b-3vh2q5sbxi] {
        transform: scale(1.05);
    }
    
    .attachment-thumbnail img[b-3vh2q5sbxi] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }
    
    .attachment-info[b-3vh2q5sbxi] {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }
    
    .attachment-name[b-3vh2q5sbxi] {
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--rz-text-color);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .attachment-meta[b-3vh2q5sbxi] {
        font-size: 0.6875rem;
        color: var(--rz-text-tertiary-color);
    }
    
    .attachment-actions[b-3vh2q5sbxi] {
        display: flex;
        gap: 0.25rem;
        flex-shrink: 0;
    }
    
    .attachment-actions .action-btn[b-3vh2q5sbxi] {
        padding: 0.25rem;
        min-width: auto;
        opacity: 0.6;
    }
    
    .attachment-item:hover .attachment-actions .action-btn[b-3vh2q5sbxi] {
        opacity: 1;
    }
    
    /* Preview Modal Overlay */
    .preview-modal-overlay[b-3vh2q5sbxi] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.42);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        filter: none;
        z-index: 10100;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }
    
    .preview-modal-header[b-3vh2q5sbxi] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
        color: white;
        z-index: 10101;
    }
    
    .preview-modal-title[b-3vh2q5sbxi] {
        font-size: 1rem;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        margin-right: 1rem;
    }
    
    .preview-modal-actions[b-3vh2q5sbxi] {
        display: flex;
        gap: 0.5rem;
    }
    
    .preview-modal-actions button[b-3vh2q5sbxi] {
        background: rgba(255, 255, 255, 0.15);
        border: none;
        color: white;
        padding: 0.5rem;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.15s;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .preview-modal-actions button:hover[b-3vh2q5sbxi] {
        background: rgba(255, 255, 255, 0.25);
    }
    
    .preview-modal-content[b-3vh2q5sbxi] {
        width: 90vw;
        height: 85vh;
        max-width: 90vw;
        max-height: 85vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
    }
    
    .preview-modal-content[b-3vh2q5sbxi]  img {
        max-width: 100%;
        max-height: 85vh;
        object-fit: contain;
        border-radius: 4px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }
    
    .preview-modal-content[b-3vh2q5sbxi]  iframe {
        width: 90vw;
        height: 85vh;
        border: none;
        border-radius: 4px;
        background: white;
    }
    
    .preview-modal-content[b-3vh2q5sbxi]  video {
        max-width: 90vw;
        max-height: 85vh;
        border-radius: 4px;
    }
    
    .preview-not-available[b-3vh2q5sbxi] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 3rem;
        color: white;
        text-align: center;
    }
    
    .preview-not-available[b-3vh2q5sbxi]  .rzi {
        font-size: 4rem;
        opacity: 0.5;
    }
    
    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* RESPONSIVE                                                                  */
    /* ═══════════════════════════════════════════════════════════════════════════ */
    
    @media (max-width: 768px) {
        /* En columna, el dialogo pasa a ser el UNICO contenedor con scroll. */
        .task-dialog[b-3vh2q5sbxi] {
            flex-direction: column;
            max-height: none;
            overflow-y: auto;
        }

        /* `.task-main` lleva `flex: 1` + `min-height: 0` para que su scroll
           interno funcione en fila. Girado a columna eso mismo lo deja
           encogerse hasta desaparecer: la barra lateral se quedaba con los
           860 px y el titulo, la descripcion y los comentarios cabian en 53.
           En movil ninguno de los dos scrollea por su cuenta: crecen con su
           contenido y el dialogo los desplaza. */
        .task-main[b-3vh2q5sbxi],
        .task-sidebar[b-3vh2q5sbxi] {
            flex: 0 0 auto;
            width: 100%;
            height: auto;
            min-height: 0;
            overflow: visible;
        }

        .task-main[b-3vh2q5sbxi] {
            border-right: none;
            border-bottom: 1px solid var(--rz-base-200);
        }

        .detail-time-entries-block[b-3vh2q5sbxi] {
            padding-left: 1rem;
        }
    }

    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* STICKY TASK HEADER (breadcrumb + title)                                     */
    /* ═══════════════════════════════════════════════════════════════════════════ */

    .task-sticky-top[b-3vh2q5sbxi] {
        position: sticky;
        top: 0;
        background: var(--rz-base-background-color);
        z-index: 5;
        border-bottom: 1px solid var(--rz-base-200);
        padding-bottom: 0.5rem;
        margin: -1.625rem -1.5rem 0 -1.5rem;
        padding: 0.75rem 1.5rem 0.5rem 1.5rem;
    }

    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* COMMENT REACTIONS (Jira-style pill toggles)                                 */
    /* ═══════════════════════════════════════════════════════════════════════════ */

    .tk-reactions[b-3vh2q5sbxi] {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 8px;
        align-items: center;
        position: relative;
    }

    .tk-reaction-chip[b-3vh2q5sbxi] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        background: var(--rz-base-50);
        border: 1px solid var(--rz-base-200);
        border-radius: 999px;
        font-size: 0.75rem;
        color: var(--rz-text-secondary-color);
        cursor: pointer;
        transition: background 120ms ease, border-color 120ms ease;
        line-height: 1.4;
    }

    .tk-reaction-chip:hover[b-3vh2q5sbxi] {
        background: var(--rz-base-100);
        border-color: var(--rz-base-300);
    }

    .tk-reaction-chip--active[b-3vh2q5sbxi] {
        background: var(--rz-primary-lighter);
        border-color: var(--rz-primary);
        color: var(--rz-primary);
    }

    .tk-reaction-chip--add[b-3vh2q5sbxi] {
        padding: 2px 6px;
    }

    .tk-reaction-chip__emoji[b-3vh2q5sbxi] {
        font-size: 0.9rem;
    }

    .tk-reaction-chip__count[b-3vh2q5sbxi] {
        font-variant-numeric: tabular-nums;
    }

    .tk-reaction-picker[b-3vh2q5sbxi] {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 4px;
        display: flex;
        gap: 2px;
        padding: 4px;
        background: var(--rz-base-background-color);
        border: 1px solid var(--rz-base-200);
        border-radius: 8px;
        box-shadow: var(--rz-shadow-2);
        z-index: 10;
    }

    .tk-reaction-picker__item[b-3vh2q5sbxi] {
        background: transparent;
        border: 1px solid transparent;
        border-radius: 6px;
        padding: 4px 6px;
        font-size: 1.1rem;
        cursor: pointer;
    }

    .tk-reaction-picker__item:hover[b-3vh2q5sbxi] {
        background: var(--rz-base-100);
    }

    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* ATTACHMENT DROPZONE                                                         */
    /* Mirrors ServiceDesk `.att-drop` — overlay `<input type="file">` is the      */
    /* element that actually receives the click. The visible `<RadzenIcon>` and    */
    /* hint sit underneath in normal flow. Drag/drop is decorative only (Blazor    */
    /* Server cannot read dropped files); the click-to-upload path is the         */
    /* working flow for every role, including Client.                              */
    /* ═══════════════════════════════════════════════════════════════════════════ */

    .attachment-dropzone[b-3vh2q5sbxi] {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 1rem;
        border: 2px dashed var(--rz-base-300);
        border-radius: 6px;
        background: transparent;
        text-align: center;
        cursor: pointer;
        transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
        color: var(--rz-text-secondary-color);
    }

    .attachment-dropzone:hover[b-3vh2q5sbxi],
    .attachment-dropzone.is-dragging[b-3vh2q5sbxi] {
        border-color: var(--rz-primary);
        background: var(--rz-primary-lighter);
        color: var(--rz-primary);
    }

    .attachment-dropzone[b-3vh2q5sbxi]  .rzi {
        font-size: 2rem;
        color: var(--rz-primary);
    }

    .attachment-dropzone-hint[b-3vh2q5sbxi] {
        font-size: 0.8125rem;
        color: var(--rz-text-secondary-color);
    }

    .attachment-dropzone:hover .attachment-dropzone-hint[b-3vh2q5sbxi],
    .attachment-dropzone.is-dragging .attachment-dropzone-hint[b-3vh2q5sbxi] {
        color: var(--rz-primary);
    }

    /* The actual file input overlays the whole dropzone so clicks/drops
       anywhere inside the dashed box open the native file picker. */
    .attachment-dropzone[b-3vh2q5sbxi]  input[type="file"] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 1;
    }


/* ═══════════════════════════════════════════════════════════════════════════ */
/* DATE EDIT ROW — datepicker fills the widened info column, save/cancel inline */
/* The old fixed `width:140px` clipped the calendar trigger icon in the 392px   */
/* sidebar. The sidebar is now 440px and the picker flexes to fill its column.  */
/* ═══════════════════════════════════════════════════════════════════════════ */

.detail-value-dateedit[b-3vh2q5sbxi] {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
}

.detail-value-dateedit[b-3vh2q5sbxi]  .rz-datepicker {
    flex: 1 1 auto;
    min-width: 0;
}

/* Keep the calendar trigger fully inside the input (don't let it clip). */
.detail-value-dateedit[b-3vh2q5sbxi]  .rz-datepicker .rz-inputtext {
    padding-inline-end: 2rem;
}

/* Archived-project comment notice — replaces the editor when the project is frozen
   and the caller is not its owner/admin. Points them at a support request instead. */
.comment-archived-notice[b-3vh2q5sbxi] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    background: var(--rz-base-100);
}

.comment-archived-notice[b-3vh2q5sbxi]  .comment-archived-notice__icon {
    color: var(--rz-text-tertiary-color);
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}

.comment-archived-notice__body[b-3vh2q5sbxi] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.comment-archived-notice__title[b-3vh2q5sbxi] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--rz-text-color);
}

.comment-archived-notice__text[b-3vh2q5sbxi] {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    line-height: 1.4;
}

.comment-archived-notice[b-3vh2q5sbxi]  .comment-archived-notice__cta {
    align-self: flex-start;
    margin-top: 0.4rem;
}

/* NOTE: the Radzen datepicker trigger glyph fix is now PORTAL-WIDE in
   theme.css (search "DATEPICKER TRIGGER GLYPH"). It used to live here scoped to
   .task-dialog but the same bug affects every date picker (tickets, invoices,
   supersheet…), so it was globalised. */

/* ═══════════════════════════════════════════════════════════════════════════ */
/* COMMENTS — "load older" control                                             */
/* Only the newest page renders on open; older comments (and, crucially, their */
/* inline images) stay out of the DOM until asked for.                         */
/* ═══════════════════════════════════════════════════════════════════════════ */
.comments-load-older[b-3vh2q5sbxi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    margin-top: 0.25rem;
    border: 1px dashed var(--rz-base-300);
    border-radius: 8px;
    background: transparent;
    color: var(--rz-text-secondary-color);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.comments-load-older:hover[b-3vh2q5sbxi] {
    background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

/* ── Contribución cross-cluster (de servicedesk/ticket-detail-dialog.css) aplicada por el orquestador ── */
/* De servicedesk/ticket-detail-dialog.css (hoja legacy, adelgazada al chrome): unica
   definicion repo-wide de .comment-item. Los compuestos con .comment-delete-btn /
   .comment-item-editing viajan con la familia (hoy sin consumidor, frontera verificada). */
.comment-item[b-3vh2q5sbxi] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0;
    background: transparent;
    border-radius: 0;
}

.comment-item:hover .comment-delete-btn[b-3vh2q5sbxi],
.comment-item:focus-within .comment-delete-btn[b-3vh2q5sbxi] {
    opacity: 1;
}

.comment-item-editing[b-3vh2q5sbxi] {
    border-radius: 6px;
    padding: 0.5rem;
    border: 1px solid var(--rz-primary-lighter);
    background: color-mix(in srgb, var(--rz-primary-lighter) 10%, var(--rz-base-background-color));
}

/* ── Contribución cross-cluster (de servicedesk/ticket-detail-dialog.css) aplicada por el orquestador ── */
/* De servicedesk/ticket-detail-dialog.css: imagenes del HTML del comentario.
   Llegan por MarkupString → el <img> no recibe b-hash: ::deep desde el div
   .comment-markdown propio. */
.comment-markdown[b-3vh2q5sbxi]  img {
    max-width: min(420px, 100%);
    max-height: 320px;
    border-radius: 8px;
    cursor: zoom-in;
}
/* /Components/Pages/Projects/TaskDialog.razor.rz.scp.css */
/* Estilos propios de TaskDialog — CSS isolation.
   Vienen de wwwroot/css/projects/task-dialog.css, que se cargaba en TODAS las paginas del
   portal. Verificado antes de mover: todas sus clases van sobre HTML de este
   marcado, ningun otro componente las usa, y todo el color sale de tokens de
   theme.css — asi que sigue respondiendo al color primario del cliente y al
   modo oscuro igual que antes.
   ───────────────────────────────────────────────────────────────────────── */

/* TaskDialog — create-task form attachment dropzone and pending list. */

#task-create-dialog .create-attachment-dropzone[b-pdpv3204mu] {
    position: relative;
    border: 2px dashed var(--rz-base-400);
    border-radius: var(--rz-border-radius);
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s;
}

#task-create-dialog .create-attachment-dropzone:hover[b-pdpv3204mu] {
    border-color: var(--rz-primary);
}

#task-create-dialog .create-attachment-dropzone input[type="file"][b-pdpv3204mu] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

#task-create-dialog .create-attachment-dropzone label[b-pdpv3204mu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    pointer-events: none;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
}

#task-create-dialog .pending-attachment-item[b-pdpv3204mu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-200);
    font-size: 0.8125rem;
}

#task-create-dialog .pending-attachment-item .file-icon[b-pdpv3204mu] {
    font-size: 1.25rem;
    color: var(--rz-text-tertiary-color);
}

#task-create-dialog .pending-attachment-item .file-name[b-pdpv3204mu] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#task-create-dialog .pending-attachment-item .file-size[b-pdpv3204mu] {
    color: var(--rz-text-tertiary-color);
    font-size: 0.75rem;
}
/* /Components/Pages/Projects/TaskMemberPickerDialog.razor.rz.scp.css */
/* CRÍTICO-warning — crear TaskMemberPickerDialog.razor.css (el picker esta hoy sin estilo).
   ═══════════════════════════════════════════════════════════════════════════ */
/* TASK MEMBER PICKER DIALOG (Assignee / Reporter)                             */
/* Rendered inside an elevated, centered dialog (dalatic-dialog-elevated).     */
/* ═══════════════════════════════════════════════════════════════════════════ */

.task-member-picker[b-nira14ykgb] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 220px;
}

.task-member-picker .tmp-search[b-nira14ykgb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius, 6px);
    background: var(--rz-base-background-color);
}

.task-member-picker .tmp-search:focus-within[b-nira14ykgb] {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 2px var(--rz-primary-lighter);
}

.task-member-picker .tmp-search[b-nira14ykgb]  .rzi {
    color: var(--rz-text-tertiary-color);
    font-size: 1.1rem;
}

.task-member-picker .tmp-search input[b-nira14ykgb] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--rz-text-color);
}

.task-member-picker .tmp-state[b-nira14ykgb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0;
    color: var(--rz-text-tertiary-color);
    font-size: 0.85rem;
}

.task-member-picker .tmp-list[b-nira14ykgb] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    max-height: 320px;
    overflow-y: auto;
    margin: 0 -0.25rem;
    padding: 0 0.25rem;
}

.task-member-picker .tmp-row[b-nira14ykgb] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.12s ease;
}

.task-member-picker .tmp-row:hover[b-nira14ykgb] {
    background: var(--rz-base-100);
}

.task-member-picker .tmp-row.is-current[b-nira14ykgb] {
    background: var(--rz-primary-lighter);
}

.task-member-picker .tmp-avatar[b-nira14ykgb] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

.task-member-picker .tmp-info[b-nira14ykgb] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.task-member-picker .tmp-name[b-nira14ykgb] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-member-picker .tmp-email[b-nira14ykgb] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-member-picker[b-nira14ykgb]  .tmp-check {
    color: var(--rz-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.task-member-picker .tmp-actions[b-nira14ykgb] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rz-base-200);
}
/* /Components/Pages/Projects/TimeLogDialog.razor.rz.scp.css */
/* Estilos propios de TimeLogDialog — CSS isolation.
   Vienen de wwwroot/css/projects/time-log-dialog.css. Verificado: ningun otro componente depende de
   estas clases sin declararlas en su propia hoja.
   ───────────────────────────────────────────────────────────────────────── */

/* TimeLogDialog — Jira-style time entry input with parsed-hours preview. */

.time-log-dialog[b-g50nt46iyx] {
    padding: 1.5rem;
    min-width: 400px;
    max-width: 560px;
}

.time-log-dialog .time-log-header[b-g50nt46iyx] {
    margin-bottom: 1.25rem;
}

.time-log-dialog .time-log-header h3[b-g50nt46iyx] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.time-log-dialog .time-log-header .task-code[b-g50nt46iyx] {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    margin-top: 0.25rem;
}

.time-log-dialog .time-input-section[b-g50nt46iyx] {
    margin-bottom: 1.25rem;
}

.time-log-dialog .time-input-label[b-g50nt46iyx] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 0.5rem;
}

.time-log-dialog .time-input-wrapper[b-g50nt46iyx] {
    position: relative;
}

.time-log-dialog .time-input-wrapper input[b-g50nt46iyx] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    border: 2px solid var(--rz-base-300);
    border-radius: 8px;
    background: var(--rz-base-100);
    color: var(--rz-text-color);
    transition: all 0.15s ease;
}

.time-log-dialog .time-input-wrapper input:focus[b-g50nt46iyx] {
    outline: none;
    border-color: var(--rz-primary);
    background: var(--rz-base-background);
}

.time-log-dialog .time-input-wrapper input.invalid[b-g50nt46iyx] {
    border-color: var(--rz-danger);
}

.time-log-dialog .time-format-hint[b-g50nt46iyx] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    margin-top: 0.5rem;
}

.time-log-dialog .time-preview[b-g50nt46iyx] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.time-log-dialog .time-preview.invalid[b-g50nt46iyx] {
    background: var(--rz-danger-lighter);
    color: var(--rz-danger);
}

.time-log-dialog .form-field[b-g50nt46iyx] {
    margin-bottom: 1rem;
}

.time-log-dialog .form-field label[b-g50nt46iyx] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 0.5rem;
}

.time-log-dialog .dialog-actions[b-g50nt46iyx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rz-base-200);
}

.time-log-dialog .delete-btn[b-g50nt46iyx] {
    color: var(--rz-danger);
}
/* /Components/Pages/Public/ProposalView.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   Visor interactivo de ofertas — CSS isolation de la página pública.
   Estructura y medidas del handoff «Diseño visor ofertas interactivo»; TOKENS los
   reales de theme.css (regla del handoff: mapear --dds-* a los del proyecto, no
   redeclarar). Mapeo aplicado:
     blue→--rz-primary · violet→--rz-info-light · ink→--rz-text-title-color ·
     ink-2→--rz-text-color · mute→--rz-text-secondary-color · paper→--rz-base-background-color ·
     surface-1→--rz-base-50 · surface-2→--rz-base-100 · line→--rz-base-200 ·
     line-strong→--rz-base-300 · navy→--rz-secondary-darker · radius-md→--rz-border-radius-lg ·
     shadow-md→--rz-shadow-4 · mono→--ss-font-mono · body→--rz-text-font-family
   Los colores del RESALTADO de anclaje son funcionales y van literales (regla del
   handoff: reconocibles siempre, no tokenizar).
   ══════════════════════════════════════════════════════════════════════════════ */

.pv-root[b-7qe0up26da] {
    min-height: 100vh;
    background: var(--rz-base-50);
    color: var(--rz-text-title-color);
    font-family: var(--rz-text-font-family);
    -webkit-font-smoothing: antialiased;
}

/* ─── Barra superior ─── */

.pv-topbar[b-7qe0up26da] {
    background: var(--rz-base-background-color);
    border-bottom: 1px solid var(--rz-base-200);
}

.pv-topbar__in[b-7qe0up26da] {
    max-width: 1720px;
    margin: 0 auto;
    padding: 0.9rem clamp(1rem, 2.5vw, 2rem);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pv-logo[b-7qe0up26da] {
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: 0.01em;
    color: var(--rz-text-title-color);
    white-space: nowrap;
}

/* La i entera va coloreada — el punto (tittle) es parte del glifo, no un adorno aparte. */
.pv-logo__i[b-7qe0up26da] {
    color: var(--rz-primary);
}

.pv-vsep[b-7qe0up26da] {
    width: 1px;
    height: 18px;
    background: var(--rz-base-200);
    flex: none;
}

.pv-ref[b-7qe0up26da] {
    font-family: var(--ss-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv-spacer[b-7qe0up26da] { flex: 1; }

.pv-status[b-7qe0up26da] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ss-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rz-text-color);
    white-space: nowrap;
}

.pv-status__dot[b-7qe0up26da] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

.pv-viewer[b-7qe0up26da] {
    font-size: 0.82rem;
    color: var(--rz-text-color);
    white-space: nowrap;
}

.pv-btn-gradient[b-7qe0up26da] {
    border: 0;
    cursor: pointer;
    padding: 0.5rem 1.1rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--rz-primary), var(--rz-info-light));
    color: #fff;
    font-family: var(--rz-text-font-family);
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    transition: filter 150ms ease;
}

.pv-btn-gradient:hover:not(:disabled)[b-7qe0up26da] { filter: brightness(1.07); }
.pv-btn-gradient:disabled[b-7qe0up26da] { opacity: 0.4; cursor: default; }
.pv-btn-sm[b-7qe0up26da] { padding: 0.4rem 0.85rem; font-size: 0.8rem; }

.pv-link-changes[b-7qe0up26da] {
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--rz-text-font-family);
    font-size: 0.84rem;
    color: var(--rz-text-color);
    text-decoration: underline;
    text-decoration-color: var(--rz-base-300);
    text-underline-offset: 3px;
    padding: 0;
    white-space: nowrap;
}

/* ─── Área de trabajo ─── */

.pv-work[b-7qe0up26da] {
    max-width: 1720px;
    margin: 0 auto;
    padding: 0 clamp(0.6rem, 2vw, 1.6rem) 3rem;
    display: flex;
    gap: clamp(0.8rem, 1.6vw, 1.4rem);
    align-items: flex-start;
    flex-wrap: wrap;
}

/* ─── Barra de herramientas (sticky) ─── */

.pv-toolbar[b-7qe0up26da] {
    position: sticky;
    top: 0;
    z-index: 35;
    background: var(--rz-base-50);
    padding: 0.7rem 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.pv-seg[b-7qe0up26da] {
    display: flex;
    gap: 0.2rem;
    padding: 0.2rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius-lg);
    box-shadow: var(--rz-shadow-4);
}

.pv-seg__btn[b-7qe0up26da] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    cursor: pointer;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    font-family: var(--rz-text-font-family);
    font-size: 0.79rem;
    font-weight: 600;
    background: transparent;
    color: var(--rz-text-secondary-color);
}

.pv-seg__btn.is-on[b-7qe0up26da] {
    background: var(--rz-text-title-color);
    color: #fff;
}

.pv-seg__btn:disabled[b-7qe0up26da] { opacity: 0.45; cursor: default; }

.pv-toolhelp[b-7qe0up26da] {
    font-size: 0.79rem;
    color: var(--rz-text-secondary-color);
    flex: 1 1 160px;
    min-width: 0;
}

.pv-panelbtn[b-7qe0up26da] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--rz-base-200);
    background: var(--rz-base-background-color);
    cursor: pointer;
    padding: 0.42rem 0.75rem;
    border-radius: var(--rz-border-radius-lg);
    font-family: var(--rz-text-font-family);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rz-text-color);
    box-shadow: var(--rz-shadow-4);
    white-space: nowrap;
}

/* ─── Escenario ─── */

.pv-stagewrap[b-7qe0up26da] {
    position: relative;
    width: 100%;
    border-radius: var(--rz-border-radius-lg);
    background: var(--rz-base-background-color);
    box-shadow: var(--rz-shadow-4);
    /* SIN overflow:hidden: rompe el sticky del HUD flotante (lo ancla al fondo del
       documento de 7500px en vez de al viewport). El radio se pierde en las esquinas
       del papel; el HUD del medio vale mas que cuatro esquinas. */
}

/* El motor sa-stage: aquí un solo scroll de página, papel claro. overflow VISIBLE y no
   el auto de secciones: con el scroll único el escenario no es un scrollport real, y un
   sticky dentro de un overflow:auto que no scrollea se hunde al fondo del documento —
   era exactamente el HUD del medio desaparecido. */
.pv-stage[b-7qe0up26da] {
    background: var(--rz-base-background-color);
    scrollbar-gutter: auto;
    overflow: visible;
}

/* A zoom manual > ajuste el documento desborda por el lado: el scrollport horizontal es
   el STAGEWRAP (no el escenario — el HUD vive fuera de él precisamente por esto), y así
   el desborde scrollea en vez de pintarse ENCIMA del panel de comentarios, que era el
   solape reportado. La manita desplaza este mismo elemento. */
.pv-stagewrap[b-7qe0up26da] {
    overflow-x: auto;
}

/* El HUD vive DENTRO del escenario (hovearlo cuenta como hovear el escenario: sin
   temblor, y las reglas globales de revelado del motor aplican tal cual), pero en
   FIXED: el sticky global se anclaría al stagewrap-scrollport y se hundiría al fondo
   del documento, y fixed además escapa a su recorte. Anclado al viewport, centrado. */
.pv-stage .sa-zoom-hud[b-7qe0up26da] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 1rem;
    height: 0;
}

.pv-stage iframe[b-7qe0up26da] {
    background: #fff;
}

/* En modo Área el overlay debe ganar el RUTEO DE INPUT del compositor, no solo el
   hit-test del DOM: el iframe sandboxed es un OOPIF y sin capa compositada propia
   Chromium le enruta parte de los eventos del arrastre (medido: mousedown al overlay,
   mouseup tragado por el iframe con elementFromPoint diciendo overlay). translateZ(0)
   promueve la capa y el z-index la ordena. */
.pv-stage .sa-overlay.sa-active[b-7qe0up26da] {
    z-index: 30;
    transform: translateZ(0);
}

/* Rectángulos publicados (modo Área) — lenguaje del resaltado, funcional, literal. */
.pv-area[b-7qe0up26da] {
    position: absolute;
    pointer-events: auto; /* heredaria none del overlay */
    border: 1px solid rgba(139, 92, 246, 0.6);
    border-radius: 3px;
    background: rgba(139, 92, 246, 0.05);
    box-shadow: none;
    cursor: pointer;
    z-index: 12;
    transition: background 160ms, border-color 160ms, box-shadow 160ms;
}

.pv-area.is-on[b-7qe0up26da] {
    border-color: #2347E8;
    background: rgba(35, 71, 232, 0.07);
    box-shadow: 0 0 0 3px rgba(35, 71, 232, 0.10);
}

.pv-area__chip[b-7qe0up26da] {
    position: absolute;
    top: -9px;
    left: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #2347E8, #8B5CF6);
    color: #fff;
    font-family: var(--ss-font-mono);
    font-size: 9px;
    line-height: 1;
    pointer-events: none;
}

.pv-drag[b-7qe0up26da] {
    position: absolute;
    border: 1px dashed var(--rz-primary);
    background: rgba(35, 71, 232, 0.06);
    z-index: 25;
    pointer-events: none;
}

/* ─── Globo de nuevo comentario ─── */

.pv-balloon[b-7qe0up26da] {
    position: absolute;
    z-index: 45;
    /* pointer-events es HEREDADO y el overlay padre esta a none: sin esto, el globo
       es un fantasma y los clicks caen al iframe de debajo. */
    pointer-events: auto;
    width: 300px;
    max-width: calc(100% - 12px);
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius-lg);
    box-shadow: 0 14px 40px rgba(10, 18, 36, 0.2);
    padding: 0.85rem;
    animation: pv-pop-b-7qe0up26da 150ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pv-pop-b-7qe0up26da {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
}

.pv-balloon__head[b-7qe0up26da] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.pv-balloon__name[b-7qe0up26da] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
    flex: 1;
}

.pv-balloon__kind[b-7qe0up26da] {
    font-family: var(--ss-font-mono);
    font-size: 0.57rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color);
}

.pv-balloon__quote[b-7qe0up26da] {
    border-left: 2px solid var(--rz-info-light);
    padding-left: 0.6rem;
    font-size: 0.77rem;
    color: var(--rz-text-secondary-color);
    margin-bottom: 0.65rem;
    max-height: 3.4rem;
    overflow: hidden;
}

.pv-balloon__identity[b-7qe0up26da] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.pv-balloon__actions[b-7qe0up26da] {
    display: flex;
    gap: 0.9rem;
    margin-top: 0.7rem;
    align-items: center;
    justify-content: flex-end;
}

.pv-mentions[b-7qe0up26da] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-top: 0.45rem;
}

.pv-mention[b-7qe0up26da] {
    border: 1px solid var(--rz-base-200);
    background: none;
    cursor: pointer;
    border-radius: 9999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    color: var(--rz-primary);
    font-weight: 600;
}

/* ─── Panel de comentarios ─── */

.pv-side[b-7qe0up26da] {
    flex: 0 1 340px;
    min-width: 280px;
    position: sticky;
    top: 0;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1100px) {
    .pv-side[b-7qe0up26da] {
        flex: 1 1 100%;
        position: static;
        max-height: none;
    }
}

.pv-side__head[b-7qe0up26da] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.9rem 0;
}

.pv-side__title[b-7qe0up26da] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--rz-text-title-color);
}

.pv-side__meta[b-7qe0up26da] {
    font-family: var(--ss-font-mono);
    font-size: 0.63rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color);
}

.pv-side__list[b-7qe0up26da] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding-bottom: 1rem;
}

.pv-card[b-7qe0up26da] {
    border: 1px solid var(--rz-base-200);
    border-left: 3px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius-lg);
    background: var(--rz-base-background-color);
    padding: 0.9rem 1rem;
    cursor: pointer;
}

.pv-card.is-on[b-7qe0up26da] {
    border-color: var(--rz-primary);
    border-left-color: var(--rz-primary);
    background: linear-gradient(135deg, rgba(35, 71, 232, 0.06), rgba(139, 92, 246, 0.06));
    box-shadow: 0 4px 18px rgba(35, 71, 232, 0.10);
}

.pv-card__head[b-7qe0up26da] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.pv-avatar[b-7qe0up26da] {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pv-avatar--sm[b-7qe0up26da] { width: 22px; height: 22px; flex-basis: 22px; font-size: 0.6rem; }
.pv-avatar--xs[b-7qe0up26da] { width: 19px; height: 19px; flex-basis: 19px; font-size: 0.55rem; }

.pv-card__who[b-7qe0up26da] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}

.pv-card__author[b-7qe0up26da] {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.pv-card__meta[b-7qe0up26da] {
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
}

.pv-card__status[b-7qe0up26da] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--ss-font-mono);
    font-size: 0.57rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pv-card__statusdot[b-7qe0up26da] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.pv-card__quote[b-7qe0up26da] {
    margin-top: 0.65rem;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    background: var(--rz-base-50);
    border-radius: 6px;
    padding: 0.45rem 0.55rem;
}

.pv-card__num[b-7qe0up26da] {
    font-family: var(--ss-font-mono);
    font-size: 0.6rem;
    color: var(--rz-primary);
    padding-top: 0.1rem;
}

.pv-card__quotetext[b-7qe0up26da] {
    font-size: 0.76rem;
    color: var(--rz-text-secondary-color);
    max-height: 3.2rem;
    overflow: hidden;
}

.pv-card__lost[b-7qe0up26da] {
    margin-left: auto;
    font-family: var(--ss-font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rz-warning-dark, #b45309);
    white-space: nowrap;
}

.pv-card__body[b-7qe0up26da] {
    margin: 0.7rem 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--rz-text-color);
}

.pv-card__body[b-7qe0up26da]  .pv-mention-inline,
.pv-reply__body[b-7qe0up26da]  .pv-mention-inline {
    color: var(--rz-primary);
    font-weight: 600;
}

.pv-reply[b-7qe0up26da] {
    margin-top: 0.8rem;
    padding-left: 0.85rem;
    border-left: 1px solid var(--rz-base-200);
}

.pv-reply__head[b-7qe0up26da] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.pv-reply__author[b-7qe0up26da] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.pv-reply__body[b-7qe0up26da] {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--rz-text-color);
}

.pv-card__foot[b-7qe0up26da] {
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--rz-base-200);
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.pv-replybox[b-7qe0up26da] {
    margin-top: 0.7rem;
}

.pv-empty[b-7qe0up26da] {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    max-width: 34ch;
}

/* ─── Controles compartidos ─── */

.pv-link[b-7qe0up26da] {
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--rz-text-color);
    font-family: var(--rz-text-font-family);
    font-size: 0.77rem;
    padding: 0;
}

.pv-link--blue[b-7qe0up26da] { color: var(--rz-primary); font-weight: 600; }
.pv-link--mute[b-7qe0up26da] { color: var(--rz-text-secondary-color); }

.pv-input[b-7qe0up26da] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
    font-family: var(--rz-text-font-family);
    font-size: 0.82rem;
    color: var(--rz-text-title-color);
    background: var(--rz-base-50);
    outline: none;
}

.pv-input:focus[b-7qe0up26da] { border-color: var(--rz-primary); }

.pv-textarea[b-7qe0up26da] {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    font-family: var(--rz-text-font-family);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--rz-text-title-color);
    background: var(--rz-base-50);
    outline: none;
}

.pv-textarea:focus[b-7qe0up26da] { border-color: var(--rz-primary); }
.pv-textarea--edit[b-7qe0up26da] { min-height: 92px; margin-top: 0.7rem; }

.pv-error[b-7qe0up26da] {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--rz-danger);
}

/* ─── Modales ─── */

.pv-overlay[b-7qe0up26da] {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(10, 18, 36, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
}

.pv-modal[b-7qe0up26da] {
    background: var(--rz-base-background-color);
    border-radius: var(--rz-border-radius-xl);
    box-shadow: var(--rz-shadow-6);
    width: 100%;
    max-width: 470px;
    padding: clamp(1.5rem, 3vw, 2.1rem);
    animation: pv-pop-b-7qe0up26da 190ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pv-modal__ref[b-7qe0up26da] {
    font-family: var(--ss-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color);
}

.pv-modal__title[b-7qe0up26da] {
    margin: 0.7rem 0 0;
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--rz-text-title-color);
    letter-spacing: -0.015em;
}

.pv-modal__text[b-7qe0up26da] {
    margin: 0.8rem 0 1.3rem;
    font-size: 0.9rem;
    color: var(--rz-text-color);
}

.pv-modal__pending[b-7qe0up26da] {
    margin: -0.6rem 0 1.3rem;
    font-size: 0.84rem;
    color: var(--rz-info-light);
}

.pv-check[b-7qe0up26da] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.87rem;
    color: var(--rz-text-color);
    cursor: pointer;
    margin-top: 0.9rem;
}

.pv-check input[b-7qe0up26da] {
    margin-top: 0.2rem;
    width: 15px;
    height: 15px;
    accent-color: var(--rz-primary);
}

.pv-modal__actions[b-7qe0up26da] {
    margin-top: 1.4rem;
    display: flex;
    gap: 1.1rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ─── Toast ─── */

.pv-toast[b-7qe0up26da] {
    position: fixed;
    z-index: 95;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    background: var(--rz-secondary-darker);
    color: var(--rz-base-50);
    padding: 0.75rem 1.1rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    animation: pv-pop-b-7qe0up26da 190ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Camino clásico (propuestas de fragmento) — tarjeta sobre el escenario oscuro.
   ══════════════════════════════════════════════════════════════════════════════ */

.proposal-container[b-7qe0up26da] {
    min-height: 100vh;
    position: relative;
    background:
        radial-gradient(rgba(148, 163, 214, 0.055) 1px, transparent 1.5px),
        radial-gradient(1200px 620px at 18% -12%, rgba(109, 74, 255, 0.16), transparent 62%),
        radial-gradient(1000px 560px at 108% 108%, rgba(56, 110, 220, 0.10), transparent 60%),
        linear-gradient(165deg, #12131f 0%, #0c0d16 45%, #08070d 100%);
    background-size: 26px 26px, auto, auto, auto;
    padding: 2.5rem 2rem 3rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.proposal-container[b-7qe0up26da]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7c3aed 0%, #6d4aff 35%, #3b82f6 70%, #22d3ee 100%);
    opacity: 0.9;
}

.proposal-card[b-7qe0up26da] {
    background: white;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 30px 80px rgba(4, 3, 12, 0.65),
        0 4px 24px rgba(109, 74, 255, 0.10);
    max-width: 900px;
    width: 100%;
    padding: 2rem;
}

.proposal-container .loading-container[b-7qe0up26da],
.proposal-container .error-container[b-7qe0up26da],
.proposal-container .processing-container[b-7qe0up26da] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* Disuasión de impresión: la página pública sale EN BLANCO por la impresora. El guard
   equivalente DENTRO del iframe viaja en el srcdoc. */
@media print {
    .proposal-container[b-7qe0up26da],
    .pv-root[b-7qe0up26da] {
        display: none !important;
    }
}

/* La selección en la página exterior no sirve para nada (el anclaje vive dentro del
   iframe): apagarla quita el gesto previo al copiado. Los campos de escritura la
   recuperan explícitamente — user-select se hereda y sin esto los cuadros de comentario
   no dejarían ni seleccionar lo que uno mismo escribe. */
.pv-root[b-7qe0up26da],
.proposal-container[b-7qe0up26da] {
    -webkit-user-select: none;
    user-select: none;
}

.pv-root textarea[b-7qe0up26da],
.pv-root input[b-7qe0up26da],
.proposal-container textarea[b-7qe0up26da],
.proposal-container input[b-7qe0up26da] {
    -webkit-user-select: text;
    user-select: text;
}

/* Marca de agua forense: encima del documento y del carril (por eso fixed y por encima
   del overlay de anotaciones), debajo de la cortina anti-captura. Al 5% no molesta para
   leer y sobrevive en cualquier captura. Nada de tokenizarla por tema: debe verse igual
   sobre el papel claro y sobre la cubierta violeta del dosier. */
.pv-watermark[b-7qe0up26da] {
    position: fixed;
    inset: -12%;
    z-index: 60;
    pointer-events: none;
    display: flex;
    flex-wrap: wrap;
    gap: 5rem 4rem;
    align-content: space-between;
    justify-content: space-around;
    transform: rotate(-28deg);
}

.pv-watermark span[b-7qe0up26da] {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    /* difference con gris medio: clarea sobre la cubierta oscura y oscurece sobre el
       papel blanco — un gris plano desaparecía sobre el violeta del dosier y la marca
       no salía en las capturas de esa zona, que es justo la portada. */
    color: #909090;
    mix-blend-mode: difference;
    opacity: 0.16;
    white-space: nowrap;
}
/* /Components/Pages/Public/PublicFormView.razor.rz.scp.css */
/* Estilos propios de PublicFormView — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/pages/public-form-view.css. Todo estaba ya scoped bajo
   .public-form-container, que es el div raíz plano de PublicFormView.razor
   (/form/{slug}); estados, form-card, labels, footer y el @media 600px son
   HTML propio del .razor, así que el b-{hash} llega directo: sin ::deep ni
   envoltorio. Los campos Radzen del formulario no se estilizan en esta hoja
   (solo el label plano), por eso no hay reglas ::deep.
   ───────────────────────────────────────────────────────────────────────────── */

.public-form-container[b-bmfkxn0j1d] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.public-form-container .loading-container[b-bmfkxn0j1d],
.public-form-container .error-container[b-bmfkxn0j1d],
.public-form-container .success-container[b-bmfkxn0j1d],
.public-form-container .closed-container[b-bmfkxn0j1d] {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-width: 500px;
}

.public-form-container .form-card[b-bmfkxn0j1d] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 2rem 2.5rem;
    width: 100%;
    max-width: 600px;
}

.public-form-container .form-logo[b-bmfkxn0j1d] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.public-form-container .form-logo img[b-bmfkxn0j1d] {
    max-height: 60px;
    max-width: 100%;
}

.public-form-container .form-header[b-bmfkxn0j1d] {
    margin-bottom: 2rem;
    text-align: center;
}

.public-form-container .form-header h1[b-bmfkxn0j1d] {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
}

.public-form-container .form-description[b-bmfkxn0j1d] {
    color: #666;
    margin: 0;
}

.public-form-container .form-field[b-bmfkxn0j1d] {
    margin-bottom: 1.5rem;
}

.public-form-container .form-field label[b-bmfkxn0j1d] {
    display: inline;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.public-form-container .required-marker[b-bmfkxn0j1d] {
    color: var(--rz-danger);
    margin-left: 4px;
}

.public-form-container .field-help[b-bmfkxn0j1d] {
    display: block;
    font-size: 0.85rem;
    color: #888;
    margin-top: 0.25rem;
}

.public-form-container .captcha-notice[b-bmfkxn0j1d] {
    color: #666;
    font-size: 0.85rem;
    margin: 0;
}

.public-form-container .form-actions[b-bmfkxn0j1d] {
    margin-top: 2rem;
    text-align: center;
}

.public-form-container .form-footer[b-bmfkxn0j1d] {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    text-align: center;
    font-size: 0.85rem;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

@media (max-width: 600px) {
    .public-form-container[b-bmfkxn0j1d] {
        padding: 1rem;
    }

    .public-form-container .form-card[b-bmfkxn0j1d] {
        padding: 1.5rem;
    }
}
/* /Components/Pages/Public/RateTicket.razor.rz.scp.css */
/* Estilos propios de RateTicket — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/pages/feedback-rate.css. Todo estaba ya scoped bajo
   .feedback-rate-page, root plano de RateTicket.razor (página pública
   /feedback/rate/{token}/{score}); tarjeta, brand, header, comment y estados
   son HTML propio → b-{hash} directo. Las dos excepciones llevan ::deep
   porque el elemento lo pinta un componente Radzen (no recibe el hash):
   `.rz-textarea` (RadzenTextArea del comentario) y `.rzi` (RadzenIcon de los
   estados) — ancladas en sus contenedores HTML propios __comment y __state.
   El @media 480px viaja tal cual.
   ───────────────────────────────────────────────────────────────────────────── */

/* ===============================================================
 * Public CSAT page — /feedback/rate/{token}/{score}
 *
 * Visual language matches the dark "ticket resolved" email handoff
 * (design_handoff_emails/emails/resolved.html) so that the click-through
 * from the email feels like a continuation, not a context switch.
 * Scoped under .feedback-rate-page so we never bleed into the rest of
 * the portal.
 * =============================================================== */

.feedback-rate-page[b-f28t4jlf9w] {
    min-height: 100vh;
    width: 100%;
    background: #1a1a1a;
    color: #e5e5e7;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.feedback-rate-page__card[b-f28t4jlf9w] {
    width: 100%;
    max-width: 600px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
}

.feedback-rate-page__brand[b-f28t4jlf9w] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid #3a3a3a;
    margin-bottom: 28px;
    font-size: 14px;
    font-weight: 600;
    color: #e5e5e7;
}

.feedback-rate-page__logo[b-f28t4jlf9w] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #5b4be3;
    color: #fff;
    text-align: center;
    line-height: 34px;
    font-size: 18px;
    font-weight: 700;
}

.feedback-rate-page__brand-sub[b-f28t4jlf9w] {
    color: #a0a0a8;
    font-weight: 400;
}

.feedback-rate-page__header[b-f28t4jlf9w] {
    text-align: center;
    margin-bottom: 28px;
}

.feedback-rate-page__emoji[b-f28t4jlf9w] {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 18px;
}

.feedback-rate-page__header h1[b-f28t4jlf9w] {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.3px;
}

.feedback-rate-page__header p[b-f28t4jlf9w] {
    margin: 0 auto;
    max-width: 420px;
    font-size: 14px;
    line-height: 1.6;
    color: #a0a0a8;
}

.feedback-rate-page__ticket-ref[b-f28t4jlf9w] {
    display: inline-block;
    margin-top: 14px;
    font-family: 'SF Mono', Consolas, Menlo, monospace;
    font-size: 12px;
    color: #8b7cf0;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(139, 124, 240, 0.12);
    border: 1px solid rgba(139, 124, 240, 0.25);
}

.feedback-rate-page__comment[b-f28t4jlf9w] {
    background: #1f1f1f;
    border: 1px solid #3a3a3a;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 24px;
}

.feedback-rate-page__comment label[b-f28t4jlf9w] {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #c4c4cc;
}

.feedback-rate-page__comment[b-f28t4jlf9w]  .rz-textarea {
    background: #141414 !important;
    border: 1px solid #3a3a3a !important;
    color: #e5e5e7 !important;
    border-radius: 8px;
    min-height: 80px;
}

.feedback-rate-page__comment-actions[b-f28t4jlf9w] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 12px;
    gap: 10px;
}

.feedback-rate-page__comment-thanks[b-f28t4jlf9w] {
    color: #10b981;
    font-size: 13px;
    font-weight: 500;
}

.feedback-rate-page__actions[b-f28t4jlf9w] {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.feedback-rate-page__state[b-f28t4jlf9w] {
    text-align: center;
    padding: 24px 12px;
}

.feedback-rate-page__state[b-f28t4jlf9w]  .rzi {
    font-size: 56px;
    color: #f97316;
    margin-bottom: 16px;
}

.feedback-rate-page__state h1[b-f28t4jlf9w] {
    margin: 0 0 10px;
    font-size: 22px;
    color: #ffffff;
}

.feedback-rate-page__state p[b-f28t4jlf9w] {
    margin: 0 0 22px;
    color: #a0a0a8;
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 480px) {
    .feedback-rate-page__card[b-f28t4jlf9w] {
        padding: 24px 18px;
    }

    .feedback-rate-page__emoji[b-f28t4jlf9w] {
        font-size: 52px;
    }

    .feedback-rate-page__header h1[b-f28t4jlf9w] {
        font-size: 20px;
    }
}
/* /Components/Pages/Public/TaskApprovalView.razor.rz.scp.css */
/* Estilos propios de TaskApprovalView — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/pages/task-approval-view.css. Todo el marcado de la
   página pública /task-approval/{token} (approval-container/card/header,
   task-code, description-content, time-summary, total-hours, response-section,
   form-group, button-group y los estados scoped bajo .approval-card) es HTML
   plano de TaskApprovalView.razor → b-{hash} directo, sin ::deep ni envoltorio.

   OJO homónimo: .approval-card también nombra la tarjeta de aprobación del
   CHAT (ApprovalCard.razor, antes chat/approval-card.css). Cada componente se
   lleva la definición de SU hoja: esta es la de la página pública.
   Si .description-content pasara a inyectarse como MarkupString con HTML
   interno, sus descendientes necesitarían ::deep; hoy la regla solo estiliza
   el contenedor, así que no cambia nada.
   ───────────────────────────────────────────────────────────────────────────── */

.approval-container[b-62yqyk7i07] {
    min-height: 100vh;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.approval-card[b-62yqyk7i07] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 900px;
    width: 100%;
    padding: 2rem;
}

.approval-header[b-62yqyk7i07] {
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.task-code[b-62yqyk7i07] {
    font-size: 0.875rem;
    color: #666;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.approval-header h1[b-62yqyk7i07] {
    margin: 0 0 0.5rem 0;
    color: #333;
}

.approval-card .project-name[b-62yqyk7i07] {
    color: #666;
    margin: 0.5rem 0;
}

.task-description[b-62yqyk7i07] {
    margin-bottom: 1.5rem;
}

.task-description h3[b-62yqyk7i07] {
    margin-bottom: 0.75rem;
}

.description-content[b-62yqyk7i07] {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    line-height: 1.6;
}

.time-summary[b-62yqyk7i07] {
    margin-bottom: 1.5rem;
}

.time-summary h3[b-62yqyk7i07] {
    margin-bottom: 1rem;
}

.total-hours[b-62yqyk7i07] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #11998e, #38ef7d);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    font-size: 1.25rem;
}

.hours-value[b-62yqyk7i07] {
    font-size: 2rem;
    font-weight: bold;
}

.hours-label[b-62yqyk7i07] {
    opacity: 0.9;
}

.approval-card .response-section[b-62yqyk7i07] {
    background: #e8f5e9;
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 1.5rem;
}

.approval-card .response-section h3[b-62yqyk7i07] {
    margin-top: 0;
    color: #2e7d32;
}

.approval-card .form-group[b-62yqyk7i07] {
    margin-bottom: 1rem;
}

.approval-card .button-group[b-62yqyk7i07] {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.approval-card .loading-container[b-62yqyk7i07],
.approval-card .error-container[b-62yqyk7i07],
.approval-card .processing-container[b-62yqyk7i07] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.approval-card .approved-section[b-62yqyk7i07],
.approval-card .rejected-section[b-62yqyk7i07] {
    text-align: center;
    padding: 2rem;
    margin-top: 1.5rem;
}
/* /Components/Pages/Quotes/PublishQuoteDialog.razor.rz.scp.css */
/* Estilos propios de PublishQuoteDialog — CSS isolation.
   Vienen de wwwroot/css/commerce/publish-quote-dialog.css.

   En la mudanza se han sustituido 4 colores escritos a pelo por sus tokens de
   theme.css. No es cosmetica: un #e9ecef no sabe que el cliente ha cambiado su
   color primario desde la UI, y en modo oscuro se queda gris claro sobre fondo
   oscuro. Los equivalentes se han elegido por cercania en la escala neutra
   (#f8f9fa~base-50, #e9ecef~base-200, #8c96a3~text-secondary...), no a ojo.
   ───────────────────────────────────────────────────────────────────────── */

/* PublishQuoteDialog styles */
.publish-products-list[b-my7qzaff7y] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.75rem;
}
.publish-product-row[b-my7qzaff7y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.8);
    border: 1px solid var(--rz-base-200);
}
.publish-product-logo[b-my7qzaff7y] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--rz-base-50);
    flex-shrink: 0;
}
.publish-product-logo-placeholder[b-my7qzaff7y] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.publish-pill[b-my7qzaff7y] {
    display: inline-block;
    padding: 0.08rem 0.34rem;
    border-radius: 999px;
    font-size: 0.56rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.publish-pill-promo[b-my7qzaff7y] { background: var(--rz-info-lighter); color: var(--rz-info-dark); border-color: var(--dalatic-accent-200); }
.publish-pill-corporate[b-my7qzaff7y] { background: var(--rz-primary-lighter); color: var(--rz-primary-dark); border-color: var(--dalatic-primary-200); }
.publish-product-meta[b-my7qzaff7y] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
/* /Components/Pages/Quotes/QuoteAccept.razor.rz.scp.css */
/* Estilos propios de QuoteAccept (/quote/accept/{Token}) — CSS isolation.
   Vienen de wwwroot/css/commerce/quote-accept.css.

   Hoja ya auto-disciplinada: todas las reglas cuelgan de `.quote-accept-page`,
   el <div> RAIZ propio de la pagina, y casi todos los sujetos (h1, p, td, th,
   spans, divs) son HTML escrito aqui — reglas directas, el hash cae en el
   ultimo selector. UNICA excepcion: `.actions-section button` (dentro del
   @media max-width:600px) — los botones los pinta <RadzenButton> y no reciben
   el `b-{hash}`, asi que salen por `::deep` anclado en `.actions-section`
   (div propio). El bloque @media se conserva completo y tal cual.

   La isolation ademas blinda definitivamente la fuga historica de
   `.error-container` que documenta la cabecera original, conservada abajo.
   ───────────────────────────────────────────────────────────────────────────── */

/* Page-scoped styles for /quote/accept/{Token}.
 *
 * Every rule is anchored under .quote-accept-page because App.razor links ALL page
 * stylesheets globally on every request: an unscoped generic class here cascades onto
 * the whole portal. This file used to declare a bare `.error-container` and, being the
 * last stylesheet in the link order, it silently overrode the one in
 * css/pages/access-denied.css — turning the full-screen centring wrapper of the
 * Access Denied page into a 500px white card pinned to the left edge.
 *
 * Keep new selectors scoped. */
/* QuoteAccept page styles */
.quote-accept-page[b-m4kri4jy6q] {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.quote-accept-page .loading-container[b-m4kri4jy6q],
.quote-accept-page .error-container[b-m4kri4jy6q],
.quote-accept-page .success-container[b-m4kri4jy6q],
.quote-accept-page .rejected-container[b-m4kri4jy6q] {
    background: white;
    border-radius: 16px;
    padding: 48px;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.quote-accept-page .loading-container p[b-m4kri4jy6q],
.quote-accept-page .error-container p[b-m4kri4jy6q],
.quote-accept-page .success-container p[b-m4kri4jy6q],
.quote-accept-page .rejected-container p[b-m4kri4jy6q] {
    color: #6b7280;
    margin: 16px 0 0 0;
}

.quote-accept-page .error-container h1[b-m4kri4jy6q],
.quote-accept-page .success-container h1[b-m4kri4jy6q],
.quote-accept-page .rejected-container h1[b-m4kri4jy6q] {
    margin: 16px 0;
    color: #1f2937;
}

.quote-accept-page .hint[b-m4kri4jy6q] {
    font-size: 14px;
    color: #9ca3af !important;
    margin-top: 24px !important;
}

.quote-accept-page .order-ref[b-m4kri4jy6q] {
    background: #f0fdf4;
    padding: 12px 24px;
    border-radius: 8px;
    color: #059669 !important;
}

.quote-accept-page .quote-container[b-m4kri4jy6q] {
    background: white;
    border-radius: 16px;
    padding: 32px;
    max-width: 700px;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.quote-accept-page .quote-header[b-m4kri4jy6q] {
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.quote-accept-page .partner-info h2[b-m4kri4jy6q] {
    margin: 0 0 8px 0;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quote-accept-page .quote-title h1[b-m4kri4jy6q] {
    margin: 0;
    color: #1f2937;
    font-size: 28px;
}

.quote-accept-page .quote-ref[b-m4kri4jy6q] {
    color: #667eea;
    font-weight: 500;
}

.quote-accept-page .info-section[b-m4kri4jy6q] {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

.quote-accept-page .info-row[b-m4kri4jy6q] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.quote-accept-page .info-row .label[b-m4kri4jy6q] {
    color: #6b7280;
}

.quote-accept-page .info-row .value[b-m4kri4jy6q] {
    color: #1f2937;
    font-weight: 500;
}

.quote-accept-page .products-section h3[b-m4kri4jy6q] {
    margin: 0 0 16px 0;
    color: #1f2937;
}

.quote-accept-page .products-table[b-m4kri4jy6q] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.quote-accept-page .products-table th[b-m4kri4jy6q] {
    background: #f9fafb;
    padding: 12px;
    text-align: left;
    color: #6b7280;
    font-weight: 600;
    border-bottom: 2px solid #e5e7eb;
}

.quote-accept-page .products-table td[b-m4kri4jy6q] {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
}

.quote-accept-page .products-table .center[b-m4kri4jy6q] { text-align: center; }
.quote-accept-page .products-table .right[b-m4kri4jy6q] { text-align: right; }
.quote-accept-page .products-table .bold[b-m4kri4jy6q] { font-weight: 600; }

.quote-accept-page .product-name[b-m4kri4jy6q] {
    font-weight: 500;
}

.quote-accept-page .product-period[b-m4kri4jy6q] {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

.quote-accept-page .total-row[b-m4kri4jy6q] {
    background: #f0fdf4;
}

.quote-accept-page .total-row td[b-m4kri4jy6q] {
    font-weight: 600;
    color: #1f2937;
    font-size: 18px;
    border-bottom: none;
}

.quote-accept-page .total-value[b-m4kri4jy6q] {
    color: #059669 !important;
    font-size: 20px !important;
}

.quote-accept-page .actions-section[b-m4kri4jy6q] {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: 32px 0;
    flex-wrap: wrap;
}

.quote-accept-page .disclaimer[b-m4kri4jy6q] {
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    max-width: 500px;
    margin: 0 auto;
}

@media (max-width: 600px) {
.quote-accept-page     .quote-container[b-m4kri4jy6q] {
        padding: 20px;
    }

.quote-accept-page     .quote-title h1[b-m4kri4jy6q] {
        font-size: 22px;
    }

.quote-accept-page     .products-table th:nth-child(3)[b-m4kri4jy6q],
.quote-accept-page     .products-table td:nth-child(3)[b-m4kri4jy6q] {
        display: none;
    }

.quote-accept-page     .actions-section[b-m4kri4jy6q] {
        flex-direction: column;
    }

.quote-accept-page     .actions-section[b-m4kri4jy6q]  button {
        width: 100%;
    }
}

/* ── Contribución cross-cluster (de pages/access-denied.css + pages/setup-wizard.css) aplicada por el orquestador ── */
/* Añadir a QuoteAccept.razor.css — contribucion formal exigida por el revisor de chat-pages.
   La base de .error-icon (circulo 80px centrado) vivia en pages/access-denied.css y el
   tinte rojo translucido en pages/setup-wizard.css, ambas borradas; QuoteAccept.razor:16
   quedo sin caja/centrado. Scopar bajo la raiz propia de la pagina. */
.quote-accept-page .error-icon[b-m4kri4jy6q] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
/* /Components/Pages/Quotes/QuoteDetailDialog.razor.rz.scp.css */
/* Estilos propios de QuoteDetailDialog — CSS isolation.
   Vienen de wwwroot/css/commerce/quote-detail-dialog.css.

   Todo son reglas directas sobre HTML escrito aqui bajo el <div> raiz
   `.quote-sheet`, salvo `quote-icon`: cae sobre un <RadzenIcon> (componente,
   no recibe el `b-{hash}`) y sale por `::deep` anclado en
   `.quote-header-left`, el <div> propio padre.

   Migran tambien los genericos `.success` (!important) / `.bold` /
   `.no-products`, que hasta hoy FUGABAN globalmente desde esta hoja: al
   scoparlos, los terceros que vivian de la fuga la pierden (p.ej. SetupWizard
   en /setup; y OrderDetailDialog recupera sus propios homonimos info-* /
   products-table/product-* /col-*) — cambios esperados por regla 11.
   ───────────────────────────────────────────────────────────────────────────── */

.quote-sheet[b-ownwu4dx6d] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0.5rem;
}

/* Header */
.quote-header[b-ownwu4dx6d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--rz-primary);
}
.quote-header-left[b-ownwu4dx6d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.quote-header-left[b-ownwu4dx6d]  .quote-icon { font-size: 2rem; color: var(--rz-primary); }
.quote-title[b-ownwu4dx6d] { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--rz-text-color); }
.quote-subtitle[b-ownwu4dx6d] { font-size: 0.8rem; color: var(--rz-text-secondary-color); }
.quote-status[b-ownwu4dx6d] { padding: 0.4rem 0.8rem; border-radius: 4px; font-weight: 600; font-size: 0.8rem; color: white; }

/* Info row */
.quote-info-row[b-ownwu4dx6d] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rz-base-300);
}
.info-item[b-ownwu4dx6d] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.info-label[b-ownwu4dx6d] { font-size: 0.7rem; text-transform: uppercase; color: var(--rz-text-secondary-color); letter-spacing: 0.5px; }
.info-value[b-ownwu4dx6d] { font-size: 0.95rem; font-weight: 600; color: var(--rz-text-color); }
.info-value.success[b-ownwu4dx6d] { color: var(--rz-success); }
.info-ref[b-ownwu4dx6d] { font-size: 0.75rem; color: var(--rz-text-secondary-color); }

/* Products */
.quote-products[b-ownwu4dx6d] { flex: 1; }
.products-header[b-ownwu4dx6d] { font-weight: 600; margin-bottom: 0.5rem; color: var(--rz-text-color); }
.products-table[b-ownwu4dx6d] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.products-table th[b-ownwu4dx6d] {
    text-align: left;
    padding: 0.5rem;
    border-bottom: 2px solid var(--rz-base-300);
    color: var(--rz-text-secondary-color);
    font-weight: 600;
    font-size: 0.8rem;
}
.products-table td[b-ownwu4dx6d] {
    padding: 0.5rem;
    border-bottom: 1px solid var(--rz-base-300);
    color: var(--rz-text-color);
}
.col-product[b-ownwu4dx6d] { width: auto; }
.col-qty[b-ownwu4dx6d] { width: 60px; text-align: center; }
.col-price[b-ownwu4dx6d] { width: 100px; text-align: right; }
.col-period[b-ownwu4dx6d] { width: 70px; text-align: center; }

/* Totals footer */
.products-table tfoot td[b-ownwu4dx6d] {
    padding: 0.4rem 0.5rem;
    border-top: 2px solid var(--rz-base-300);
    border-bottom: none;
    font-size: 0.85rem;
}
.info-detail[b-ownwu4dx6d] { font-size: 0.8rem; color: var(--rz-text-secondary-color); }
.product-name[b-ownwu4dx6d] { font-weight: 500; }
.product-sku[b-ownwu4dx6d] { font-size: 0.7rem; color: var(--rz-text-secondary-color); }
.success[b-ownwu4dx6d] { color: var(--rz-success) !important; }
.bold[b-ownwu4dx6d] { font-weight: 600; }
.no-products[b-ownwu4dx6d] { text-align: center; padding: 1.5rem; color: var(--rz-text-secondary-color); }

/* Actions */
.quote-actions[b-ownwu4dx6d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rz-base-300);
}
.actions-left[b-ownwu4dx6d] { display: flex; gap: 0.5rem; }
/* /Components/Pages/Quotes/QuoteDraftDetailDialog.razor.rz.scp.css */
/* Estilos propios de QuoteDraftDetailDialog — CSS isolation.
   Vienen de wwwroot/css/commerce/quote-draft-detail-dialog.css.

   En la mudanza se han sustituido 12 colores escritos a pelo por sus tokens de
   theme.css. No es cosmetica: un #e9ecef no sabe que el cliente ha cambiado su
   color primario desde la UI, y en modo oscuro se queda gris claro sobre fondo
   oscuro. Los equivalentes se han elegido por cercania en la escala neutra
   (#f8f9fa~base-50, #e9ecef~base-200, #8c96a3~text-secondary...), no a ojo.
   ───────────────────────────────────────────────────────────────────────── */

/* QuoteDraftDetailDialog styles */

/* Customer dropdown template styling */
.quote-draft-customer-item[b-z7ws7axuwc] {
    color: var(--rz-text-color);
}
.quote-draft-customer-ref[b-z7ws7axuwc] {
    color: var(--rz-text-secondary-color);
}
/* Product search autocomplete template styling */
.product-search-item[b-z7ws7axuwc] {
    padding: 0.5rem 0;
}
.product-search-name[b-z7ws7axuwc] {
    font-weight: 500;
    color: var(--rz-text-color);
}
.product-search-vendor[b-z7ws7axuwc] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}
.product-search-sku[b-z7ws7axuwc] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    font-family: monospace;
}
.product-search-row[b-z7ws7axuwc] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.product-search-logo[b-z7ws7axuwc] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
    background: var(--rz-base-50);
    flex-shrink: 0;
}
.product-search-logo-placeholder[b-z7ws7axuwc] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: var(--rz-base-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rz-text-secondary-color);
    flex-shrink: 0;
}
.product-pill[b-z7ws7axuwc] {
    display: inline-block;
    padding: 0.08rem 0.34rem;
    border-radius: 999px;
    font-size: 0.56rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.product-pill-promo[b-z7ws7axuwc] { background: var(--rz-info-lighter); color: var(--rz-info-dark); border-color: var(--dalatic-accent-200); }
.product-pill-corporate[b-z7ws7axuwc] { background: var(--rz-primary-lighter); color: var(--rz-primary-dark); border-color: var(--dalatic-primary-200); }
.product-pill-addon[b-z7ws7axuwc] { background: var(--rz-secondary-lighter); color: var(--rz-secondary-dark); border-color: var(--rz-base-300); }
.product-pill-trial[b-z7ws7axuwc] { background: var(--rz-warning-lighter); color: var(--rz-warning-darker); border-color: color-mix(in srgb, var(--rz-warning) 28%, white); }
.quote-item-header[b-z7ws7axuwc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}
.quote-item-logo[b-z7ws7axuwc] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--rz-base-50);
    flex-shrink: 0;
}
.quote-item-logo-placeholder[b-z7ws7axuwc] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--rz-base-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rz-text-secondary-color);
    flex-shrink: 0;
}
.quote-promo-summary[b-z7ws7axuwc] {
    margin-top: 0.7rem;
    padding: 0.75rem 0.85rem;
    border-radius: 8px;
    background: var(--rz-base-50);
    border: 1px solid var(--rz-base-200);
}
.quote-promo-tier[b-z7ws7axuwc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    background: var(--rz-base-background-color);
    margin-top: 0.35rem;
    border: 1px solid var(--rz-base-200);
}
.quote-promo-tier.active[b-z7ws7axuwc] {
    background: var(--rz-success-lighter);
    border: 1px solid var(--rz-success-light);
}
.quote-promo-headline[b-z7ws7axuwc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
}
/* /Components/Pages/Quotes/Quotes.razor.rz.scp.css */
/* Estilos propios de Quotes — CSS isolation.
   Vienen de wwwroot/css/commerce/quotes.css, que se cargaba en TODAS las paginas del
   portal. Verificado antes de mover: todas sus clases van sobre HTML de este
   marcado, ningun otro componente las usa, y todo el color sale de tokens de
   theme.css — asi que sigue respondiendo al color primario del cliente y al
   modo oscuro igual que antes.
   ───────────────────────────────────────────────────────────────────────── */

/* Quotes page styles */
.quote-reference-clickable[b-amu9jv1q4m] {
    cursor: pointer;
    font-weight: 500;
    color: var(--rz-text-color);
}

.quote-reference-clickable:hover[b-amu9jv1q4m] {
    text-decoration: underline;
    color: var(--rz-primary);
}
/* /Components/Pages/Rrhh/Admin/DisconnectionAdmin.razor.rz.scp.css */
/* Estilos propios de DisconnectionAdmin — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-disconnection.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   RRHH v3 §6 — desconexión digital (LOPDGDD art. 88)
   Reglas: nada de <style> en .razor (CLAUDE.md); los colores salen de los
   tokens de Radzen para que el tema claro/oscuro siga funcionando.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Barra de herramientas ─────────────────────────────────────────────── */
.rrhh-disc-toolbar[b-iskz1nf2a1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.rrhh-disc-toolbar-spacer[b-iskz1nf2a1] {
    flex: 1 1 auto;
}

/* ── Banner legal §6.5 ─────────────────────────────────────────────────────
   Permanente, no descartable: la advertencia de que las modalidades no se
   fijan unilateralmente tiene que estar delante de quien edita la ventana. */
.rrhh-disc-legal[b-iskz1nf2a1] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    border: 1px solid var(--rz-warning-light, #f3d19e);
    border-left: 4px solid var(--rz-warning, #ed6c02);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--rz-warning-lighter, #fff6e6);
    color: var(--rz-text-color);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.rrhh-disc-legal[b-iskz1nf2a1]  .rzi {
    color: var(--rz-warning, #ed6c02);
    flex: 0 0 auto;
}

/* ── Editor de política ────────────────────────────────────────────────── */
.rrhh-disc-form[b-iskz1nf2a1] {
    display: grid;
    gap: 0.85rem;
    max-width: 900px;
}

.rrhh-disc-field-label[b-iskz1nf2a1] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-tertiary-color);
    margin-bottom: 0.25rem;
}

.rrhh-disc-hint[b-iskz1nf2a1] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.rrhh-disc-inline[b-iskz1nf2a1] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

/* ── Selector de días ──────────────────────────────────────────────────── */
.rrhh-disc-days[b-iskz1nf2a1] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.rrhh-disc-day[b-iskz1nf2a1] {
    min-width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid var(--rz-base-300);
    background: var(--rz-base-background-color);
    color: var(--rz-text-tertiary-color);
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.rrhh-disc-day:hover[b-iskz1nf2a1] {
    border-color: var(--rz-primary);
}

.rrhh-disc-day-on[b-iskz1nf2a1] {
    background: var(--rz-primary);
    border-color: var(--rz-primary);
    color: var(--rz-primary-contrast-color, #fff);
}

/* ── Estados de la cola ────────────────────────────────────────────────── */
.rrhh-disc-state[b-iskz1nf2a1] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid var(--rz-base-300);
    color: var(--rz-text-tertiary-color);
}

.rrhh-disc-state-pending[b-iskz1nf2a1] {
    border-color: var(--rz-warning, #ed6c02);
    color: var(--rz-warning-dark, #b26a00);
}

.rrhh-disc-state-sent[b-iskz1nf2a1] {
    border-color: var(--rz-success, #2e7d32);
    color: var(--rz-success-dark, #1e6b34);
}

.rrhh-disc-state-discarded[b-iskz1nf2a1] {
    border-color: var(--rz-base-400);
}
/* /Components/Pages/Rrhh/Admin/EmployeeErpProfile.razor.rz.scp.css */
/* Página de ficha de empleado (/admin/rrhh/empleados/{id}).
   El contenido lo pinta ErpContractLiveView en variante Page y se estila a sí
   mismo; aquí sólo vive el marco de página: ancho de lectura, barra de vuelta
   y la tarjeta contenedora. Colores por tokens de theme.css.
   ───────────────────────────────────────────────────────────────────────── */

.erp-page[b-mnho6n7o3l] {
    margin: 40px auto;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.erp-page-bar[b-mnho6n7o3l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.erp-page[b-mnho6n7o3l]  .erp-page-card {
    border-radius: 12px;
    border: 1px solid var(--rz-base-300);
}

@media (max-width: 700px) {
    .erp-page[b-mnho6n7o3l] {
        margin: 20px auto;
    }
}
/* /Components/Pages/Rrhh/Admin/EngagementAdmin.razor.rz.scp.css */
/* Estilos propios de EngagementAdmin — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-engagement.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   HR v4 §3 / §7 — anonymous engagement survey (eNPS)

   Two surfaces: the employee's two-question page and the HR results panel. No <style> block lives in the
   .razor files (CLAUDE.md), and no rule here encodes anything about a respondent — the visual design cannot
   leak what the schema does not store.
   ───────────────────────────────────────────────────────────────────────────── */
.rrhh-enps-page[b-bk1edrxjqq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rrhh-enps-title-bar[b-bk1edrxjqq] {
    width: 4px;
    height: 38px;
    border-radius: 2px;
    background: var(--rz-primary);
}

.rrhh-enps-title[b-bk1edrxjqq] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.rrhh-enps-subtitle[b-bk1edrxjqq] {
    margin: 2px 0 0 0;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
}

[b-bk1edrxjqq] .rrhh-enps-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Trend: a gap is rendered as a hollow slot, never as a zero-height bar ── */
.rrhh-enps-trend[b-bk1edrxjqq] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.rrhh-enps-trend-point[b-bk1edrxjqq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 68px;
}

.rrhh-enps-trend-bar[b-bk1edrxjqq] {
    width: 26px;
    border-radius: 4px 4px 0 0;
    background: var(--rz-primary);
}

.rrhh-enps-trend-gap[b-bk1edrxjqq] {
    width: 26px;
    height: 26px;
    border: 1px dashed var(--rz-base-400);
    border-radius: 4px;
    background: transparent;
}

.rrhh-enps-trend-label[b-bk1edrxjqq] {
    font-size: 0.6875rem;
    color: var(--rz-text-tertiary-color);
    white-space: nowrap;
}

.rrhh-enps-trend-value[b-bk1edrxjqq] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

.rrhh-enps-hint[b-bk1edrxjqq] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}
/* /Components/Pages/Rrhh/Admin/EvaluationCampaignsAdmin.razor.rz.scp.css */
/* Estilos propios de EvaluationCampaignsAdmin — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-evaluations.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ============================================================================
   RRHH v4 §2 — Evaluaciones 90/180/360 ligeras
   Superficies: /rrhh/mis-evaluaciones (+ diálogo de formulario), /rrhh/mis-resultados,
                /admin/rrhh/evaluaciones (+ diálogos de campaña y previsualización),
                /admin/rrhh/evaluaciones/plantillas.
   Regla CLAUDE.md: cero <style> en .razor — todo el CSS de estas páginas vive aquí.
   ========================================================================== */
.rrhh-ev-page[b-oy3ll45ex0] {
    margin: 40px auto;
    max-width: 1100px;
}

.rrhh-ev-title-bar[b-oy3ll45ex0] {
    width: 4px;
    height: 40px;
    background: linear-gradient(180deg, var(--rz-primary) 0%, var(--rz-secondary) 100%);
    border-radius: 2px;
}

.rrhh-ev-title[b-oy3ll45ex0] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rz-text-color);
    letter-spacing: -0.3px;
}

.rrhh-ev-subtitle[b-oy3ll45ex0] {
    margin: 4px 0 0 0;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

[b-oy3ll45ex0] .rrhh-ev-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.rrhh-ev-empty[b-oy3ll45ex0] {
    padding: 32px 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/Rrhh/Admin/EvaluationTemplatesAdmin.razor.rz.scp.css */
/* Estilos propios de EvaluationTemplatesAdmin — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-evaluations.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ============================================================================
   RRHH v4 §2 — Evaluaciones 90/180/360 ligeras
   Superficies: /rrhh/mis-evaluaciones (+ diálogo de formulario), /rrhh/mis-resultados,
                /admin/rrhh/evaluaciones (+ diálogos de campaña y previsualización),
                /admin/rrhh/evaluaciones/plantillas.
   Regla CLAUDE.md: cero <style> en .razor — todo el CSS de estas páginas vive aquí.
   ========================================================================== */
.rrhh-ev-page[b-wc4qencqby] {
    margin: 40px auto;
    max-width: 1100px;
}

.rrhh-ev-title-bar[b-wc4qencqby] {
    width: 4px;
    height: 40px;
    background: linear-gradient(180deg, var(--rz-primary) 0%, var(--rz-secondary) 100%);
    border-radius: 2px;
}

.rrhh-ev-title[b-wc4qencqby] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rz-text-color);
    letter-spacing: -0.3px;
}

.rrhh-ev-subtitle[b-wc4qencqby] {
    margin: 4px 0 0 0;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

[b-wc4qencqby] .rrhh-ev-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Formulario de respuesta ───────────────────────────────────────────── */
.rrhh-ev-form-item[b-wc4qencqby] {
    padding: 14px 0;
    border-bottom: 1px solid var(--rz-base-300);
}

.rrhh-ev-form-item:last-child[b-wc4qencqby] {
    border-bottom: none;
}

.rrhh-ev-form-help[b-wc4qencqby] {
    display: block;
    margin: 2px 0 10px 0;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.rrhh-ev-scale[b-wc4qencqby] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rrhh-ev-section-title[b-wc4qencqby] {
    margin: 22px 0 10px 0;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/Rrhh/Admin/KioskDevicesAdmin.razor.rz.scp.css */
/* Estilos propios de KioskDevicesAdmin — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-kiosk-admin.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   Kiosko — superficie de ADMINISTRACIÓN (blueprint v3 §7.6, §9.2)
   ───────────────────────────────────────────────────────────────────────────
   Este fichero viste KioskDevicesAdmin y EnrollDeviceDialog, que SÍ son
   Blazor + Radzen. La pantalla de fichaje es otra cosa: vive en
   wwwroot/kiosk/rrhh-kiosk.css, no comparte una sola regla con esta hoja y no
   depende de ninguna variable del tema — un reloj de jornada que deja de
   renderizar porque alguien tocó el tema deja de ser un reloj.
   ═══════════════════════════════════════════════════════════════════════════ */
.rrhh-kiosk-toolbar[b-kj5tzr5k09] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    flex-wrap: wrap;
}

.rrhh-kiosk-toolbar-spacer[b-kj5tzr5k09] {
    flex: 1 1 auto;
}

.rrhh-kiosk-hint[b-kj5tzr5k09] {
    display: block;
    margin: 0.25rem 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    line-height: 1.5;
}


/* ══ De wwwroot/css/rrhh/rrhh.css (tanda 2 de la migración) ══ */

/* ═══════════════════════════════════════════════════════════════════════════
   RRHH module — shared styles (blueprint §5.6).
   Clock widget (MyWorkDay), event timeline, balance/contract cards, admin
   grids and the WorkDayDetailDrawer side dialog.
   Theme-aware: colors come exclusively from theme.css tokens (var(--rz-*)) —
   no hardcoded palette. Linked from Components/App.razor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section chrome ──────────────────────────────────────────────────────── */
.rrhh-section-title[b-kj5tzr5k09] {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
    margin: 0 0 0.5rem;
}
/* /Components/Pages/Rrhh/Admin/LifecycleBoard.razor.rz.scp.css */
/* Estilos propios de LifecycleBoard — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-lifecycle.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-lc-title-bar[b-zn0wdolopg] {
    width: 4px;
    height: 40px;
    background: linear-gradient(180deg, var(--rz-primary) 0%, var(--rz-secondary) 100%);
    border-radius: 2px;
}

.rrhh-lc-title[b-zn0wdolopg] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rz-text-color);
    letter-spacing: -0.3px;
}

.rrhh-lc-subtitle[b-zn0wdolopg] {
    margin: 4px 0 0 0;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
}

[b-zn0wdolopg] .rrhh-lc-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.rrhh-lc-task-meta[b-zn0wdolopg] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

/* ── Tablero ───────────────────────────────────────────────────────────────── */
.rrhh-lc-progress[b-zn0wdolopg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rrhh-lc-progress-label[b-zn0wdolopg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.rrhh-lc-overdue-chip[b-zn0wdolopg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--rz-danger);
    color: var(--rz-on-danger);
    font-size: 0.6875rem;
    font-weight: 700;
}

@media (max-width: 768px) {
[b-zn0wdolopg] .rrhh-lc-header-actions {
        justify-content: flex-start;
        margin-top: 12px;
    }
}
/* /Components/Pages/Rrhh/Admin/LifecycleTemplatesAdmin.razor.rz.scp.css */
/* Estilos propios de LifecycleTemplatesAdmin — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-lifecycle.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-lc-title-bar[b-4y12gmd7qt] {
    width: 4px;
    height: 40px;
    background: linear-gradient(180deg, var(--rz-primary) 0%, var(--rz-secondary) 100%);
    border-radius: 2px;
}

.rrhh-lc-title[b-4y12gmd7qt] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rz-text-color);
    letter-spacing: -0.3px;
}

.rrhh-lc-subtitle[b-4y12gmd7qt] {
    margin: 4px 0 0 0;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
}

[b-4y12gmd7qt] .rrhh-lc-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* La fase de preboarding es una propiedad calculada (DueOffsetDays < 0), no un estado. */
.rrhh-lc-phase[b-4y12gmd7qt] {
    margin: 14px 0 6px 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rz-text-tertiary-color);
}

/* ── Fila de tarea ─────────────────────────────────────────────────────────── */
.rrhh-lc-task[b-4y12gmd7qt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--rz-base-background-color);
}

.rrhh-lc-task-inactive[b-4y12gmd7qt] {
    opacity: 0.55;
}

.rrhh-lc-task-reorder[b-4y12gmd7qt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
}

.rrhh-lc-task-main[b-4y12gmd7qt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.rrhh-lc-task-title[b-4y12gmd7qt] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--rz-text-color);
}

.rrhh-lc-task-meta[b-4y12gmd7qt] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.rrhh-lc-required[b-4y12gmd7qt] {
    color: var(--rz-danger);
    margin-left: 4px;
    font-weight: 700;
}

/* ── Drawer del run ────────────────────────────────────────────────────────── */
.rrhh-lc-drawer-head[b-4y12gmd7qt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rz-base-300);
}

.rrhh-lc-drawer-subject[b-4y12gmd7qt] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

/* ── Plantillas ────────────────────────────────────────────────────────────── */
.rrhh-lc-template-list[b-4y12gmd7qt] {
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    padding: 8px;
    max-height: 640px;
    overflow-y: auto;
}

.rrhh-lc-template-row[b-4y12gmd7qt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.rrhh-lc-template-row:hover[b-4y12gmd7qt] {
    background: var(--rz-base-200);
}

.rrhh-lc-template-selected[b-4y12gmd7qt] {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
}

.rrhh-lc-template-name[b-4y12gmd7qt] {
    font-weight: 600;
    font-size: 0.875rem;
}

@media (max-width: 768px) {
[b-4y12gmd7qt] .rrhh-lc-header-actions {
        justify-content: flex-start;
        margin-top: 12px;
    }
}


/* ══ De wwwroot/css/rrhh/rrhh.css (tanda 2 de la migración) ══ */

.rrhh-empty[b-4y12gmd7qt] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
}
/* /Components/Pages/Rrhh/Admin/OvertimeAdmin.razor.rz.scp.css */
/* Estilos propios de OvertimeAdmin — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-overtime.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-overtime-tile-label[b-lmjy0malgg] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-tertiary-color);
}

/* ── Barra de herramientas ─────────────────────────────────────────────── */
.rrhh-overtime-toolbar[b-lmjy0malgg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.rrhh-overtime-toolbar-spacer[b-lmjy0malgg] {
    flex: 1 1 auto;
}

.rrhh-overtime-band-text[b-lmjy0malgg] {
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
}

/* ── Medidor del cupo anual (art. 35.2 ET) ─────────────────────────────── */
.rrhh-overtime-cap[b-lmjy0malgg] {
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    padding: 1rem;
}

.rrhh-overtime-cap-track[b-lmjy0malgg] {
    position: relative;
    height: 12px;
    border-radius: 6px;
    background: var(--rz-base-200);
    overflow: hidden;
    margin: 0.5rem 0;
}

.rrhh-overtime-cap-fill[b-lmjy0malgg] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.2s ease;
}

.rrhh-overtime-cap-ok .rrhh-overtime-cap-fill[b-lmjy0malgg] {
    background: var(--rz-success);
}

.rrhh-overtime-cap-warn .rrhh-overtime-cap-fill[b-lmjy0malgg] {
    background: var(--rz-warning);
}

.rrhh-overtime-cap-exceeded .rrhh-overtime-cap-fill[b-lmjy0malgg] {
    background: var(--rz-danger);
}

.rrhh-overtime-cap-legend[b-lmjy0malgg] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.rrhh-overtime-cap-legend strong[b-lmjy0malgg] {
    font-variant-numeric: tabular-nums;
}

/* ── Aviso legal ───────────────────────────────────────────────────────── */
.rrhh-overtime-legal[b-lmjy0malgg] {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    line-height: 1.5;
}

/* ── Editor en línea (política / ajuste) ───────────────────────────────── */
.rrhh-overtime-editor[b-lmjy0malgg] {
    margin-top: 1rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    padding: 1rem;
}

.rrhh-overtime-section-title[b-lmjy0malgg] {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--rz-text-color);
}


/* ══ De wwwroot/css/rrhh/rrhh.css (tanda 2 de la migración) ══ */

.rrhh-empty[b-lmjy0malgg] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
}
/* /Components/Pages/Rrhh/Admin/PayrollAdmin.razor.rz.scp.css */
/* Estilos propios de PayrollAdmin — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   HR v2 — Payroll pre-processing (§5.8). Tokens only: no new z-index, no
   hardcoded palette, nothing that a theme switch cannot follow.
   ══════════════════════════════════════════════════════════════════════════ */

/* Provider chip of the payroll configuration card.                          */
.rrhh-payroll-provider-chip[b-jqfcafebeo] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    margin: 0.1rem 0.2rem 0.1rem 0;
    border-radius: 999px;
    border: 1px solid var(--rz-base-300);
    background: var(--rz-base-100);
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* Numeric cells of the payroll grids: tabular figures so columns of money and
   hours line up under each other.                                            */
.rrhh-payroll-number[b-jqfcafebeo] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* "Sin código" / "sin mapear" marker — the row still exports, but the push
   would reject it, so it must be visible without reading the column.         */
.rrhh-payroll-unmapped[b-jqfcafebeo] {
    color: var(--rz-danger);
    font-size: 0.75rem;
    font-style: italic;
}

/* Warning strip above the period grid (open timesheets, unmapped employees,
   unresolved incidents). Same 4px accent idiom as the timesheet banners.      */
.rrhh-payroll-warning[b-jqfcafebeo] {
    padding: 0.55rem 0.8rem;
    margin-bottom: 0.6rem;
    border-radius: 8px;
    border-left: 4px solid var(--rz-warning);
    background: var(--rz-warning-lighter);
    font-size: 0.8125rem;
    color: var(--rz-text-color);
}

.rrhh-payroll-warning-danger[b-jqfcafebeo] {
    border-left-color: var(--rz-danger);
    background: var(--rz-danger-lighter);
}
/* /Components/Pages/Rrhh/Admin/PreboardingAdmin.razor.rz.scp.css */
/* Estilos propios de PreboardingAdmin — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-lifecycle.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-lc-title-bar[b-rywmi9ws9m] {
    width: 4px;
    height: 40px;
    background: linear-gradient(180deg, var(--rz-primary) 0%, var(--rz-secondary) 100%);
    border-radius: 2px;
}

.rrhh-lc-title[b-rywmi9ws9m] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rz-text-color);
    letter-spacing: -0.3px;
}

.rrhh-lc-subtitle[b-rywmi9ws9m] {
    margin: 4px 0 0 0;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
}

[b-rywmi9ws9m] .rrhh-lc-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.rrhh-lc-task-meta[b-rywmi9ws9m] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

@media (max-width: 768px) {
[b-rywmi9ws9m] .rrhh-lc-header-actions {
        justify-content: flex-start;
        margin-top: 12px;
    }
}


/* ══ De wwwroot/css/rrhh/rrhh.css (tanda 2 de la migración) ══ */

.rrhh-empty[b-rywmi9ws9m] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
}
/* /Components/Pages/Rrhh/Admin/ShiftBoard.razor.rz.scp.css */
/* Estilos propios de ShiftBoard — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-shifts.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   RRHH v3 — Turnos y cuadrante semanal (blueprint v3 §2, §9.2).
   Cubre: barra de herramientas del tablero, celdas empleado×día, chips de
   turno (borrador vs publicado), banda planificado/contratado, panel de
   incidencias, plantillas y las pantallas de empleado (Mis turnos + chip de
   próximo turno en la jornada).

   Reglas: cero <style> en .razor; los colores salen de los tokens de
   theme.css (var(--rz-*)) SALVO el color propio de cada plantilla de turno,
   que es dato de administración y viaja inline en el chip. Linked from
   Components/App.razor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Barra de herramientas del tablero ───────────────────────────────────── */
.rrhh-shift-toolbar[b-0xibll2u0k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.rrhh-shift-toolbar-spacer[b-0xibll2u0k] {
    flex: 1 1 auto;
}

.rrhh-shift-weeklabel[b-0xibll2u0k] {
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
    white-space: nowrap;
}

.rrhh-shift-publication[b-0xibll2u0k] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    margin: 0 0 0.75rem;
}

/* ── Cabecera de cada columna de día ─────────────────────────────────────── */
.rrhh-shift-dayhead[b-0xibll2u0k] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.rrhh-shift-dayhead-name[b-0xibll2u0k] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: capitalize;
}

.rrhh-shift-dayhead-date[b-0xibll2u0k] {
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-tertiary-color);
}

/* ── Celda empleado × día ────────────────────────────────────────────────── */
.rrhh-shift-cell[b-0xibll2u0k] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 46px;
    padding: 2px;
    border-radius: var(--rz-border-radius);
}

.rrhh-shift-cell-holiday[b-0xibll2u0k] {
    background: var(--rz-info-lighter);
}

.rrhh-shift-cell-absence[b-0xibll2u0k] {
    background: var(--rz-warning-lighter);
}

.rrhh-shift-cell-note[b-0xibll2u0k] {
    font-size: 0.6875rem;
    color: var(--rz-text-tertiary-color);
    text-align: center;
}

/* ── Chip de turno ───────────────────────────────────────────────────────── */
.rrhh-shift-chip[b-0xibll2u0k] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: var(--rz-border-radius);
    cursor: pointer;
    text-align: left;
    font: inherit;
    line-height: 1.15;
    background: var(--rz-base-200);
    color: var(--rz-text-color);
}

.rrhh-shift-chip:hover[b-0xibll2u0k],
.rrhh-shift-chip:focus-visible[b-0xibll2u0k] {
    outline: 2px solid var(--rz-primary);
    outline-offset: 1px;
}

/* Un borrador NO es un compromiso: se dibuja con trazo discontinuo y sin
   relleno sólido para que nunca se confunda con lo ya comunicado. */
.rrhh-shift-chip-draft[b-0xibll2u0k] {
    border-style: dashed;
    border-color: var(--rz-base-400);
    background: transparent;
}

.rrhh-shift-chip-published[b-0xibll2u0k] {
    border-style: solid;
}

.rrhh-shift-chip-time[b-0xibll2u0k] {
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rrhh-shift-chip-name[b-0xibll2u0k] {
    font-size: 0.625rem;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.rrhh-shift-chip-flag[b-0xibll2u0k] {
    font-size: 0.625rem;
    font-weight: 700;
}

/* ── Banda planificado / contratado ──────────────────────────────────────── */
.rrhh-shift-band[b-0xibll2u0k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rrhh-shift-band-text[b-0xibll2u0k] {
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

.rrhh-shift-band-bar[b-0xibll2u0k] {
    height: 4px;
    width: 100%;
    border-radius: 2px;
    background: var(--rz-base-300);
    overflow: hidden;
}

.rrhh-shift-band-fill[b-0xibll2u0k] {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--rz-primary);
}

.rrhh-shift-band-over .rrhh-shift-band-fill[b-0xibll2u0k] {
    background: var(--rz-warning);
}

/* ── Nombre del empleado (columna congelada) ─────────────────────────────── */
.rrhh-shift-employee[b-0xibll2u0k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rrhh-shift-employee-name[b-0xibll2u0k] {
    font-weight: 600;
    font-size: 0.8125rem;
}

.rrhh-shift-employee-center[b-0xibll2u0k] {
    font-size: 0.6875rem;
    color: var(--rz-text-tertiary-color);
}

/* ── Panel de incidencias ────────────────────────────────────────────────── */
.rrhh-shift-findings[b-0xibll2u0k] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 1rem;
}

.rrhh-shift-finding[b-0xibll2u0k] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--rz-border-radius);
    font-size: 0.75rem;
    background: var(--rz-base-100);
}

.rrhh-shift-finding-error[b-0xibll2u0k] {
    background: var(--rz-danger-lighter);
}

.rrhh-shift-finding-warning[b-0xibll2u0k] {
    background: var(--rz-warning-lighter);
}

.rrhh-shift-finding-date[b-0xibll2u0k] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

.rrhh-shift-finding-who[b-0xibll2u0k] {
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* ── Responsive: el cuadrante scrollea en horizontal, nunca la página ────── */
.rrhh-shift-board-scroll[b-0xibll2u0k] {
    overflow-x: auto;
}


/* ══ De wwwroot/css/rrhh/rrhh.css (tanda 2 de la migración) ══ */

/* ═══════════════════════════════════════════════════════════════════════════
   RRHH module — shared styles (blueprint §5.6).
   Clock widget (MyWorkDay), event timeline, balance/contract cards, admin
   grids and the WorkDayDetailDrawer side dialog.
   Theme-aware: colors come exclusively from theme.css tokens (var(--rz-*)) —
   no hardcoded palette. Linked from Components/App.razor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section chrome ──────────────────────────────────────────────────────── */
.rrhh-section-title[b-0xibll2u0k] {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
    margin: 0 0 0.5rem;
}

.rrhh-empty[b-0xibll2u0k] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
}
/* /Components/Pages/Rrhh/Admin/ShiftTemplatesAdmin.razor.rz.scp.css */
/* Estilos propios de ShiftTemplatesAdmin — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-shifts.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   RRHH v3 — Turnos y cuadrante semanal (blueprint v3 §2, §9.2).
   Cubre: barra de herramientas del tablero, celdas empleado×día, chips de
   turno (borrador vs publicado), banda planificado/contratado, panel de
   incidencias, plantillas y las pantallas de empleado (Mis turnos + chip de
   próximo turno en la jornada).

   Reglas: cero <style> en .razor; los colores salen de los tokens de
   theme.css (var(--rz-*)) SALVO el color propio de cada plantilla de turno,
   que es dato de administración y viaja inline en el chip. Linked from
   Components/App.razor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Barra de herramientas del tablero ───────────────────────────────────── */
.rrhh-shift-toolbar[b-9ea76b9r3h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.rrhh-shift-toolbar-spacer[b-9ea76b9r3h] {
    flex: 1 1 auto;
}

.rrhh-shift-band-text[b-9ea76b9r3h] {
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* ── Plantillas de turno ─────────────────────────────────────────────────── */
.rrhh-shift-swatch[b-9ea76b9r3h] {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--rz-base-300);
    vertical-align: middle;
}

.rrhh-shift-template-preview[b-9ea76b9r3h] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 3px 8px;
    border-radius: var(--rz-border-radius);
    font-size: 0.75rem;
    font-weight: 600;
}


/* ══ De wwwroot/css/rrhh/rrhh.css (tanda 2 de la migración) ══ */

/* ═══════════════════════════════════════════════════════════════════════════
   RRHH module — shared styles (blueprint §5.6).
   Clock widget (MyWorkDay), event timeline, balance/contract cards, admin
   grids and the WorkDayDetailDrawer side dialog.
   Theme-aware: colors come exclusively from theme.css tokens (var(--rz-*)) —
   no hardcoded palette. Linked from Components/App.razor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section chrome ──────────────────────────────────────────────────────── */
.rrhh-section-title[b-9ea76b9r3h] {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
    margin: 0 0 0.5rem;
}
/* /Components/Pages/Rrhh/Admin/SignatureAdmin.razor.rz.scp.css */
/* Estilos propios de SignatureAdmin — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-signature.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   RRHH v3 §4 — firma electrónica (blueprint v3 §9.2: nunca <style> en .razor)
   ═══════════════════════════════════════════════════════════════════════════ */
.rrhh-sign-toolbar[b-j8i4yyhp2g] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.rrhh-sign-toolbar-spacer[b-j8i4yyhp2g] {
    flex: 1 1 auto;
}

.rrhh-sign-batch[b-j8i4yyhp2g] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    background: var(--rz-base-100);
}

.rrhh-sign-batch-hint[b-j8i4yyhp2g],
.rrhh-sign-hint[b-j8i4yyhp2g] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.rrhh-sign-legal[b-j8i4yyhp2g] {
    margin-top: 16px;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--rz-text-tertiary-color);
}

/* ── Rastro de auditoría ─────────────────────────────────────────────────── */
.rrhh-sign-trail[b-j8i4yyhp2g] {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    background: var(--rz-base-100);
}

.rrhh-sign-trail h3[b-j8i4yyhp2g] {
    margin: 0 0 10px 0;
    font-size: 0.9375rem;
    font-weight: 700;
}

.rrhh-sign-trail-signers[b-j8i4yyhp2g] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.rrhh-sign-chip[b-j8i4yyhp2g] {
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--rz-base-300);
    font-size: 0.75rem;
}

.rrhh-sign-trail-list[b-j8i4yyhp2g] {
    list-style: none;
    margin: 0 0 12px 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}

.rrhh-sign-trail-list li[b-j8i4yyhp2g] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 4px 0;
    border-bottom: 1px solid var(--rz-base-200);
    font-size: 0.8125rem;
}

.rrhh-sign-trail-seq[b-j8i4yyhp2g] {
    min-width: 44px;
    color: var(--rz-text-tertiary-color);
}

.rrhh-sign-trail-kind[b-j8i4yyhp2g] {
    font-weight: 600;
    min-width: 170px;
}

.rrhh-sign-trail-at[b-j8i4yyhp2g],
.rrhh-sign-trail-detail[b-j8i4yyhp2g] {
    color: var(--rz-text-tertiary-color);
}

/* ── Configuración ───────────────────────────────────────────────────────── */
.rrhh-sign-settings[b-j8i4yyhp2g] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px;
}

.rrhh-sign-settings-row[b-j8i4yyhp2g] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.rrhh-sign-settings-grid[b-j8i4yyhp2g] {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap: 12px 16px;
    align-items: start;
    max-width: 760px;
}

.rrhh-sign-settings-grid label[b-j8i4yyhp2g] {
    padding-top: 6px;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.rrhh-sign-settings-actions[b-j8i4yyhp2g] {
    display: flex;
    gap: 10px;
}

@media (max-width: 720px) {
.rrhh-sign-settings-grid[b-j8i4yyhp2g] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Rrhh/Admin/TimesheetsAdmin.razor.rz.scp.css */
/* Estilos propios de TimesheetsAdmin — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* Per-day padlock in the timesheet grid.                                       */
[b-um4og43xii] .rrhh-ts-lock-icon {
    font-size: 1rem;
    vertical-align: middle;
    color: var(--rz-text-tertiary-color);
}
/* /Components/Pages/Rrhh/Admin/WorkDaysAdmin.razor.rz.scp.css */
/* Estilos propios de WorkDaysAdmin — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Worked-vs-logged delta (month grid + WorkDaysAdmin) ─────────────────── */
.rrhh-delta-ok[b-5g5a8jp41p] {
    color: var(--rz-success);
    font-variant-numeric: tabular-nums;
}

.rrhh-delta-warn[b-5g5a8jp41p] {
    color: var(--rz-warning);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Rrhh/Dialogs/CreateLifecycleRunDialog.razor.rz.scp.css */
/* Estilos propios de CreateLifecycleRunDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-lifecycle.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Previsualización del run ──────────────────────────────────────────────── */
.rrhh-lc-preview[b-67unrvnrhm] {
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.rrhh-lc-preview-head[b-67unrvnrhm] {
    padding: 8px 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--rz-base-200);
    border-bottom: 1px solid var(--rz-base-300);
    position: sticky;
    top: 0;
}

.rrhh-lc-preview-row[b-67unrvnrhm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--rz-base-200);
}

.rrhh-lc-preview-row:last-child[b-67unrvnrhm] {
    border-bottom: none;
}

/* Una tarea obligatoria sin responsable resoluble bloquea la activación: se ve ANTES de crear nada. */
.rrhh-lc-preview-unresolved[b-67unrvnrhm] {
    background: color-mix(in srgb, var(--rz-warning) 12%, transparent);
}

.rrhh-lc-preview-title[b-67unrvnrhm] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rrhh-lc-preview-meta[b-67unrvnrhm] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    white-space: nowrap;
}
/* /Components/Pages/Rrhh/Dialogs/EmbeddedSignDialog.razor.rz.scp.css */
/* Estilos propios de EmbeddedSignDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-signature.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-sign-batch-hint[b-ah4tovfl2y],
.rrhh-sign-hint[b-ah4tovfl2y] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

/* ── Diálogos ────────────────────────────────────────────────────────────── */
.rrhh-sign-dialog[b-ah4tovfl2y] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.rrhh-sign-frame[b-ah4tovfl2y] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 520px;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    background: #fff;
}

.rrhh-sign-actions[b-ah4tovfl2y] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
/* /Components/Pages/Rrhh/Dialogs/EmployeeScheduleDialog.razor.rz.scp.css */
/* Estilos propios de EmployeeScheduleDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* Seven-weekday minute inputs of EmployeeScheduleDialog. Collapses to a
   two-column layout on narrow viewports instead of overflowing the dialog.     */
.rrhh-schedule-grid[b-32yccwhs4j] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
}

.rrhh-schedule-grid .rrhh-schedule-day[b-32yccwhs4j] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rrhh-schedule-grid .rrhh-schedule-day-label[b-32yccwhs4j] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    text-transform: capitalize;
}

.rrhh-schedule-grid .rrhh-schedule-day-hint[b-32yccwhs4j] {
    font-size: 0.68rem;
    color: var(--rz-text-tertiary-color);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
.rrhh-schedule-grid[b-32yccwhs4j] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Components/Pages/Rrhh/Dialogs/EngagementCampaignDialog.razor.rz.scp.css */
/* Estilos propios de EngagementCampaignDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-engagement.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-enps-hint[b-8bub9puqpu] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}
/* /Components/Pages/Rrhh/Dialogs/EnrollDeviceDialog.razor.rz.scp.css */
/* Estilos propios de EnrollDeviceDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-kiosk-admin.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-kiosk-hint[b-kfm6solnjw] {
    display: block;
    margin: 0.25rem 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    line-height: 1.5;
}

/* Credencial de un solo uso. Monoespaciada y seleccionable: se muestra una
   vez, así que copiarla tiene que ser trivial y leerla en voz alta, posible. */
.rrhh-kiosk-secret[b-kfm6solnjw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    background: var(--rz-base-100);
    flex-wrap: wrap;
}

.rrhh-kiosk-secret-label[b-kfm6solnjw] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--rz-text-tertiary-color);
    flex: 0 0 auto;
}

.rrhh-kiosk-secret-value[b-kfm6solnjw] {
    flex: 1 1 240px;
    min-width: 200px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    word-break: break-all;
    -webkit-user-select: all;
    user-select: all;
}
/* /Components/Pages/Rrhh/Dialogs/EvaluationCampaignDialog.razor.rz.scp.css */
/* Estilos propios de EvaluationCampaignDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-evaluations.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-ev-form-help[b-3tjbhx68p7] {
    display: block;
    margin: 2px 0 10px 0;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.rrhh-ev-scale[b-3tjbhx68p7] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* /Components/Pages/Rrhh/Dialogs/EvaluationFormDialog.razor.rz.scp.css */
/* Estilos propios de EvaluationFormDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-evaluations.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-ev-card-meta[b-np56cmh7xr] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

/* ── Formulario de respuesta ───────────────────────────────────────────── */
.rrhh-ev-form-item[b-np56cmh7xr] {
    padding: 14px 0;
    border-bottom: 1px solid var(--rz-base-300);
}

.rrhh-ev-form-item:last-child[b-np56cmh7xr] {
    border-bottom: none;
}

.rrhh-ev-form-title[b-np56cmh7xr] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.rrhh-ev-form-help[b-np56cmh7xr] {
    display: block;
    margin: 2px 0 10px 0;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.rrhh-ev-required[b-np56cmh7xr] {
    margin-left: 4px;
    color: var(--rz-danger);
    font-weight: 700;
}

.rrhh-ev-scale[b-np56cmh7xr] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rrhh-ev-scale-hint[b-np56cmh7xr] {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.6875rem;
    color: var(--rz-text-tertiary-color);
}
/* /Components/Pages/Rrhh/Dialogs/EvaluationPreviewDialog.razor.rz.scp.css */
/* Estilos propios de EvaluationPreviewDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-evaluations.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Previsualización del lanzamiento ──────────────────────────────────── */
.rrhh-ev-preview-summary[b-oispks479p] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.rrhh-ev-preview-chip[b-oispks479p] {
    padding: 10px 12px;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.rrhh-ev-preview-chip strong[b-oispks479p] {
    display: block;
    font-size: 1.125rem;
    color: var(--rz-text-color);
}

.rrhh-ev-preview-warn[b-oispks479p] {
    border-color: var(--rz-warning);
}

.rrhh-ev-preview-danger[b-oispks479p] {
    border-color: var(--rz-danger);
}
/* /Components/Pages/Rrhh/Dialogs/ExportDetailDrawer.razor.rz.scp.css */
/* Estilos propios de ExportDetailDrawer — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* Delta of an export line. The three states must read at a glance in a grid
   of hundreds of rows, so they carry colour AND weight.                      */
.rrhh-payroll-delta-new[b-9i5lsjomf0] {
    color: var(--rz-success-dark);
    font-weight: 600;
}

.rrhh-payroll-delta-changed[b-9i5lsjomf0] {
    color: var(--rz-warning-dark);
    font-weight: 600;
}

.rrhh-payroll-delta-removed[b-9i5lsjomf0] {
    color: var(--rz-danger-dark);
    font-weight: 600;
    text-decoration: line-through;
}

/* Numeric cells of the payroll grids: tabular figures so columns of money and
   hours line up under each other.                                            */
.rrhh-payroll-number[b-9i5lsjomf0] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* "Sin código" / "sin mapear" marker — the row still exports, but the push
   would reject it, so it must be visible without reading the column.         */
.rrhh-payroll-unmapped[b-9i5lsjomf0] {
    color: var(--rz-danger);
    font-size: 0.75rem;
    font-style: italic;
}
/* /Components/Pages/Rrhh/Dialogs/GenerateExportDialog.razor.rz.scp.css */
/* Estilos propios de GenerateExportDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* Warning strip above the period grid (open timesheets, unmapped employees,
   unresolved incidents). Same 4px accent idiom as the timesheet banners.      */
.rrhh-payroll-warning[b-b0x9bruxom] {
    padding: 0.55rem 0.8rem;
    margin-bottom: 0.6rem;
    border-radius: 8px;
    border-left: 4px solid var(--rz-warning);
    background: var(--rz-warning-lighter);
    font-size: 0.8125rem;
    color: var(--rz-text-color);
}

.rrhh-payroll-warning-danger[b-b0x9bruxom] {
    border-left-color: var(--rz-danger);
    background: var(--rz-danger-lighter);
}
/* /Components/Pages/Rrhh/Dialogs/LifecycleRunDrawer.razor.rz.scp.css */
/* Estilos propios de LifecycleRunDrawer — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-lifecycle.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* La fase de preboarding es una propiedad calculada (DueOffsetDays < 0), no un estado. */
.rrhh-lc-phase[b-ev3u6qzycw] {
    margin: 14px 0 6px 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rz-text-tertiary-color);
}

/* ── Fila de tarea ─────────────────────────────────────────────────────────── */
.rrhh-lc-task[b-ev3u6qzycw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--rz-base-background-color);
}

.rrhh-lc-task-main[b-ev3u6qzycw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.rrhh-lc-task-title[b-ev3u6qzycw] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--rz-text-color);
}

.rrhh-lc-task-meta[b-ev3u6qzycw] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.rrhh-lc-required[b-ev3u6qzycw] {
    color: var(--rz-danger);
    margin-left: 4px;
    font-weight: 700;
}

/* El permiso de Graph que falta se muestra LITERAL: un admin que lee el nombre puede actuar. */
.rrhh-lc-permission[b-ev3u6qzycw] {
    font-size: 0.75rem;
    color: var(--rz-warning-dark, var(--rz-warning));
    font-family: var(--rz-code-font-family, monospace);
}

/* ── Drawer del run ────────────────────────────────────────────────────────── */
.rrhh-lc-drawer-head[b-ev3u6qzycw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rz-base-300);
}

.rrhh-lc-drawer-subject[b-ev3u6qzycw] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.rrhh-lc-trail[b-ev3u6qzycw] {
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    overflow-x: auto;
}

.rrhh-lc-trail-row[b-ev3u6qzycw] {
    display: grid;
    grid-template-columns: 56px 160px 140px 1fr 2fr;
    gap: 8px;
    padding: 6px 10px;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--rz-base-200);
}

.rrhh-lc-trail-row:last-child[b-ev3u6qzycw] {
    border-bottom: none;
}

.rrhh-lc-trail-seq[b-ev3u6qzycw] {
    color: var(--rz-text-tertiary-color);
    font-variant-numeric: tabular-nums;
}

.rrhh-lc-trail-kind[b-ev3u6qzycw] {
    font-weight: 600;
}

.rrhh-lc-trail-when[b-ev3u6qzycw],
.rrhh-lc-trail-actor[b-ev3u6qzycw],
.rrhh-lc-trail-detail[b-ev3u6qzycw] {
    color: var(--rz-text-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
.rrhh-lc-trail-row[b-ev3u6qzycw] {
        grid-template-columns: 1fr;
    }
}


/* ══ De wwwroot/css/rrhh/rrhh.css (tanda 2 de la migración) ══ */

.rrhh-empty[b-ev3u6qzycw] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
}
/* /Components/Pages/Rrhh/Dialogs/MySocialPreferencesDialog.razor.rz.scp.css */
/* Estilos propios de MySocialPreferencesDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-directory.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-social-hint[b-0t31crqi7l] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    line-height: 1.45;
}

.rrhh-social-form[b-0t31crqi7l] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rrhh-social-birthday-row[b-0t31crqi7l] {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}
/* /Components/Pages/Rrhh/Dialogs/PayrollAccountingDialog.razor.rz.scp.css */
/* Estilos propios de PayrollAccountingDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* Warning strip above the period grid (open timesheets, unmapped employees,
   unresolved incidents). Same 4px accent idiom as the timesheet banners.      */
.rrhh-payroll-warning[b-dbdk0wcvsy] {
    padding: 0.55rem 0.8rem;
    margin-bottom: 0.6rem;
    border-radius: 8px;
    border-left: 4px solid var(--rz-warning);
    background: var(--rz-warning-lighter);
    font-size: 0.8125rem;
    color: var(--rz-text-color);
}

.rrhh-payroll-warning-danger[b-dbdk0wcvsy] {
    border-left-color: var(--rz-danger);
    background: var(--rz-danger-lighter);
}
/* /Components/Pages/Rrhh/Dialogs/PublishWeekDialog.razor.rz.scp.css */
/* Estilos propios de PublishWeekDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-shifts.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-shift-band-text[b-4jmdtoj2ow] {
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* ── Panel de incidencias ────────────────────────────────────────────────── */
.rrhh-shift-findings[b-4jmdtoj2ow] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 1rem;
}

.rrhh-shift-finding[b-4jmdtoj2ow] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--rz-border-radius);
    font-size: 0.75rem;
    background: var(--rz-base-100);
}

.rrhh-shift-finding-error[b-4jmdtoj2ow] {
    background: var(--rz-danger-lighter);
}

.rrhh-shift-finding-warning[b-4jmdtoj2ow] {
    background: var(--rz-warning-lighter);
}

.rrhh-shift-finding-date[b-4jmdtoj2ow] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

.rrhh-shift-finding-who[b-4jmdtoj2ow] {
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}


/* ══ De wwwroot/css/rrhh/rrhh.css (tanda 2 de la migración) ══ */

.rrhh-empty[b-4jmdtoj2ow] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
}
/* /Components/Pages/Rrhh/Dialogs/ReviewTimesheetDialog.razor.rz.scp.css */
/* Estilos propios de ReviewTimesheetDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Timesheets v2 (§5.8) ────────────────────────────────────────────────── */
/* Triple-metric header of MyTimesheet: required / attended / imputed tiles.
   Wraps instead of squeezing so the tabular numbers stay readable.             */
.rrhh-ts-meter-row[b-dl2p1ra94j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rrhh-ts-meter[b-dl2p1ra94j] {
    flex: 1 1 150px;
    min-width: 150px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    background: var(--rz-base-background-color);
}

.rrhh-ts-meter .rrhh-ts-meter-value[b-dl2p1ra94j] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
}

.rrhh-ts-meter .rrhh-ts-meter-label[b-dl2p1ra94j] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}
/* /Components/Pages/Rrhh/Dialogs/ShiftEditDialog.razor.rz.scp.css */
/* Estilos propios de ShiftEditDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-shifts.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-shift-band-text[b-1acdhb6qzx] {
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* ── Plantillas de turno ─────────────────────────────────────────────────── */
.rrhh-shift-swatch[b-1acdhb6qzx] {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--rz-base-300);
    vertical-align: middle;
}
/* /Components/Pages/Rrhh/Dialogs/SignatureCancelDialog.razor.rz.scp.css */
/* Estilos propios de SignatureCancelDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-signature.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-sign-batch-hint[b-ns10ofc26a],
.rrhh-sign-hint[b-ns10ofc26a] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.rrhh-sign-actions[b-ns10ofc26a] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.rrhh-sign-cancel[b-ns10ofc26a] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rrhh-sign-cancel-target[b-ns10ofc26a] {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}
/* /Components/Pages/Rrhh/Dialogs/SubmitTimesheetDialog.razor.rz.scp.css */
/* Estilos propios de SubmitTimesheetDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Timesheets v2 (§5.8) ────────────────────────────────────────────────── */
/* Triple-metric header of MyTimesheet: required / attended / imputed tiles.
   Wraps instead of squeezing so the tabular numbers stay readable.             */
.rrhh-ts-meter-row[b-hh47vkkrp3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rrhh-ts-meter[b-hh47vkkrp3] {
    flex: 1 1 150px;
    min-width: 150px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    background: var(--rz-base-background-color);
}

.rrhh-ts-meter .rrhh-ts-meter-value[b-hh47vkkrp3] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
}

.rrhh-ts-meter .rrhh-ts-meter-label[b-hh47vkkrp3] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}
/* /Components/Pages/Rrhh/Dialogs/TimesheetPeriodDrawer.razor.rz.scp.css */
/* Estilos propios de TimesheetPeriodDrawer — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Timesheets v2 (§5.8) ────────────────────────────────────────────────── */
/* Triple-metric header of MyTimesheet: required / attended / imputed tiles.
   Wraps instead of squeezing so the tabular numbers stay readable.             */
.rrhh-ts-meter-row[b-c94fzscq77] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rrhh-ts-meter[b-c94fzscq77] {
    flex: 1 1 150px;
    min-width: 150px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    background: var(--rz-base-background-color);
}

.rrhh-ts-meter .rrhh-ts-meter-value[b-c94fzscq77] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
}

.rrhh-ts-meter .rrhh-ts-meter-label[b-c94fzscq77] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}
/* /Components/Pages/Rrhh/Dialogs/WorkDayDetailDrawer.razor.rz.scp.css */
/* Estilos propios de WorkDayDetailDrawer — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   RRHH module — shared styles (blueprint §5.6).
   Clock widget (MyWorkDay), event timeline, balance/contract cards, admin
   grids and the WorkDayDetailDrawer side dialog.
   Theme-aware: colors come exclusively from theme.css tokens (var(--rz-*)) —
   no hardcoded palette. Linked from Components/App.razor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section chrome ──────────────────────────────────────────────────────── */
.rrhh-section-title[b-xd6vteoz0n] {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
    margin: 0 0 0.5rem;
}

.rrhh-empty[b-xd6vteoz0n] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
}

/* ── Event timeline (today panel + WorkDayDetailDrawer) ──────────────────── */
.rrhh-event-timeline[b-xd6vteoz0n] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.rrhh-event-row[b-xd6vteoz0n] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    padding: 0.25rem 0;
    color: var(--rz-text-color);
}

.rrhh-event-dot[b-xd6vteoz0n] {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rz-base-400);
}

/* Per-event-type dot tints — class suffix = WorkDayEventType lowercased.     */
.rrhh-event-checkin[b-xd6vteoz0n] {
    background: var(--rz-success);
}

.rrhh-event-breakstart[b-xd6vteoz0n] {
    background: var(--rz-warning);
}

.rrhh-event-breakend[b-xd6vteoz0n] {
    background: var(--rz-info);
}

.rrhh-event-checkout[b-xd6vteoz0n] {
    background: var(--rz-danger);
}

.rrhh-event-manualcorrectionapplied[b-xd6vteoz0n] {
    background: var(--rz-secondary);
}

.rrhh-event-autoclosed[b-xd6vteoz0n] {
    background: var(--rz-danger);
}

.rrhh-event-dayapproved[b-xd6vteoz0n] {
    background: var(--rz-success);
}

.rrhh-event-dayreopened[b-xd6vteoz0n] {
    background: var(--rz-warning);
}
/* /Components/Pages/Rrhh/Directory.razor.rz.scp.css */
/* Estilos propios de Directory — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-directory.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   HR v4 §4 / §7 — internal directory and dashboard social strip.

   No <style> block lives in the .razor files (CLAUDE.md). Nothing here encodes HR data: the directory shows
   what every colleague already reads in a mail signature, and the social strip shows only what its owner
   opted in to.
   ───────────────────────────────────────────────────────────────────────────── */
.rrhh-dir-page[b-hlu4zkk6vr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rrhh-dir-title-bar[b-hlu4zkk6vr] {
    width: 4px;
    height: 38px;
    border-radius: 2px;
    background: var(--rz-primary);
}

.rrhh-dir-title[b-hlu4zkk6vr] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.rrhh-dir-subtitle[b-hlu4zkk6vr] {
    margin: 2px 0 0 0;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
}

.rrhh-dir-filters[b-hlu4zkk6vr] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.rrhh-dir-filters[b-hlu4zkk6vr]  .rrhh-dir-search {
    flex: 1 1 260px;
    min-width: 200px;
}

.rrhh-dir-count[b-hlu4zkk6vr] {
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
}

/* ── Card grid ── */
.rrhh-dir-grid[b-hlu4zkk6vr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 12px;
}

.rrhh-dir-card[b-hlu4zkk6vr] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-card-border-radius);
    background: var(--rz-base-background-color);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rrhh-dir-card:hover[b-hlu4zkk6vr],
.rrhh-dir-card:focus-visible[b-hlu4zkk6vr] {
    border-color: var(--rz-primary);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.rrhh-dir-card--inactive[b-hlu4zkk6vr] {
    opacity: 0.62;
}

.rrhh-dir-card-body[b-hlu4zkk6vr] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rrhh-dir-name[b-hlu4zkk6vr] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--rz-text-title-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rrhh-dir-role[b-hlu4zkk6vr],
.rrhh-dir-meta[b-hlu4zkk6vr] {
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rrhh-dir-empty[b-hlu4zkk6vr] {
    padding: 28px 12px;
    text-align: center;
    color: var(--rz-text-tertiary-color);
    font-size: 0.875rem;
}
/* /Components/Pages/Rrhh/DirectoryPersonDrawer.razor.rz.scp.css */
/* Estilos propios de DirectoryPersonDrawer — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-directory.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-dir-name[b-8ue0wegdvf] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--rz-text-title-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rrhh-dir-role[b-8ue0wegdvf],
.rrhh-dir-meta[b-8ue0wegdvf] {
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rrhh-dir-empty[b-8ue0wegdvf] {
    padding: 28px 12px;
    text-align: center;
    color: var(--rz-text-tertiary-color);
    font-size: 0.875rem;
}

/* ── Person drawer ── */
.rrhh-dir-drawer[b-8ue0wegdvf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rrhh-dir-drawer-head[b-8ue0wegdvf] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rrhh-dir-section-title[b-8ue0wegdvf] {
    margin: 0 0 6px 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-tertiary-color);
}

.rrhh-dir-people[b-8ue0wegdvf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rrhh-dir-person[b-8ue0wegdvf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.rrhh-dir-person:hover[b-8ue0wegdvf] {
    background: var(--rz-base-200);
}

.rrhh-dir-chain[b-8ue0wegdvf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.rrhh-dir-chain-sep[b-8ue0wegdvf] {
    color: var(--rz-text-tertiary-color);
}
/* /Components/Pages/Rrhh/EngagementResultsPanel.razor.rz.scp.css */
/* Estilos propios de EngagementResultsPanel — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-engagement.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-enps-empty[b-czsp3pnova] {
    padding: 28px 12px;
    text-align: center;
    color: var(--rz-text-tertiary-color);
    font-size: 0.875rem;
}

/* ── Results ── */
.rrhh-enps-metrics[b-czsp3pnova] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.rrhh-enps-metric[b-czsp3pnova] {
    flex: 1 1 130px;
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--rz-base-background-color);
}

.rrhh-enps-metric-label[b-czsp3pnova] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rz-text-tertiary-color);
}

.rrhh-enps-metric-value[b-czsp3pnova] {
    display: block;
    margin-top: 4px;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.rrhh-enps-metric-value-positive[b-czsp3pnova] {
    color: var(--rz-success);
}

.rrhh-enps-metric-value-negative[b-czsp3pnova] {
    color: var(--rz-danger);
}

/* ── Verbatim comments ── */
.rrhh-enps-comment[b-czsp3pnova] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--rz-base-background-color);
}

.rrhh-enps-comment-text[b-czsp3pnova] {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--rz-text-secondary-color);
}

.rrhh-enps-synthesis[b-czsp3pnova] {
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--rz-base-background-color);
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--rz-text-secondary-color);
}

.rrhh-enps-hint[b-czsp3pnova] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}
/* /Components/Pages/Rrhh/EngagementSurvey.razor.rz.scp.css */
/* Estilos propios de EngagementSurvey — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-engagement.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   HR v4 §3 / §7 — anonymous engagement survey (eNPS)

   Two surfaces: the employee's two-question page and the HR results panel. No <style> block lives in the
   .razor files (CLAUDE.md), and no rule here encodes anything about a respondent — the visual design cannot
   leak what the schema does not store.
   ───────────────────────────────────────────────────────────────────────────── */
.rrhh-enps-page[b-v2kjwwnfnu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rrhh-enps-title-bar[b-v2kjwwnfnu] {
    width: 4px;
    height: 38px;
    border-radius: 2px;
    background: var(--rz-primary);
}

.rrhh-enps-title[b-v2kjwwnfnu] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.rrhh-enps-subtitle[b-v2kjwwnfnu] {
    margin: 2px 0 0 0;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
}

.rrhh-enps-empty[b-v2kjwwnfnu] {
    padding: 28px 12px;
    text-align: center;
    color: var(--rz-text-tertiary-color);
    font-size: 0.875rem;
}

/* ── The anonymity notice: deliberately prominent, because it is the promise the campaign froze ── */
.rrhh-enps-notice[b-v2kjwwnfnu] {
    border: 1px solid var(--rz-base-300);
    border-left: 4px solid var(--rz-info);
    border-radius: 8px;
    padding: 14px 16px;
    background: var(--rz-base-background-color);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--rz-text-secondary-color);
}

.rrhh-enps-question[b-v2kjwwnfnu] {
    margin: 0 0 10px 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

/* ── 0..10 scale: eleven equal buttons that wrap on a phone ── */
.rrhh-enps-scale[b-v2kjwwnfnu] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

[b-v2kjwwnfnu] .rrhh-enps-scale-btn {
    min-width: 44px;
    flex: 1 1 44px;
}

.rrhh-enps-scale-legend[b-v2kjwwnfnu] {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.rrhh-enps-warning[b-v2kjwwnfnu] {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.rrhh-enps-thanks[b-v2kjwwnfnu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 16px;
    text-align: center;
}

.rrhh-enps-thanks-title[b-v2kjwwnfnu] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.rrhh-enps-thanks-body[b-v2kjwwnfnu] {
    margin: 0;
    max-width: 46ch;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/Rrhh/ErpContractLiveView.razor.rz.scp.css */
/* Ficha de empleado en vivo desde el ERP.
   La comparten /rrhh/documentos y el diálogo de administración.
   Colores exclusivamente por tokens de theme.css — nada de paleta a mano, para
   que la ficha siga siendo legible en claro y en oscuro sin una segunda hoja.
   Los sujetos que no reciben el b-{hash} (interiores Radzen .rz-*, componentes
   hijos como UserAvatar / ErpFactRow) van con ::deep.
   ───────────────────────────────────────────────────────────────────────── */

.erp-card[b-26e6ac7w4b] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Cabecera ────────────────────────────────────────────────────────────── */
.erp-head[b-26e6ac7w4b] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rz-base-300);
}

.erp-head-text[b-26e6ac7w4b] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.erp-name[b-26e6ac7w4b] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--rz-text-color);
}

.erp-role[b-26e6ac7w4b] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
}

.erp-role-sep[b-26e6ac7w4b] {
    margin: 0 0.4rem;
    color: var(--rz-text-tertiary-color);
}

.erp-chips[b-26e6ac7w4b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.15rem;
}

/* Radzen capitaliza el texto de RadzenBadge, y en castellano eso produce
   "2 Años Y 6 Meses" y "En Vivo Desde El ERP". Las cadenas ya vienen
   redactadas del .resx: aquí sólo se desactiva la transformación. */
.erp-chips[b-26e6ac7w4b]  .rz-badge {
    text-transform: none;
    letter-spacing: 0;
}

/* ── Secciones ───────────────────────────────────────────────────────────── */
.erp-section[b-26e6ac7w4b] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.erp-section-title[b-26e6ac7w4b] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-tertiary-color);
}

/* El bloque retributivo es el único con marco: es lo que esta pantalla
   existe para enseñar, y separarlo evita que se lea como una fila más. */
.erp-section--pay[b-26e6ac7w4b] {
    padding: 1rem;
    border: 1px solid var(--rz-warning-light);
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-100);
}

.erp-amount[b-26e6ac7w4b] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.5px;
    color: var(--rz-text-color);
}

.erp-amount-meta[b-26e6ac7w4b] {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.erp-note[b-26e6ac7w4b] {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--rz-text-tertiary-color);
}

.erp-foot[b-26e6ac7w4b] {
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rz-base-300);
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.erp-empty[b-26e6ac7w4b] {
    padding: 0.875rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-200);
    border-radius: var(--rz-border-radius);
}

/* ── Desglose de nómina ──────────────────────────────────────────────────── */
.erp-payroll[b-26e6ac7w4b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.erp-payroll-item[b-26e6ac7w4b] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-300);
}

.erp-payroll-item--net[b-26e6ac7w4b] {
    border-color: var(--rz-success-light);
}

.erp-payroll-label[b-26e6ac7w4b] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-tertiary-color);
}

.erp-payroll-value[b-26e6ac7w4b] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

/* ── Rejilla de datos: dos columnas en ancho, una en móvil ───────────────── */
.erp-grid[b-26e6ac7w4b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 1.5rem;
    margin: 0;
}

.erp-grid[b-26e6ac7w4b]  .erp-fact {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--rz-base-200);
    font-size: 0.875rem;
}

.erp-grid[b-26e6ac7w4b]  .erp-fact-label {
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

.erp-grid[b-26e6ac7w4b]  .erp-fact-value {
    margin: 0;
    font-weight: 600;
    text-align: right;
    color: var(--rz-text-color);
    overflow-wrap: anywhere;
}

/* ── Tira semanal ────────────────────────────────────────────────────────── */
.erp-week[b-26e6ac7w4b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

.erp-day[b-26e6ac7w4b] {
    min-width: 2.1rem;
    padding: 0.25rem 0.4rem;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: var(--rz-border-radius);
    border: 1px solid var(--rz-base-300);
    background: var(--rz-base-200);
    color: var(--rz-text-tertiary-color);
}

.erp-day--on[b-26e6ac7w4b] {
    border-color: var(--rz-primary);
    background: var(--rz-primary-lighter);
    color: var(--rz-primary-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Variante de PÁGINA (/admin/rrhh/empleados/{id}).
   La ficha deja de ser una columna estrecha: cabecera a modo de portada y los
   bloques repartidos en dos columnas. El orden del DOM ya es el que se quiere
   leer —Retribución, Contrato, Identidad, SS/banca, Organización, Nóminas—,
   así que la rejilla no necesita reordenar nada: sólo dejar que fluya y que
   el listado de nóminas ocupe el ancho entero.
   ═══════════════════════════════════════════════════════════════════════════ */
.erp-card--page[b-26e6ac7w4b] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
    align-items: start;
}

/* Cabecera y pie cruzan las dos columnas. */
.erp-card--page > .erp-head[b-26e6ac7w4b],
.erp-card--page > .erp-foot[b-26e6ac7w4b] {
    grid-column: 1 / -1;
}

/* Cada bloque se dibuja como tarjeta para que la rejilla se lea como rejilla
   y no como dos listas sueltas una al lado de otra. */
.erp-card--page > .erp-section[b-26e6ac7w4b] {
    padding: 1rem 1.125rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-background-color);
    height: 100%;
}

/* El bloque retributivo conserva su marco de énfasis. */
.erp-card--page > .erp-section--pay[b-26e6ac7w4b] {
    border-color: var(--rz-warning-light);
    background: var(--rz-base-100);
}

/* Los registros de nómina son una tabla: a ancho completo siempre. */
.erp-card--page > .erp-section:last-of-type[b-26e6ac7w4b] {
    grid-column: 1 / -1;
}

/* Portada: avatar grande y nombre a tamaño de título de página. */
.erp-card--page > .erp-head[b-26e6ac7w4b] {
    gap: 1.25rem;
    padding-bottom: 1.25rem;
}

.erp-card--page .erp-name[b-26e6ac7w4b] {
    font-size: 1.6rem;
}

.erp-card--page .erp-role[b-26e6ac7w4b] {
    font-size: 0.9375rem;
}

/* En la página hay sitio para que cada bloque respire en una sola columna
   interna: dos columnas dentro de dos columnas se leen apretadas. */
.erp-card--page .erp-grid[b-26e6ac7w4b] {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
    .erp-card--page[b-26e6ac7w4b] {
        grid-template-columns: minmax(0, 1fr);
    }

    .erp-card--page > .erp-section[b-26e6ac7w4b] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .erp-head[b-26e6ac7w4b] {
        align-items: flex-start;
    }

    .erp-amount[b-26e6ac7w4b] {
        font-size: 1.6rem;
    }

    .erp-card--page .erp-name[b-26e6ac7w4b] {
        font-size: 1.3rem;
    }
}
/* /Components/Pages/Rrhh/EvaluationResultPanel.razor.rz.scp.css */
/* Estilos propios de EvaluationResultPanel — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-evaluations.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-ev-empty[b-p4cma8q2ct] {
    padding: 32px 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
}

.rrhh-ev-form-help[b-p4cma8q2ct] {
    display: block;
    margin: 2px 0 10px 0;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* ── Resultados ────────────────────────────────────────────────────────── */
.rrhh-ev-kpis[b-p4cma8q2ct] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.rrhh-ev-kpi[b-p4cma8q2ct] {
    padding: 14px 16px;
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    background: var(--rz-base-background-color);
}

.rrhh-ev-kpi-label[b-p4cma8q2ct] {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--rz-text-tertiary-color);
}

.rrhh-ev-kpi-value[b-p4cma8q2ct] {
    display: block;
    margin-top: 4px;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.rrhh-ev-competency[b-p4cma8q2ct] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--rz-base-300);
}

.rrhh-ev-competency-title[b-p4cma8q2ct] {
    flex: 1 1 auto;
    font-size: 0.875rem;
    color: var(--rz-text-color);
}

.rrhh-ev-bar[b-p4cma8q2ct] {
    position: relative;
    flex: 0 0 180px;
    height: 8px;
    border-radius: 4px;
    background: var(--rz-base-200);
    overflow: hidden;
}

.rrhh-ev-bar-fill[b-p4cma8q2ct] {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 4px;
    background: var(--rz-primary);
}

.rrhh-ev-bar-self[b-p4cma8q2ct] {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 14px;
    background: var(--rz-secondary);
}

.rrhh-ev-competency-value[b-p4cma8q2ct] {
    flex: 0 0 64px;
    text-align: right;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.rrhh-ev-text-answer[b-p4cma8q2ct] {
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--rz-base-300);
    border-left: 3px solid var(--rz-primary-light);
    border-radius: 8px;
    background: var(--rz-base-50);
}

.rrhh-ev-text-role[b-p4cma8q2ct] {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--rz-text-tertiary-color);
}

.rrhh-ev-text-question[b-p4cma8q2ct] {
    display: block;
    margin: 2px 0 6px 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

.rrhh-ev-text-body[b-p4cma8q2ct] {
    font-size: 0.875rem;
    color: var(--rz-text-color);
    white-space: pre-wrap;
}

.rrhh-ev-summary[b-p4cma8q2ct] {
    padding: 16px;
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    background: var(--rz-base-50);
    font-size: 0.875rem;
    line-height: 1.55;
    white-space: pre-wrap;
    color: var(--rz-text-color);
}

.rrhh-ev-section-title[b-p4cma8q2ct] {
    margin: 22px 0 10px 0;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/Rrhh/MyAbsences.razor.rz.scp.css */
/* Estilos propios de MyAbsences — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   RRHH module — shared styles (blueprint §5.6).
   Clock widget (MyWorkDay), event timeline, balance/contract cards, admin
   grids and the WorkDayDetailDrawer side dialog.
   Theme-aware: colors come exclusively from theme.css tokens (var(--rz-*)) —
   no hardcoded palette. Linked from Components/App.razor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section chrome ──────────────────────────────────────────────────────── */
.rrhh-section-title[b-ia692bl1ya] {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
    margin: 0 0 0.5rem;
}

/* ── Balance card (MyAbsences) ───────────────────────────────────────────── */
.rrhh-balance-card[b-ia692bl1ya] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
    padding: 0.5rem 0;
}

.rrhh-balance-card .rrhh-balance-remaining[b-ia692bl1ya] {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--rz-success);
}

.rrhh-balance-card .rrhh-balance-caption[b-ia692bl1ya] {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.rrhh-balance-card .rrhh-balance-detail[b-ia692bl1ya] {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.rrhh-balance-card .rrhh-balance-detail strong[b-ia692bl1ya] {
    display: block;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
}

/* Carried-over vacation days chip on the balance card (MyAbsences).            */
.rrhh-carryover-chip[b-ia692bl1ya] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-top: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--rz-info-lighter);
    color: var(--rz-text-color);
    font-size: 0.78rem;
}

.rrhh-carryover-chip strong[b-ia692bl1ya] {
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Rrhh/MyDisconnection.razor.rz.scp.css */
/* Estilos propios de MyDisconnection — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-disconnection.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-disc-field-label[b-0wpmxdqaov] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-tertiary-color);
    margin-bottom: 0.25rem;
}

.rrhh-disc-hint[b-0wpmxdqaov] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

/* ── Cuerpo de la política renderizado ─────────────────────────────────── */
.rrhh-disc-body[b-0wpmxdqaov] {
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    padding: 1rem 1.15rem;
    background: var(--rz-base-background-color);
    line-height: 1.55;
}

.rrhh-disc-body[b-0wpmxdqaov]  img {
    max-width: 100%;
}

/* ── Resumen de la ventana del empleado ────────────────────────────────── */
.rrhh-disc-window-card[b-0wpmxdqaov] {
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    background: var(--rz-base-background-color);
    margin-bottom: 1rem;
}

.rrhh-disc-window-hours[b-0wpmxdqaov] {
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
}

/* ── Frase de aceptación ───────────────────────────────────────────────── */
.rrhh-disc-accept[b-0wpmxdqaov] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-top: 1rem;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.rrhh-disc-accepted[b-0wpmxdqaov] {
    color: var(--rz-success-dark, #1e6b34);
    font-weight: 600;
}

/* ── Estados de la cola ────────────────────────────────────────────────── */
.rrhh-disc-state[b-0wpmxdqaov] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid var(--rz-base-300);
    color: var(--rz-text-tertiary-color);
}

.rrhh-disc-state-pending[b-0wpmxdqaov] {
    border-color: var(--rz-warning, #ed6c02);
    color: var(--rz-warning-dark, #b26a00);
}

.rrhh-disc-state-sent[b-0wpmxdqaov] {
    border-color: var(--rz-success, #2e7d32);
    color: var(--rz-success-dark, #1e6b34);
}

.rrhh-disc-state-discarded[b-0wpmxdqaov] {
    border-color: var(--rz-base-400);
}

.rrhh-disc-empty[b-0wpmxdqaov] {
    padding: 1.5rem;
    text-align: center;
    color: var(--rz-text-tertiary-color);
    font-size: 0.875rem;
}
/* /Components/Pages/Rrhh/MyDocuments.razor.rz.scp.css */
/* Estilos propios de MyDocuments — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   RRHH module — shared styles (blueprint §5.6).
   Clock widget (MyWorkDay), event timeline, balance/contract cards, admin
   grids and the WorkDayDetailDrawer side dialog.
   Theme-aware: colors come exclusively from theme.css tokens (var(--rz-*)) —
   no hardcoded palette. Linked from Components/App.razor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section chrome ──────────────────────────────────────────────────────── */
.rrhh-section-title[b-q86md4erii] {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
    margin: 0 0 0.5rem;
}

.rrhh-empty[b-q86md4erii] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
}

/* ── Contract card (MyDocuments) ─────────────────────────────────────────── */
.rrhh-contract-card[b-q86md4erii] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--rz-text-color);
}

.rrhh-contract-card .rrhh-contract-row[b-q86md4erii] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.rrhh-contract-card .rrhh-contract-label[b-q86md4erii] {
    color: var(--rz-text-secondary-color);
}

.rrhh-contract-card .rrhh-contract-value[b-q86md4erii] {
    font-weight: 600;
    text-align: right;
}

/* ── Disparador del bloque salarial en vivo (ADR 2026-08-25) ─────────────── */
.rrhh-erp-trigger[b-q86md4erii] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.875rem;
}
/* /Components/Pages/Rrhh/MyEvaluationResults.razor.rz.scp.css */
/* Estilos propios de MyEvaluationResults — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-evaluations.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ============================================================================
   RRHH v4 §2 — Evaluaciones 90/180/360 ligeras
   Superficies: /rrhh/mis-evaluaciones (+ diálogo de formulario), /rrhh/mis-resultados,
                /admin/rrhh/evaluaciones (+ diálogos de campaña y previsualización),
                /admin/rrhh/evaluaciones/plantillas.
   Regla CLAUDE.md: cero <style> en .razor — todo el CSS de estas páginas vive aquí.
   ========================================================================== */
.rrhh-ev-page[b-g8yablwsbv] {
    margin: 40px auto;
    max-width: 1100px;
}

.rrhh-ev-title-bar[b-g8yablwsbv] {
    width: 4px;
    height: 40px;
    background: linear-gradient(180deg, var(--rz-primary) 0%, var(--rz-secondary) 100%);
    border-radius: 2px;
}

.rrhh-ev-title[b-g8yablwsbv] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rz-text-color);
    letter-spacing: -0.3px;
}

.rrhh-ev-subtitle[b-g8yablwsbv] {
    margin: 4px 0 0 0;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.rrhh-ev-empty[b-g8yablwsbv] {
    padding: 32px 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
}
/* /Components/Pages/Rrhh/MyEvaluations.razor.rz.scp.css */
/* Estilos propios de MyEvaluations — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-evaluations.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ============================================================================
   RRHH v4 §2 — Evaluaciones 90/180/360 ligeras
   Superficies: /rrhh/mis-evaluaciones (+ diálogo de formulario), /rrhh/mis-resultados,
                /admin/rrhh/evaluaciones (+ diálogos de campaña y previsualización),
                /admin/rrhh/evaluaciones/plantillas.
   Regla CLAUDE.md: cero <style> en .razor — todo el CSS de estas páginas vive aquí.
   ========================================================================== */
.rrhh-ev-page[b-98e7ustn3z] {
    margin: 40px auto;
    max-width: 1100px;
}

.rrhh-ev-title-bar[b-98e7ustn3z] {
    width: 4px;
    height: 40px;
    background: linear-gradient(180deg, var(--rz-primary) 0%, var(--rz-secondary) 100%);
    border-radius: 2px;
}

.rrhh-ev-title[b-98e7ustn3z] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rz-text-color);
    letter-spacing: -0.3px;
}

.rrhh-ev-subtitle[b-98e7ustn3z] {
    margin: 4px 0 0 0;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

[b-98e7ustn3z] .rrhh-ev-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.rrhh-ev-empty[b-98e7ustn3z] {
    padding: 32px 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
}

/* ── Lista de asignaciones ─────────────────────────────────────────────── */
.rrhh-ev-card[b-98e7ustn3z] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    background: var(--rz-base-background-color);
}

.rrhh-ev-card-overdue[b-98e7ustn3z] {
    border-left: 3px solid var(--rz-danger);
}

.rrhh-ev-card-main[b-98e7ustn3z] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.rrhh-ev-card-subject[b-98e7ustn3z] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.rrhh-ev-card-meta[b-98e7ustn3z] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}
/* /Components/Pages/Rrhh/MyLifecycleTasks.razor.rz.scp.css */
/* Estilos propios de MyLifecycleTasks — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-lifecycle.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ============================================================================
   RRHH v4 §1 — Ciclo de vida del empleado (onboarding · cambio de puesto · baja)
   Superficies: /rrhh/mis-tareas, /admin/rrhh/ciclo-vida (+ drawer),
                /admin/rrhh/ciclo-vida/plantillas, /admin/rrhh/preboarding.
   Regla CLAUDE.md: cero <style> en .razor — todo el CSS de estas páginas vive aquí.
   ========================================================================== */
.rrhh-lc-page[b-qekcvmcvsx] {
    margin: 40px auto;
    max-width: 1100px;
}

.rrhh-lc-title-bar[b-qekcvmcvsx] {
    width: 4px;
    height: 40px;
    background: linear-gradient(180deg, var(--rz-primary) 0%, var(--rz-secondary) 100%);
    border-radius: 2px;
}

.rrhh-lc-title[b-qekcvmcvsx] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rz-text-color);
    letter-spacing: -0.3px;
}

.rrhh-lc-subtitle[b-qekcvmcvsx] {
    margin: 4px 0 0 0;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
}

[b-qekcvmcvsx] .rrhh-lc-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Agrupación por run y por fase ─────────────────────────────────────────── */
.rrhh-lc-group[b-qekcvmcvsx] {
    margin-bottom: 24px;
}

.rrhh-lc-group-head[b-qekcvmcvsx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--rz-base-300);
}

.rrhh-lc-group-title[b-qekcvmcvsx] {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--rz-text-color);
}

.rrhh-lc-group-subject[b-qekcvmcvsx] {
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
}

/* La fase de preboarding es una propiedad calculada (DueOffsetDays < 0), no un estado. */
.rrhh-lc-phase[b-qekcvmcvsx] {
    margin: 14px 0 6px 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rz-text-tertiary-color);
}

/* ── Fila de tarea ─────────────────────────────────────────────────────────── */
.rrhh-lc-task[b-qekcvmcvsx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--rz-base-background-color);
}

.rrhh-lc-task-overdue[b-qekcvmcvsx] {
    border-left: 3px solid var(--rz-danger);
}

.rrhh-lc-task-main[b-qekcvmcvsx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.rrhh-lc-task-title[b-qekcvmcvsx] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--rz-text-color);
}

.rrhh-lc-task-instructions[b-qekcvmcvsx] {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    white-space: pre-line;
}

.rrhh-lc-task-meta[b-qekcvmcvsx] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.rrhh-lc-required[b-qekcvmcvsx] {
    color: var(--rz-danger);
    margin-left: 4px;
    font-weight: 700;
}

@media (max-width: 768px) {
[b-qekcvmcvsx] .rrhh-lc-header-actions {
        justify-content: flex-start;
        margin-top: 12px;
    }
}


/* ══ De wwwroot/css/rrhh/rrhh.css (tanda 2 de la migración) ══ */

.rrhh-empty[b-qekcvmcvsx] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
}
/* /Components/Pages/Rrhh/MyOvertimeBalance.razor.rz.scp.css */
/* Estilos propios de MyOvertimeBalance — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-overtime.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   RRHH v3 §3 — bolsa de horas (motor de horas extra)
   Reglas: nada de <style> en .razor (CLAUDE.md); los colores salen de los
   tokens de Radzen para que el tema claro/oscuro siga funcionando.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tarjetas de saldo ─────────────────────────────────────────────────── */
.rrhh-overtime-summary[b-vy32fcpsqb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rrhh-overtime-tile[b-vy32fcpsqb] {
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    background: var(--rz-base-background-color);
}

.rrhh-overtime-tile-label[b-vy32fcpsqb] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-tertiary-color);
}

.rrhh-overtime-tile-value[b-vy32fcpsqb] {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
}

.rrhh-overtime-tile-note[b-vy32fcpsqb] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.rrhh-overtime-tile-warn .rrhh-overtime-tile-value[b-vy32fcpsqb] {
    color: var(--rz-warning-dark, #b26a00);
}

.rrhh-overtime-tile-danger .rrhh-overtime-tile-value[b-vy32fcpsqb] {
    color: var(--rz-danger-dark, #b3261e);
}

/* ── Medidor del cupo anual (art. 35.2 ET) ─────────────────────────────── */
.rrhh-overtime-cap[b-vy32fcpsqb] {
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    padding: 1rem;
}

.rrhh-overtime-cap-track[b-vy32fcpsqb] {
    position: relative;
    height: 12px;
    border-radius: 6px;
    background: var(--rz-base-200);
    overflow: hidden;
    margin: 0.5rem 0;
}

.rrhh-overtime-cap-fill[b-vy32fcpsqb] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.2s ease;
}

.rrhh-overtime-cap-ok .rrhh-overtime-cap-fill[b-vy32fcpsqb] {
    background: var(--rz-success);
}

.rrhh-overtime-cap-warn .rrhh-overtime-cap-fill[b-vy32fcpsqb] {
    background: var(--rz-warning);
}

.rrhh-overtime-cap-exceeded .rrhh-overtime-cap-fill[b-vy32fcpsqb] {
    background: var(--rz-danger);
}

.rrhh-overtime-cap-legend[b-vy32fcpsqb] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.rrhh-overtime-cap-legend strong[b-vy32fcpsqb] {
    font-variant-numeric: tabular-nums;
}

/* ── Aviso legal ───────────────────────────────────────────────────────── */
.rrhh-overtime-legal[b-vy32fcpsqb] {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    line-height: 1.5;
}

/* ── Lista de lotes del empleado ───────────────────────────────────────── */
.rrhh-overtime-list[b-vy32fcpsqb] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rrhh-overtime-row[b-vy32fcpsqb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--rz-base-300);
    border-left: 4px solid var(--rz-base-400);
    border-radius: 8px;
    background: var(--rz-base-background-color);
}

.rrhh-overtime-row-expiring[b-vy32fcpsqb] {
    border-left-color: var(--rz-warning);
}

.rrhh-overtime-row-expired[b-vy32fcpsqb] {
    border-left-color: var(--rz-danger);
}

.rrhh-overtime-row-date[b-vy32fcpsqb] {
    min-width: 110px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rrhh-overtime-row-amount[b-vy32fcpsqb] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.rrhh-overtime-row-meta[b-vy32fcpsqb] {
    margin-left: auto;
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
}


/* ══ De wwwroot/css/rrhh/rrhh.css (tanda 2 de la migración) ══ */

.rrhh-empty[b-vy32fcpsqb] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
}
/* /Components/Pages/Rrhh/MyShifts.razor.rz.scp.css */
/* Estilos propios de MyShifts — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-shifts.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-shift-band-text[b-jcyxtof8hc] {
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* ── Empleado: mis turnos ────────────────────────────────────────────────── */
.rrhh-myshift-list[b-jcyxtof8hc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rrhh-myshift-row[b-jcyxtof8hc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: var(--rz-border-normal);
    border-left: 4px solid var(--rz-base-400);
    border-radius: var(--rz-border-radius);
    background: var(--rz-card-background-color);
}

.rrhh-myshift-date[b-jcyxtof8hc] {
    min-width: 128px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.8125rem;
}

.rrhh-myshift-dow[b-jcyxtof8hc] {
    display: block;
    font-weight: 500;
    font-size: 0.6875rem;
    text-transform: capitalize;
    color: var(--rz-text-tertiary-color);
}

.rrhh-myshift-slot[b-jcyxtof8hc] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.rrhh-myshift-meta[b-jcyxtof8hc] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* Chip de "próximo turno" reutilizado en MyWorkDay y en la cabecera de
   Mis turnos. */
.rrhh-shift-next[b-jcyxtof8hc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--rz-border-radius);
    border: var(--rz-border-normal);
    background: var(--rz-base-100);
    font-size: 0.8125rem;
}

.rrhh-shift-next-label[b-jcyxtof8hc] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-tertiary-color);
}

.rrhh-shift-next-value[b-jcyxtof8hc] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


/* ══ De wwwroot/css/rrhh/rrhh.css (tanda 2 de la migración) ══ */

.rrhh-empty[b-jcyxtof8hc] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
}
/* /Components/Pages/Rrhh/MySignatures.razor.rz.scp.css */
/* Estilos propios de MySignatures — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-signature.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Lista del empleado ──────────────────────────────────────────────────── */
.rrhh-sign-list[b-okxcjmh3nz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rrhh-sign-row[b-okxcjmh3nz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--rz-base-300);
    border-left: 3px solid var(--rz-base-400);
    border-radius: 8px;
    background: var(--rz-base-background-color);
}

.rrhh-sign-row-pending[b-okxcjmh3nz] {
    border-left-color: var(--rz-primary);
}

.rrhh-sign-row-main[b-okxcjmh3nz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.rrhh-sign-row-name[b-okxcjmh3nz] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.rrhh-sign-row-meta[b-okxcjmh3nz] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.rrhh-sign-legal[b-okxcjmh3nz] {
    margin-top: 16px;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--rz-text-tertiary-color);
}

@media (max-width: 720px) {
.rrhh-sign-row[b-okxcjmh3nz] {
        flex-wrap: wrap;
    }
}


/* ══ De wwwroot/css/rrhh/rrhh.css (tanda 2 de la migración) ══ */

.rrhh-empty[b-okxcjmh3nz] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
}
/* /Components/Pages/Rrhh/MyTimesheet.razor.rz.scp.css */
/* Estilos propios de MyTimesheet — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Worked-vs-logged delta (month grid + WorkDaysAdmin) ─────────────────── */
.rrhh-delta-ok[b-jk1r04gy2k] {
    color: var(--rz-success);
    font-variant-numeric: tabular-nums;
}

.rrhh-delta-warn[b-jk1r04gy2k] {
    color: var(--rz-warning);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Calendar + absences v2 (§5.8) ───────────────────────────────────────── */
/* Holiday row overlay in the monthly attendance grid (MyWorkDay). The tint is
   applied to the row's cells because Radzen paints the striping on <td>.       */
[b-jk1r04gy2k] .rrhh-day-holiday > td {
    background: var(--rz-info-lighter);
}

/* ── Timesheets v2 (§5.8) ────────────────────────────────────────────────── */
/* Triple-metric header of MyTimesheet: required / attended / imputed tiles.
   Wraps instead of squeezing so the tabular numbers stay readable.             */
.rrhh-ts-meter-row[b-jk1r04gy2k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rrhh-ts-meter[b-jk1r04gy2k] {
    flex: 1 1 150px;
    min-width: 150px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    background: var(--rz-base-background-color);
}

.rrhh-ts-meter .rrhh-ts-meter-value[b-jk1r04gy2k] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
}

.rrhh-ts-meter .rrhh-ts-meter-label[b-jk1r04gy2k] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

/* Status banner of the period. One 4px accent border, tokens only — no new
   z-index and no hardcoded palette.                                           */
.rrhh-ts-banner[b-jk1r04gy2k] {
    padding: 0.65rem 0.9rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--rz-base-400);
    background: var(--rz-base-200);
    font-size: 0.85rem;
    color: var(--rz-text-color);
}

.rrhh-ts-banner-submitted[b-jk1r04gy2k] {
    border-left-color: var(--rz-info);
    background: var(--rz-info-lighter);
}

.rrhh-ts-banner-approved[b-jk1r04gy2k] {
    border-left-color: var(--rz-success);
    background: var(--rz-success-lighter);
}

.rrhh-ts-banner-rejected[b-jk1r04gy2k] {
    border-left-color: var(--rz-danger);
    background: var(--rz-danger-lighter);
}

.rrhh-ts-banner-closed[b-jk1r04gy2k] {
    border-left-color: var(--rz-base-500);
    background: var(--rz-base-200);
}

.rrhh-ts-banner-grace[b-jk1r04gy2k] {
    border-left-color: var(--rz-warning);
    background: var(--rz-warning-lighter);
}

/* Per-day padlock in the timesheet grid.                                       */
[b-jk1r04gy2k] .rrhh-ts-lock-icon {
    font-size: 1rem;
    vertical-align: middle;
    color: var(--rz-text-tertiary-color);
}

/* Count badge riding the admin triage select bar.                              */
.rrhh-ts-bucket-badge[b-jk1r04gy2k] {
    margin-left: 0.35rem;
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Rrhh/MyWorkDay.razor.rz.scp.css */
/* Estilos propios de MyWorkDay — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-shifts.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* Chip de "próximo turno" reutilizado en MyWorkDay y en la cabecera de
   Mis turnos. */
.rrhh-shift-next[b-vwkx8caqyp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--rz-border-radius);
    border: var(--rz-border-normal);
    background: var(--rz-base-100);
    font-size: 0.8125rem;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* The chip is a link to /rrhh/mis-turnos — interactive surfaces get a visible
   hover/focus state, same idiom as the directory person card. */
.rrhh-shift-next:hover[b-vwkx8caqyp],
.rrhh-shift-next:focus-visible[b-vwkx8caqyp] {
    border-color: var(--rz-primary);
    background: var(--rz-base-200);
}

.rrhh-shift-next-label[b-vwkx8caqyp] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-tertiary-color);
}

.rrhh-shift-next-value[b-vwkx8caqyp] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


/* ══ De wwwroot/css/rrhh/rrhh.css (tanda 2 de la migración) ══ */

/* ═══════════════════════════════════════════════════════════════════════════
   RRHH module — shared styles (blueprint §5.6).
   Clock widget (MyWorkDay), event timeline, balance/contract cards, admin
   grids and the WorkDayDetailDrawer side dialog.
   Theme-aware: colors come exclusively from theme.css tokens (var(--rz-*)) —
   no hardcoded palette. Linked from Components/App.razor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section chrome ──────────────────────────────────────────────────────── */
.rrhh-section-title[b-vwkx8caqyp] {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
    margin: 0 0 0.5rem;
}

.rrhh-empty[b-vwkx8caqyp] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
}

/* ── Clock panel (MyWorkDay left column) ─────────────────────────────────── */
/* State variant classes are emitted by the page as rrhh-clock-@ClockStateCss:
   idle | open | paused | closed | underreview.                               */
.rrhh-clock-panel[b-vwkx8caqyp] {
    padding: 1.25rem 1.5rem;
    border-radius: var(--rz-border-radius);
    border: var(--rz-border-normal);
    border-left: 4px solid var(--rz-base-400);
    background: var(--rz-card-background-color);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rrhh-clock-idle[b-vwkx8caqyp] {
    border-left-color: var(--rz-base-400);
}

.rrhh-clock-open[b-vwkx8caqyp] {
    border-left-color: var(--rz-success);
    background: var(--rz-success-lighter);
}

.rrhh-clock-paused[b-vwkx8caqyp] {
    border-left-color: var(--rz-warning);
    background: var(--rz-warning-lighter);
}

.rrhh-clock-closed[b-vwkx8caqyp] {
    border-left-color: var(--rz-secondary);
    background: var(--rz-secondary-lighter);
}

.rrhh-clock-underreview[b-vwkx8caqyp] {
    border-left-color: var(--rz-danger);
    background: var(--rz-danger-lighter);
}

.rrhh-clock-elapsed[b-vwkx8caqyp] {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
}

.rrhh-clock-state-label[b-vwkx8caqyp] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

.rrhh-clock-buttons[b-vwkx8caqyp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rrhh-clock-totals[b-vwkx8caqyp] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.rrhh-clock-totals strong[b-vwkx8caqyp] {
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
}

/* ── Event timeline (today panel + WorkDayDetailDrawer) ──────────────────── */
.rrhh-event-timeline[b-vwkx8caqyp] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.rrhh-event-row[b-vwkx8caqyp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    padding: 0.25rem 0;
    color: var(--rz-text-color);
}

.rrhh-event-dot[b-vwkx8caqyp] {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rz-base-400);
}

/* Per-event-type dot tints — class suffix = WorkDayEventType lowercased.     */
.rrhh-event-checkin[b-vwkx8caqyp] {
    background: var(--rz-success);
}

.rrhh-event-breakstart[b-vwkx8caqyp] {
    background: var(--rz-warning);
}

.rrhh-event-breakend[b-vwkx8caqyp] {
    background: var(--rz-info);
}

.rrhh-event-checkout[b-vwkx8caqyp] {
    background: var(--rz-danger);
}

.rrhh-event-manualcorrectionapplied[b-vwkx8caqyp] {
    background: var(--rz-secondary);
}

.rrhh-event-autoclosed[b-vwkx8caqyp] {
    background: var(--rz-danger);
}

.rrhh-event-dayapproved[b-vwkx8caqyp] {
    background: var(--rz-success);
}

.rrhh-event-dayreopened[b-vwkx8caqyp] {
    background: var(--rz-warning);
}

/* ── Month summary (MyWorkDay right column) ──────────────────────────────── */
.rrhh-month-totals[b-vwkx8caqyp] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color);
    /* Same quiet-surface family as .rrhh-empty and the clock panel: base-100
       ground + the shared radius token, so grid, totals and clock read as one. */
    background: var(--rz-base-100);
    border-radius: var(--rz-border-radius);
}

/* ── Worked-vs-logged delta (month grid + WorkDaysAdmin) ─────────────────── */
.rrhh-delta-ok[b-vwkx8caqyp] {
    color: var(--rz-success);
    font-variant-numeric: tabular-nums;
}

.rrhh-delta-warn[b-vwkx8caqyp] {
    color: var(--rz-warning);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Calendar + absences v2 (§5.8) ───────────────────────────────────────── */
/* Holiday row overlay in the monthly attendance grid (MyWorkDay). The tint is
   applied to the row's cells because Radzen paints the striping on <td>.       */
[b-vwkx8caqyp] .rrhh-day-holiday > td {
    background: var(--rz-info-lighter);
}
/* /Components/Pages/Rrhh/OrgChart.razor.rz.scp.css */
/* Estilos propios de OrgChart — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/rrhh/rrhh-orgchart.css. Casi todo va sobre HTML de este
   marcado y se acota solo; la excepcion es `rrhh-oc-search`, que cuelga de un
   <RadzenDropDown> y por tanto no recibe el `b-{hash}`: sale por `::deep` desde
   el <div class="rrhh-oc-page"> de aqui.

   Y OJO con las clases `.oc-*` (sin el prefijo `rrhh-`): esas NO estan en el
   marcado, las dibuja wwwroot/js/rrhh-orgchart.js al construir el SVG. Al
   compilador no le consta que existan, asi que no las marca y sin `::deep` se
   quedan sin estilos — el sintoma fue literal: el nodo del organigrama salio
   como una caja NEGRA, porque un <rect> de SVG sin `fill` se pinta en negro.
   Por eso van todas ancladas en `.rrhh-oc-page`.

   El bloque @media print NO esta aqui, y no es un olvido: sigue en
   wwwroot/css/rrhh/rrhh-orgchart-print.css porque su trabajo es ocultar el
   DOCUMENTO ENTERO menos el organigrama. Ver la explicacion en ese fichero.
   ───────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   HR v4 §4.3 / §7.3 — org chart.

   Contract with OrgChartSvgWriter: the server emits ONE <svg class="oc-svg"> whose nodes carry .oc-node /
   .oc-box / .oc-av / .oc-av-{slot} / .oc-ini / .oc-name / .oc-title / .oc-toggle. Renaming a class here
   silently unstyles the chart, so the two files move together.

   The twelve .oc-av-{slot} tones are the historic AvatarPalette, in the historic order: the same person must
   be the same colour on their directory card and on their chart node.
   ───────────────────────────────────────────────────────────────────────────── */

.rrhh-oc-page[b-cdrzwips9i] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rrhh-oc-toolbar[b-cdrzwips9i] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.rrhh-oc-page[b-cdrzwips9i]  .rrhh-oc-search {
    flex: 1 1 240px;
    min-width: 180px;
}

.rrhh-oc-canvas[b-cdrzwips9i] {
    overflow: auto;
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    background: var(--rz-base-background-color);
    padding: 8px;
    max-height: 72vh;
}

.rrhh-oc-note[b-cdrzwips9i] {
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
}

.rrhh-oc-empty[b-cdrzwips9i] {
    padding: 28px 12px;
    text-align: center;
    color: var(--rz-text-tertiary-color);
    font-size: 0.875rem;
}

/* ── The SVG itself ── */
.rrhh-oc-page[b-cdrzwips9i]  .oc-svg {
    display: block;
    font-family: inherit;
}

.rrhh-oc-page[b-cdrzwips9i]  .oc-edges path {
    fill: none;
    stroke: var(--rz-base-400);
    stroke-width: 1.5;
}

.rrhh-oc-page[b-cdrzwips9i]  .oc-node {
    cursor: pointer;
}

.rrhh-oc-page[b-cdrzwips9i]  .oc-box {
    fill: var(--rz-base-100);
    stroke: var(--rz-base-300);
    stroke-width: 1;
}

.rrhh-oc-page[b-cdrzwips9i]  .oc-node:hover .oc-box,
.rrhh-oc-page[b-cdrzwips9i]  .oc-node:focus-visible .oc-box {
    stroke: var(--rz-primary);
    stroke-width: 1.5;
}

.rrhh-oc-page[b-cdrzwips9i]  .oc-node:focus-visible {
    outline: none;
}

.rrhh-oc-page[b-cdrzwips9i]  .oc-ini {
    fill: #ffffff;
    font-size: 12px;
    font-weight: 600;
}

.rrhh-oc-page[b-cdrzwips9i]  .oc-name {
    fill: var(--rz-text-title-color);
    font-size: 13px;
    font-weight: 600;
}

.rrhh-oc-page[b-cdrzwips9i]  .oc-title {
    fill: var(--rz-text-tertiary-color);
    font-size: 11px;
}

.rrhh-oc-page[b-cdrzwips9i]  .oc-toggle circle {
    fill: var(--rz-base-background-color);
    stroke: var(--rz-base-400);
    stroke-width: 1;
}

.rrhh-oc-page[b-cdrzwips9i]  .oc-toggle text {
    fill: var(--rz-text-secondary-color);
    font-size: 10px;
    font-weight: 600;
}

.rrhh-oc-page[b-cdrzwips9i]  .oc-toggle--collapsed circle {
    fill: var(--rz-primary);
    stroke: var(--rz-primary);
}

.rrhh-oc-page[b-cdrzwips9i]  .oc-toggle--collapsed text {
    fill: #ffffff;
}

/* ── Avatar palette: byte-identical order to Dalatic.Portal.Domain.Common.AvatarPalette ── */
.oc-av-0[b-cdrzwips9i] { fill: #4F46E5; }
.oc-av-1[b-cdrzwips9i] { fill: #0891B2; }
.oc-av-2[b-cdrzwips9i] { fill: #0D9488; }
.oc-av-3[b-cdrzwips9i] { fill: #16A34A; }
.oc-av-4[b-cdrzwips9i] { fill: #CA8A04; }
.oc-av-5[b-cdrzwips9i] { fill: #EA580C; }
.oc-av-6[b-cdrzwips9i] { fill: #DC2626; }
.oc-av-7[b-cdrzwips9i] { fill: #DB2777; }
.oc-av-8[b-cdrzwips9i] { fill: #9333EA; }
.oc-av-9[b-cdrzwips9i] { fill: #2563EB; }
.oc-av-10[b-cdrzwips9i] { fill: #475569; }
.oc-av-11[b-cdrzwips9i] { fill: #65A30D; }

/* ── Accessible outline: present for screen readers, revealed only when printing ── */
.rrhh-oc-page[b-cdrzwips9i]  .oc-outline {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* ══ De wwwroot/css/rrhh/rrhh-directory.css (tanda 2 de la migración) ══ */

.rrhh-dir-title-bar[b-cdrzwips9i] {
    width: 4px;
    height: 38px;
    border-radius: 2px;
    background: var(--rz-primary);
}

.rrhh-dir-title[b-cdrzwips9i] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.rrhh-dir-subtitle[b-cdrzwips9i] {
    margin: 2px 0 0 0;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
}
/* /Components/Pages/Rrhh/SocialHighlightsCard.razor.rz.scp.css */
/* Estilos propios de SocialHighlightsCard — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/rrhh-directory.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.rrhh-dir-section-title[b-ca51pokwhz] {
    margin: 0 0 6px 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-tertiary-color);
}

/* ── Dashboard social strip (§5) ── */
.rrhh-social-card[b-ca51pokwhz] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rrhh-social-item[b-ca51pokwhz] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
}

.rrhh-social-item-text[b-ca51pokwhz] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rrhh-social-item-date[b-ca51pokwhz] {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    white-space: nowrap;
}
/* /Components/Pages/Rrhh/TeamCalendar.razor.rz.scp.css */
/* Estilos propios de TeamCalendar — CSS isolation.
   Vienen de wwwroot/css/rrhh/rrhh-calendar.css, que se cargaba en TODAS las
   paginas del portal para una pantalla sola. La leyenda se acota sin mas; las
   citas y los huecos necesitan `::deep` (ver el bloque de mas abajo).
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   RRHH TeamCalendar — RadzenScheduler skin (blueprint §5.4 / §5.6).
   Appointment tint comes from the DB AbsenceType.ColorHex, injected by
   AppointmentRender as an inline CSS variable (--rrhh-abs-color). Masked
   items (other users' non-managed absences) carry NO variable, so they fall
   back to the neutral base tokens — the neutral look IS the masked look.
   Z-index contract: the scheduler lives at page stacking level; only the
   guard z-index:1 below — never invent values above the theme.css contract
   (11499/11500/12000).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Legend ──────────────────────────────────────────────────────────────── */

.rrhh-cal-legend[b-4x47d0k9mq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.rrhh-cal-chip[b-4x47d0k9mq] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.rrhh-cal-chip[b-4x47d0k9mq]::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--rrhh-abs-color, var(--rz-base-300));
}

.rrhh-cal-chip.rrhh-cal-chip-pending[b-4x47d0k9mq]::before {
    background: transparent;
    border: 1px dashed var(--rz-warning);
}

/* ── Appointments ────────────────────────────────────────────────────────── */
/* Desde aqui hasta el final, `::deep`: estas clases NO estan en el marcado. Las
   pone el code-behind sobre elementos que dibuja RadzenScheduler
   (`args.Attributes["class"]` en AppointmentRender / SlotRender), y el compilador
   solo marca lo que ve escrito en el .razor. Sin `::deep` se compilarian a
   `.rrhh-cal-appt[b-hash]` y las citas se quedarian sin color de tipo. El ancla
   es el <div class="rrhh-cal-page"> de este marcado. */

.rrhh-cal-page[b-4x47d0k9mq]  .rrhh-cal-appt {
    z-index: 1; /* guard — keep below every theme.css dialog/popup layer */
    border-radius: 6px;
    font-size: 12px;
    background: var(--rrhh-abs-color, var(--rz-base-300));
    border-left: 3px solid var(--rrhh-abs-color, var(--rz-base-400));
    padding: 1px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pending requests render as ghosts on top of the type tint. */
.rrhh-cal-page[b-4x47d0k9mq]  .rrhh-cal-pending {
    opacity: 0.55;
    border: 1px dashed var(--rz-warning);
}

/* ── Slots ───────────────────────────────────────────────────────────────── */

.rrhh-cal-page[b-4x47d0k9mq]  .rrhh-cal-weekend {
    background: var(--rz-base-100);
}
/* /Components/Pages/ServiceDesk/Components/TicketPipelineProgress.razor.rz.scp.css */
/* CRÍTICO — crear TicketPipelineProgress.razor.css (hoy la barra de estados sale sin estilo).
   Estilos propios de TicketPipelineProgress — CSS isolation.
   Vienen de wwwroot/css/servicedesk/tickets-detail.css (lineas 240-311). El
   ancestro .tk-scope lo aporta el TicketDetailDialog que hospeda este hijo. */

.tk-scope .tk-state-bar[b-8722u9ekyx] {
    display: flex;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.tk-scope .tk-state-step[b-8722u9ekyx] {
    flex: 1;
    padding: 9px 14px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-faint);
    position: relative;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1.2;
}

.tk-scope .tk-state-step + .tk-state-step[b-8722u9ekyx] {
    border-left: 1px solid var(--line-soft);
}

.tk-scope .tk-state-step:hover:not(:disabled)[b-8722u9ekyx] {
    background: var(--surface-2);
}

.tk-scope .tk-state-step:disabled[b-8722u9ekyx] {
    cursor: default;
}

.tk-scope .tk-state-step.is-done[b-8722u9ekyx] {
    color: var(--st-done);
    background: var(--st-done-bg);
}

.tk-scope .tk-state-step.is-current[b-8722u9ekyx] {
    color: var(--rz-on-primary);
    background: var(--st-prog);
    box-shadow: inset 0 -2px 0 var(--st-prog);
}

.tk-scope .tk-state-step.is-current[data-state="new"][b-8722u9ekyx]    { background: var(--st-new); }
.tk-scope .tk-state-step.is-current[data-state="open"][b-8722u9ekyx]   { background: var(--st-open); }
.tk-scope .tk-state-step.is-current[data-state="prog"][b-8722u9ekyx]   { background: var(--st-prog); }
.tk-scope .tk-state-step.is-current[data-state="wait"][b-8722u9ekyx]   { background: var(--st-wait); }
.tk-scope .tk-state-step.is-current[data-state="done"][b-8722u9ekyx]   { background: var(--st-done); }
.tk-scope .tk-state-step.is-current[data-state="closed"][b-8722u9ekyx] { background: var(--st-closed); }

.tk-scope .tk-state-step.is-todo[b-8722u9ekyx] {
    color: var(--ink-faint);
}

.tk-scope .tk-state-step .tk-state-check[b-8722u9ekyx] {
    display: inline-block;
    margin-right: 4px;
    color: var(--st-done);
}

.tk-scope .tk-state-step.is-done .tk-state-label[b-8722u9ekyx] {
    text-decoration: line-through;
    text-decoration-color: var(--tk-st-done-strike);
}
/* /Components/Pages/ServiceDesk/TicketCommentDialog.razor.rz.scp.css */
/* Estilos propios de TicketCommentDialog — CSS isolation.
   Vienen de wwwroot/css/servicedesk/ticket-comment-dialog.css, que se cargaba en TODAS las paginas del
   portal. Verificado antes de mover: todas sus clases van sobre HTML de este
   marcado, ningun otro componente las usa, y todo el color sale de tokens de
   theme.css — asi que sigue respondiendo al color primario del cliente y al
   modo oscuro igual que antes.
   ───────────────────────────────────────────────────────────────────────── */

/* TicketCommentDialog — sending state for the inline customer reply textarea. */
.ticket-comment-textarea-sending[b-rxe82nixea] {
    opacity: 0.55;
    pointer-events: none;
    cursor: progress;
}

.ticket-comment-sending[b-rxe82nixea] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    font-weight: 500;
}

.ticket-comment-spinner[b-rxe82nixea] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--rz-base-300);
    border-top-color: var(--rz-primary);
    border-radius: 50%;
    animation: ticket-comment-spin-b-rxe82nixea 0.65s linear infinite;
}

@keyframes ticket-comment-spin-b-rxe82nixea {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/ServiceDesk/TicketCreateDialog.razor.rz.scp.css */
/* Estilos propios de TicketCreateDialog — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/servicedesk/ticket-create-dialog.css (hoja completa).
   El div raiz `<div id="ticket-create-container" class="tk-scope tc-form">` es
   marcado propio, asi que casi todo el sistema (eyebrow, hero, type-grid, fld,
   prio-pick, footer sticky, quality-nudge) se acota solo.

   Llevan `::deep` (anclado en un elemento HTML propio) los sujetos que el
   compilador no puede marcar con el b-{hash}:
     - los internos de Radzen (.rz-skeleton, .rz-dropdown, .rz-textbox,
       .rz-html-editor*, .rz-message, .rz-fieldset): DOM que dibuja Radzen;
     - el `input[type="file"]` del drop zone: lo emite el componente
       <InputFile>, no este marcado;
     - los iconos .rzi / .spin: en este dialogo son <i> literales, pero en
       AdminTicketCreateDialog (que duplica este bloque, regla de isolation:
       cada hoja con su hash) los emite <RadzenIcon>; `::deep` cubre ambos.

   Este mismo bloque vive duplicado en AdminTicketCreateDialog.razor.css: su
   raiz añade `tk-scope tc-form` y hereda el sistema entero. Es un duplicado
   DELIBERADO bajo isolation, no un descuido — si tocas algo aqui, tocalo alli.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   TicketCreateDialog — chrome del modal de creación de ticket (FASE 3).
   ───────────────────────────────────────────────────────────────────────────
   Hereda los tokens del .tk-scope (ver tickets-tokens.css). Toda la maquinaria
   visual (eyebrow, hero title, type-grid, prio-pick, fld-acc, footer sticky)
   vive aquí; la lógica sigue en TicketCreateDialog.razor.cs.

   Convenciones:
     - Todo bajo `.tc-form.tk-scope` para no contaminar nada.
     - Selectors específicos con doble clase para sobrescribir Radzen sin
       recurrir a !important.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form.tk-scope[b-x2w1kb5doz] {
    min-height: 620px;
    font-family: var(--tk-font-sans);
    color: var(--ink);
    display: flex;
    flex-direction: column;
}

/* ─── Skeleton (inalterable: misma estructura que antes para no tocar timing) ── */
.tc-form .tc-skel-wrap[b-x2w1kb5doz] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.25rem 0 0;
}

/* RadzenSkeleton falls back to a fixed intrinsic width when none is given, which
   rendered as narrow floating bars instead of form-shaped placeholders. Stretch
   width-less skeletons to their row; inline style widths still win. */
.tc-form .tc-skel-wrap[b-x2w1kb5doz]  .rz-skeleton {
    width: 100%;
}

/* Stepper dots row of the wizard's step indicator. */
.tc-form .tc-skel-steps[b-x2w1kb5doz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tc-form .tc-skel-steps[b-x2w1kb5doz]  .rz-skeleton { width: auto; }

/* Mirrors the type-card grid of wizard step 1 (4 per row, wrapping to 2). */
.tc-form .tc-skel-typegrid[b-x2w1kb5doz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

@media (max-width: 900px) {
    .tc-form .tc-skel-typegrid[b-x2w1kb5doz] { grid-template-columns: repeat(2, 1fr); }
}

.tc-form .tc-skel-row[b-x2w1kb5doz] { display: grid; gap: 1rem; }
.tc-form .tc-skel-row-2[b-x2w1kb5doz] { grid-template-columns: 1fr 1fr; }
.tc-form .tc-skel-row-3[b-x2w1kb5doz] { grid-template-columns: 1fr 1fr 1fr; }

.tc-form .tc-skel-field[b-x2w1kb5doz] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tc-form .tc-skel-buttons[b-x2w1kb5doz] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER · eyebrow + hero title
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form .cm-head[b-x2w1kb5doz] {
    padding: 4px 0 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
}

.tc-form .cm-eyebrow[b-x2w1kb5doz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 6px;
}

.tc-form .cm-eyebrow-dot[b-x2w1kb5doz] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--violet);
    flex: none;
}

.tc-form .cm-trail[b-x2w1kb5doz] {
    font-family: var(--tk-font-mono);
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-faint);
    font-weight: 400;
    font-size: 11px;
    margin-left: 4px;
}

.tc-form .cm-hero-title[b-x2w1kb5doz] {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.3;
}

.tc-form .cm-hero-sub[b-x2w1kb5doz] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--ink-dim);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Two-step wizard — progress dots + step panels.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Centered, labelled stepper: [● Tipo] ───── [○ Detalles]. The connector line
   flexes so the group breathes without spanning the full dialog width. */
.tc-form .cm-steps[b-x2w1kb5doz] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px auto 4px;
    max-width: 420px;
}

.tc-form .cm-step[b-x2w1kb5doz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.tc-form .cm-step-num[b-x2w1kb5doz] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    background: var(--surface-2);
    border: 1.5px solid var(--line-strong);
    color: var(--ink-dim);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.tc-form .cm-step-label[b-x2w1kb5doz] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-dim);
    transition: color 0.18s ease;
    white-space: nowrap;
}

.tc-form .cm-step.is-active .cm-step-num[b-x2w1kb5doz] {
    background: var(--violet);
    border-color: var(--violet);
    color: var(--rz-on-primary);
    /* Soft halo lifts the active step without a hard outline. */
    box-shadow: 0 0 0 4px var(--violet-soft);
}

.tc-form .cm-step.is-active .cm-step-label[b-x2w1kb5doz] {
    color: var(--ink);
}

.tc-form .cm-step.is-done .cm-step-num[b-x2w1kb5doz] {
    background: var(--violet-soft);
    border-color: var(--violet);
    color: var(--violet);
}

.tc-form .cm-step.is-done .cm-step-label[b-x2w1kb5doz] {
    color: var(--violet);
}

.tc-form .cm-step-line[b-x2w1kb5doz] {
    height: 2px;
    border-radius: 2px;
    background: var(--line-strong);
    flex: 1 1 40px;
    min-width: 32px;
    transition: background 0.18s ease;
}

.tc-form .cm-step-line.is-done[b-x2w1kb5doz] {
    background: var(--violet);
}

/* Each step is its own flex column so the fields inside keep the same 16px
   inter-field rhythm they had when they were direct children of .cm-body. */
.tc-form .cm-step-panel[b-x2w1kb5doz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   .cm-info — banner violeta suave (sustituye a RadzenAlert Info)
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form .cm-info[b-x2w1kb5doz] {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: var(--violet-soft);
    border: 1px solid var(--violet-line);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.5;
    margin-bottom: 16px;
}

.tc-form .cm-info svg[b-x2w1kb5doz] {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--violet);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Form layout
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form .cm-body[b-x2w1kb5doz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 80px; /* room for sticky footer */
}

.tc-form .fld[b-x2w1kb5doz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tc-form .fld-row[b-x2w1kb5doz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 560px) {
    .tc-form .fld-row[b-x2w1kb5doz] { grid-template-columns: 1fr; }
}

.tc-form .fld-label[b-x2w1kb5doz] {
    font-size: 11.5px;
    color: var(--ink-2);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.tc-form .fld-label .req[b-x2w1kb5doz] {
    color: var(--rz-danger);
    margin-left: 2px;
}

.tc-form .fld-label .muted[b-x2w1kb5doz],
.tc-form .fld .muted[b-x2w1kb5doz] {
    color: var(--ink-faint);
    font-weight: 400;
}

.tc-form .fld-hint[b-x2w1kb5doz] {
    font-size: 11.5px;
    color: var(--ink-faint);
    line-height: 1.45;
}

.tc-form .fld-hint-row[b-x2w1kb5doz] {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 11.5px;
    color: var(--ink-faint);
}

.tc-form .fld-hint-row .ai-hint-mini[b-x2w1kb5doz] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--violet);
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 500;
}

.tc-form .fld-hint-row .ai-hint-mini[b-x2w1kb5doz]  .rzi {
    font-size: 12px;
}

.tc-form .fld-hint-row .ai-hint-mini:hover[b-x2w1kb5doz] {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Type cards — replaces TicketType dropdown with 4 radio cards.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form .type-grid[b-x2w1kb5doz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

@media (max-width: 720px) {
    .tc-form .type-grid[b-x2w1kb5doz] { grid-template-columns: repeat(2, 1fr); }
}

.tc-form .type-opt[b-x2w1kb5doz] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px 10px 28px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    cursor: pointer;
    background: var(--surface);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    font-family: var(--tk-font-sans);
    text-align: left;
    color: inherit;
    font-size: 12.5px;
}

.tc-form .type-opt:hover[b-x2w1kb5doz] {
    border-color: var(--ink-faint);
}

.tc-form .type-opt:disabled[b-x2w1kb5doz],
.tc-form .type-opt[aria-disabled="true"][b-x2w1kb5doz] {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--surface-2);
}

.tc-form .type-opt .dot[b-x2w1kb5doz] {
    position: absolute;
    left: 11px;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-faint);
}

.tc-form .type-opt .name[b-x2w1kb5doz] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}

.tc-form .type-opt .help[b-x2w1kb5doz] {
    font-size: 11px;
    font-style: normal;
    color: var(--ink-dim);
    line-height: 1.3;
}

.tc-form .type-opt.is-selected[b-x2w1kb5doz] {
    border-color: var(--violet);
    background: var(--violet-soft);
    box-shadow: var(--rz-shadow-glow);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dropdown chrome inside the create dialog — flatten Radzen to match design.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form[b-x2w1kb5doz]  .rz-dropdown {
    min-height: 38px;
    height: 38px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tc-form[b-x2w1kb5doz]  .rz-dropdown:hover {
    border-color: var(--ink-faint);
}

.tc-form[b-x2w1kb5doz]  .rz-dropdown:focus-within,
.tc-form[b-x2w1kb5doz]  .rz-dropdown.rz-state-focused {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px var(--violet-soft);
}

.tc-form[b-x2w1kb5doz]  .rz-dropdown.rz-state-disabled {
    background: var(--surface-2);
    border-color: var(--line);
    cursor: not-allowed;
}

.tc-form[b-x2w1kb5doz]  .rz-dropdown .rz-inputtext {
    font-size: 13px;
    color: var(--ink);
}

/* RadzenTextBox */
.tc-form[b-x2w1kb5doz]  .rz-textbox {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--ink);
    background: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tc-form[b-x2w1kb5doz]  .rz-textbox:hover {
    border-color: var(--ink-faint);
}

.tc-form[b-x2w1kb5doz]  .rz-textbox:focus {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px var(--violet-soft);
}

.tc-form[b-x2w1kb5doz]  .rz-textbox::placeholder {
    color: var(--ink-faint);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RTE chrome — wrap the RadzenHtmlEditor so it looks like a .rte block.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form .rte[b-x2w1kb5doz] {
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tc-form .rte:focus-within[b-x2w1kb5doz] {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px var(--violet-soft);
}

.tc-form .rte[b-x2w1kb5doz]  .rz-html-editor {
    border: 0;
    border-radius: 8px;
}

.tc-form .rte[b-x2w1kb5doz]  .rz-html-editor-toolbar {
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
    padding: 4px 6px;
}

/* Los dos selectores de la barra del editor ("Bloque de formato" y "Tamaño de fuente") heredaban el
   chrome de input de formulario del diálogo: 38px de alto, borde y fondo propios, al lado de botones
   de icono de 28px. Quedaban como dos cajas desalineadas que dominaban la barra.

   Se ancla en el ID del contenedor a propósito, porque la regla `.tc-form ::deep .rz-dropdown` de más
   abajo fija el alto de 38px y hay además un selector con id en el diálogo admin; el `!important` del
   tamaño de letra es porque theme.css fija `font-size: 13px !important` para todos los inputs. */
#ticket-create-container .rte[b-x2w1kb5doz]  .rz-html-editor-toolbar .rz-dropdown {
    min-height: 28px;
    height: 28px;
    /* Radzen renderiza estos dos desplegables con `style="width:120px"` y `width:70px` inline. Un
       `width` en hoja de estilos no puede ganar a eso, pero `min-width` sí: el ancho usado es el
       mayor de los dos. 86px es lo que necesita "Tamaño" para no quedar pegada al chevron. */
    min-width: 86px;
    font-size: 11px !important;
    box-shadow: none;
    align-items: center;
}

/* El padding derecho reserva el ancho del disparador: el disparador va en posición absoluta sobre
   la caja, así que sin ese hueco el texto se cuela por debajo del chevron ("Tamañ⌄"). */
#ticket-create-container .rte[b-x2w1kb5doz]  .rz-html-editor-toolbar .rz-dropdown .rz-dropdown-label {
    padding: 0 20px 0 6px;
    font-size: 11px !important;
    line-height: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink-soft);
}

/* El chevron es un icono de fuente a 24px. En una barra de 28px hay que ESCALAR el icono, no
   estrechar el disparador: al dejarlo a 24px dentro de un disparador estrecho desbordaba y el
   `overflow: hidden` del propio desplegable lo recortaba — se veía como un triángulo negro pegado
   al borde. */
#ticket-create-container .rte[b-x2w1kb5doz]  .rz-html-editor-toolbar .rz-dropdown .rz-dropdown-trigger {
    width: 20px;
}

#ticket-create-container .rte[b-x2w1kb5doz]  .rz-html-editor-toolbar .rz-dropdown .rz-dropdown-trigger-icon {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 15px;
}

.tc-form .rte[b-x2w1kb5doz]  .rz-html-editor-content {
    min-height: 160px;
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Priority — segmented control.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form .prio-pick[b-x2w1kb5doz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 9px;
    max-width: 360px;
}

.tc-form .prio-opt[b-x2w1kb5doz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    font-size: 12px;
    color: var(--ink-2);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
    font-weight: 500;
    background: transparent;
    border: 0;
    font-family: var(--tk-font-sans);
}

.tc-form .prio-opt:hover[b-x2w1kb5doz] {
    color: var(--ink);
}

.tc-form .prio-opt.is-selected[b-x2w1kb5doz] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--rz-shadow-1);
}

.tc-form .pp-dot[b-x2w1kb5doz] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.tc-form .pp-dot--low[b-x2w1kb5doz]  { background: var(--ticket-priority-low); }
.tc-form .pp-dot--med[b-x2w1kb5doz]  { background: var(--ticket-priority-medium); }
.tc-form .pp-dot--high[b-x2w1kb5doz] { background: var(--ticket-priority-high); }
.tc-form .pp-dot--urg[b-x2w1kb5doz]  { background: var(--ticket-priority-urgent); }
.tc-form .pp-dot--crit[b-x2w1kb5doz] { background: var(--ticket-priority-critical); }

/* ═══════════════════════════════════════════════════════════════════════════
   Attachments accordion (collapsible) + drop zone.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form .fld-acc[b-x2w1kb5doz] {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    overflow: hidden;
}

.tc-form .fld-acc-summary[b-x2w1kb5doz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--ink-2);
    font-weight: 600;
    -webkit-user-select: none;
    user-select: none;
    list-style: none;
    background: var(--surface);
    border: 0;
    width: 100%;
    font-family: var(--tk-font-sans);
    text-align: left;
}

.tc-form .fld-acc-summary[b-x2w1kb5doz]::-webkit-details-marker { display: none; }
.tc-form .fld-acc-summary[b-x2w1kb5doz]  .rzi { color: var(--ink-faint); font-size: 14px; }
.tc-form .fld-acc-summary .chev[b-x2w1kb5doz] {
    margin-left: auto;
    transition: transform 0.2s ease;
    color: var(--ink-faint);
    font-size: 14px;
}
.tc-form .fld-acc[open] .fld-acc-summary .chev[b-x2w1kb5doz] { transform: rotate(180deg); }
.tc-form .fld-acc-summary .muted[b-x2w1kb5doz] { margin-left: 6px; font-weight: 400; color: var(--ink-faint); }

.tc-form .cm-drop[b-x2w1kb5doz] {
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--ink-dim);
    font-size: 12.5px;
    background: var(--surface-2);
    border-top: 1px dashed var(--line);
    text-align: center;
    position: relative;
    cursor: pointer;
}

.tc-form .cm-drop[b-x2w1kb5doz]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.tc-form .cm-drop[b-x2w1kb5doz]  .rzi {
    font-size: 22px;
    color: var(--ink-faint);
}

.tc-form .cm-drop .browse-link[b-x2w1kb5doz] {
    color: var(--violet);
    text-decoration: underline;
    cursor: pointer;
}

.tc-form .cm-pending-list[b-x2w1kb5doz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px 12px;
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.tc-form .cm-pending-item[b-x2w1kb5doz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--surface-2);
    font-size: 12.5px;
    color: var(--ink-2);
}

.tc-form .cm-pending-item[b-x2w1kb5doz]  .rzi {
    font-size: 16px;
    color: var(--ink-faint);
    flex: none;
}

.tc-form .cm-pending-item .name[b-x2w1kb5doz] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-form .cm-pending-item .size[b-x2w1kb5doz] {
    color: var(--ink-faint);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Footer sticky — auto-save hint + Cancelar / Crear ticket.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form .cm-footer[b-x2w1kb5doz] {
    position: sticky;
    bottom: 0;
    margin: 18px -1px 0;
    padding: 14px 0 4px;
    /* Sticky footer fade — uses surface with a transparent top edge so the
       composer body fades into the bar in both light and dark modes. */
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--rz-base-background-color) 60%, transparent) 0%,
        var(--rz-base-background-color) 35%,
        var(--rz-base-background-color) 100%
    );
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
}

.tc-form .cm-footer-hint[b-x2w1kb5doz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--ink-faint);
}

.tc-form .cm-footer-hint[b-x2w1kb5doz]  .rzi { font-size: 13px; }

.tc-form .cm-footer-actions[b-x2w1kb5doz] {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.tc-form .cm-btn[b-x2w1kb5doz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    font-family: var(--tk-font-sans);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    line-height: 1;
}

.tc-form .cm-btn--ghost[b-x2w1kb5doz] {
    background: transparent;
    color: var(--ink-2);
    border-color: var(--line-strong);
}

.tc-form .cm-btn--ghost:hover[b-x2w1kb5doz] {
    background: var(--surface-2);
    border-color: var(--ink-faint);
    color: var(--ink);
}

.tc-form .cm-btn--primary[b-x2w1kb5doz] {
    background: var(--violet);
    color: var(--rz-on-primary);
    border-color: var(--violet);
    box-shadow: var(--rz-shadow-glow);
}

.tc-form .cm-btn--primary:hover:not(:disabled)[b-x2w1kb5doz] {
    background: var(--rz-primary-dark);
    border-color: var(--rz-primary-dark);
}

.tc-form .cm-btn:disabled[b-x2w1kb5doz] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tc-form .cm-btn[b-x2w1kb5doz]  .rzi {
    font-size: 14px;
}

/* spinner — keyframe defined locally so it works without depending on the
   global animation set. */
.tc-form .cm-btn[b-x2w1kb5doz]  .spin {
    animation: cm-spin-b-x2w1kb5doz 0.8s linear infinite;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   Validation messages — keep position:static (already in the Razor). Style
   them as the inline red helper text below each field.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form[b-x2w1kb5doz]  .rz-message {
    color: var(--rz-danger);
    font-size: 11.5px;
    margin-top: 4px;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RadzenFieldset (license info) — soften the chrome to match the dialog.
   ═══════════════════════════════════════════════════════════════════════════ */

.tc-form[b-x2w1kb5doz]  .rz-fieldset {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    box-shadow: none;
    padding: 12px 14px;
}

.tc-form[b-x2w1kb5doz]  .rz-fieldset .rz-fieldset-legend {
    font-size: 12.5px;
    color: var(--ink-2);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* AI QUALITY NUDGE — advisory card shown once before submit                   */
/* Deliberately low-friction: it sits above the footer, never covers the form, */
/* and the primary action stays "Crear" (a second click always submits).       */
/* ═══════════════════════════════════════════════════════════════════════════ */
.tc-quality-nudge[b-x2w1kb5doz] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 0 1.25rem 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--rz-warning-light, #f0c36d);
    border-radius: 10px;
    background: color-mix(in srgb, var(--rz-warning, #f5a623) 8%, transparent);
}

.tc-quality-nudge__icon[b-x2w1kb5doz] {
    color: var(--rz-warning, #f5a623);
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.tc-quality-nudge__body[b-x2w1kb5doz] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tc-quality-nudge__title[b-x2w1kb5doz] {
    font-weight: 600;
    font-size: 0.875rem;
}

.tc-quality-nudge__missing[b-x2w1kb5doz] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.tc-quality-nudge__suggestion[b-x2w1kb5doz] {
    font-size: 0.8125rem;
    line-height: 1.4;
}

.tc-quality-nudge__hint[b-x2w1kb5doz] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

/* Bloque de la sugerencia de subcategoria: se separa del resto del aviso porque
   propone una accion distinta (cambiar la clasificacion, no reescribir el texto). */
.tc-quality-nudge__category[b-x2w1kb5doz] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.35rem;
    border-left: 3px solid var(--rz-info, #2196f3);
    background: var(--rz-base-100, rgba(0, 0, 0, 0.03));
    border-radius: 0 6px 6px 0;
}

.tc-quality-nudge__dismiss[b-x2w1kb5doz] {
    flex-shrink: 0;
    align-self: center;
}

/* Gate actions: "Mejorar descripción" is the encouraged path; "Enviar igualmente"
   is a deliberately understated escape so it does not read as the default choice. */
.tc-quality-nudge__actions[b-x2w1kb5doz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}

.tc-quality-nudge__send-anyway[b-x2w1kb5doz] {
    background: none;
    border: none;
    padding: 0.25rem 0.25rem;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.tc-quality-nudge__send-anyway:hover:not(:disabled)[b-x2w1kb5doz] {
    color: var(--rz-text-secondary-color);
}

.tc-quality-nudge__send-anyway:disabled[b-x2w1kb5doz] {
    opacity: 0.5;
    cursor: default;
}
/* /Components/Pages/ServiceDesk/TicketDetailDialog.razor.rz.scp.css */
/* Estilos propios de TicketDetailDialog — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Dos bloques, dos procedencias:

   1) Subconjunto VIVO de wwwroot/css/servicedesk/ticket-detail-dialog.css
      (hoja legacy de 2100 lineas): modo escritor (--writer), composer de
      comentarios, paneles de bloqueo, chips de adjuntos del composer, picker
      de watchers y assignee-avatar. El resto de aquella hoja murio con ella:
      ~75 clases sin consumidor repo-wide (esqueleto del diseño pre-tk-detail)
      y las homonimas que TaskDetailDialog define en su propia hoja
      projects/task-detail-dialog.css (regla de homonimos: cada componente se
      lleva la definicion de SU hoja; el cambio visual del drawer de tarea es
      esperado y esta reportado).
      El bloque de chrome `.rz-dialog-content:has(.tk-detail)` NO esta aqui:
      es regla de sujeto-por-encima-del-componente y sigue global en la misma
      hoja ticket-detail-dialog.css adelgazada (mismo <link>).

   2) wwwroot/css/servicedesk/tickets-detail.css INTEGRA (rediseño FASE 4+5,
      139 clases bajo .tk-scope) salvo la familia tk-state-* (lineas del
      pipeline), que es marcado del HIJO TicketPipelineProgress y va a su
      propio .razor.css (contribucion del plan, no la escribe este fichero).

   El wrapper `tk-scope tk-detail` es marcado propio del componente; sirve
   igual cuando se abre como drawer (DialogService) y como pagina completa
   (/tickets/{id} via TicketDetail): mismo componente, misma isolation.

   Llevan `::deep` (anclado en marcado propio) los sujetos sin b-hash:
     - iconos .rzi: TODOS los emite <RadzenIcon> en este componente (0 <i>
       literales, verificado);
     - img/table/p/pre/code dentro de .tk-desc, .tl-bubble y .comment-markdown:
       llegan por MarkupString (HTML sanitizado de descripciones/comentarios);
     - .diff-from/.diff-to/.diff-arr: los construye un StringBuilder en el
       code-behind (timeline de cambios);
     - `.ua` bajo .kv-watcher-stack: marcado del HIJO UserAvatar;
     - input[type="file"] del drop de adjuntos: lo emite <InputFile>;
     - .comment-mode-tabs bajo .tk-composer-area: marcado del HIJO
       RichCommentEditor.

   Las condicionales is-current / is-done / is-internal / is-ok / is-bad /
   is-pending nacen de expresiones C# en el propio .razor sobre HTML propio:
   el hash cae en el elemento, sin ::deep (regla 3: no son muertas).
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════ BLOQUE 1 — vivo de servicedesk/ticket-detail-dialog.css ═══ */

/* Writer mode — dialog transforms in place.
   Sidebar slides out, body collapses, editor fills the main area.
   No second overlay; the dialog itself is the writing surface. */

.ticket-dialog--writer .ticket-sidebar[b-36h32j3cza] {
    width: 0;
    min-width: 0;
    padding: 0;
    border: none;
    overflow: hidden;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.28s ease;
}

.ticket-dialog--writer .ticket-main[b-36h32j3cza] {
    overflow: hidden;
}

.ticket-dialog--writer .ticket-breadcrumb[b-36h32j3cza] {
    display: none;
}

.ticket-dialog--writer .ticket-body[b-36h32j3cza] {
    display: none;
}

.ticket-dialog--writer .activity-tabs[b-36h32j3cza] {
    display: none;
}

.ticket-dialog--writer .activity-section[b-36h32j3cza] {
    flex: 1;
    min-height: 0;
    margin-top: 0;
    padding-top: 0.75rem;
    border-top: none;
    display: flex;
    flex-direction: column;
}

.ticket-dialog--writer .comment-input-wrapper[b-36h32j3cza] {
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

.ticket-dialog--writer .comment-avatar[b-36h32j3cza] {
    display: none;
}

.ticket-dialog--writer .comment-input-area[b-36h32j3cza] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.comment-input-wrapper[b-36h32j3cza] {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
}

/* Comment policy banners / blocked panels.
   Amber hint shown above the input when commenting will auto-reopen the ticket. */
.comment-will-reopen-hint[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.6rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--rz-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--rz-warning) 25%, transparent);
    color: var(--rz-text-primary-color);
    font-size: 0.78rem;
    line-height: 1.35;
}

.comment-will-reopen-hint[b-36h32j3cza]  .rzi {
    color: var(--rz-warning) !important;
}

/* Locked / cancelled panels replace the input entirely. */
.comment-blocked-panel[b-36h32j3cza] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--rz-base-200);
    background: var(--rz-base-background-color);
}

.comment-blocked-panel--cancelled[b-36h32j3cza] {
    flex-direction: row;
    align-items: center;
    color: var(--rz-text-tertiary-color);
    font-size: 0.82rem;
    font-style: italic;
}

.comment-blocked-panel--locked[b-36h32j3cza] {
    background: color-mix(in srgb, var(--rz-base-200) 50%, transparent);
}

.comment-blocked-panel-head[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--rz-text-primary-color);
    font-size: 0.85rem;
}

.comment-blocked-panel-head[b-36h32j3cza]  .rzi {
    color: var(--rz-text-secondary-color) !important;
}

.comment-blocked-panel-body[b-36h32j3cza] {
    margin: 0 0 0.35rem 0;
    color: var(--rz-text-secondary-color);
    font-size: 0.78rem;
    line-height: 1.4;
}

.comment-input-area[b-36h32j3cza] {
    flex: 1;
    min-width: 0;
}

.comment-input[b-36h32j3cza] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 6px;
    font-size: 0.8125rem;
    /* Clean white input; no gray-on-gray with the main panel. */
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
    resize: none;
    min-height: 36px;
    transition: all 0.15s ease;
    font-family: inherit;
}

.comment-input:focus[b-36h32j3cza] {
    outline: none;
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 2px var(--rz-primary-lighter);
}

.comment-input[b-36h32j3cza]::placeholder {
    color: var(--rz-text-tertiary-color);
}

.comment-attachment-strip[b-36h32j3cza] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.65rem 0 0;
    padding-left: 2.625rem;
}

.comment-attachment-chip[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 180px;
    max-width: 260px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 12px;
    background: color-mix(in srgb, var(--rz-base-100) 85%, var(--rz-base-background-color));
    box-shadow: var(--rz-shadow-4);
}

.comment-attachment-thumb[b-36h32j3cza] {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 10px;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--rz-base-400) 45%, transparent);
}

.comment-attachment-meta[b-36h32j3cza] {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.comment-attachment-name[b-36h32j3cza] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rz-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comment-attachment-size[b-36h32j3cza] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.comment-attachment-remove[b-36h32j3cza] {
    border: none;
    background: transparent;
    color: var(--rz-text-tertiary-color);
    cursor: pointer;
    padding: 0.15rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.comment-attachment-remove:hover[b-36h32j3cza] {
    background: var(--rz-base-200);
    color: var(--rz-danger);
}

/* Imagenes dentro del HTML del comentario (MarkupString) → ::deep. */
.comment-markdown[b-36h32j3cza]  img {
    max-width: min(420px, 100%);
    max-height: 320px;
    border-radius: 8px;
    cursor: zoom-in;
}

/* Pasted screenshots in the ticket DESCRIPTION had no size rule at all, so a big
   capture rendered at full intrinsic size and overflowed the whole panel. Bound it
   to the same preview box as comment images; a click opens the existing lightbox
   (comment-img-preview.js now also targets .tk-desc img). max-height covers tall
   portrait captures that a width cap alone would leave enormous. */
.tk-desc[b-36h32j3cza]  img {
    max-width: min(420px, 100%);
    max-height: 320px;
    border-radius: 8px;
    cursor: zoom-in;
}

.assignee-avatar[b-36h32j3cza] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

/* Watcher picker (org members + agents). */
.watcher-picker[b-36h32j3cza] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.75rem;
    border-top: 1px solid var(--rz-base-200);
    background: var(--rz-base-50);
}

/* The Watchers row anchors the picker popover so it opens right under the
   "+" button instead of at the bottom of the side panel. */
.kv-row--watchers[b-36h32j3cza] {
    position: relative;
}

/* Floating popover for the watcher picker — anchored below the Watchers row. */
.watcher-picker-popover[b-36h32j3cza] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

/* Inside the popover the picker provides its own chrome — drop the inset
   top border/background so it doesn't double up with the popover frame. */
.watcher-picker-popover .watcher-picker[b-36h32j3cza] {
    border-top: none;
    background: transparent;
    padding-top: 0.6rem;
    max-height: 320px;
    overflow-y: auto;
}

.watcher-picker-search[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 6px;
    background: var(--rz-base-background-color);
}

.watcher-picker-search[b-36h32j3cza]  .rzi { color: var(--rz-text-tertiary-color); }

.watcher-picker-input[b-36h32j3cza] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--rz-text-primary-color);
    font-size: 0.78rem;
}

.watcher-picker-close[b-36h32j3cza] {
    background: transparent;
    border: none;
    color: var(--rz-text-tertiary-color);
    cursor: pointer;
    padding: 0.15rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
}

.watcher-picker-close:hover[b-36h32j3cza] {
    background: var(--rz-base-100);
    color: var(--rz-text-primary-color);
}

.watcher-picker-list[b-36h32j3cza] {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
    border-radius: 6px;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
}

.watcher-picker-group[b-36h32j3cza] {
    padding: 0.3rem 0.6rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-100);
    border-bottom: 1px solid var(--rz-base-200);
    position: sticky;
    top: 0;
    z-index: 1;
}

.watcher-picker-row[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rz-base-100);
    text-align: left;
    cursor: pointer;
    width: 100%;
    color: var(--rz-text-primary-color);
}

.watcher-picker-row:last-child[b-36h32j3cza] { border-bottom: none; }

.watcher-picker-row:hover[b-36h32j3cza] {
    background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
}

.watcher-picker-info[b-36h32j3cza] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.watcher-picker-name[b-36h32j3cza] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rz-text-primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.watcher-picker-email[b-36h32j3cza] {
    font-size: 0.68rem;
    color: var(--rz-text-tertiary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.watcher-picker-tag[b-36h32j3cza] {
    flex-shrink: 0;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
}

.watcher-picker-tag-agent[b-36h32j3cza] {
    color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
}

.watcher-picker-empty[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 0.5rem;
    color: var(--rz-text-tertiary-color);
    font-size: 0.73rem;
}

/* ═══════════════ BLOQUE 2 — servicedesk/tickets-detail.css (FASE 4+5) ═══════
   Hoja integra salvo la familia tk-state-* (ver nota interior).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   ServiceDesk · Tickets — Detail / Drawer (FASE 4 + 5)
   ───────────────────────────────────────────────────────────────────────────
   Chrome del drawer rediseñado: header con id violeta + pipeline progress,
   SLA banner, layout 2 columnas (main + side 320px), tabs underline para el
   timeline (Actividad / Comentarios / Cambios / Adjuntos / Tiempo), bubbles
   por kind (público / interno / cliente / sistema), diff visual en cambios y
   composer con 4 tabs. Todo bajo el scope `.tk-scope` para no contaminar el
   resto del portal — los tokens viven en `tickets-tokens.css`.
   ─────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   Layout general — drawer / página completa
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-scope.tk-detail[b-36h32j3cza] {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--tk-font-sans);
    font-size: 13px;
    min-height: 0;
}

/* Drawer header — id mono violeta + breadcrumb + close */
.tk-scope .tk-detail-head[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    flex: none;
}

.tk-scope .tk-detail-head .tk-id[b-36h32j3cza] {
    font-family: var(--tk-font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--violet);
    background: var(--violet-soft);
    border: 1px solid var(--violet-line);
    padding: 3px 9px;
    border-radius: 7px;
    letter-spacing: 0.02em;
    flex: none;
}

.tk-scope .tk-detail-head .tk-crumb[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-dim);
    font-size: 12.5px;
    flex: 1;
    min-width: 0;
}

.tk-scope .tk-detail-head .tk-crumb b[b-36h32j3cza] {
    color: var(--ink-2);
    font-weight: 500;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.tk-scope .tk-detail-head .tk-head-actions[b-36h32j3cza] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tk-scope .tk-icon-btn[b-36h32j3cza] {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tk-scope .tk-icon-btn:hover[b-36h32j3cza] {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--ink);
}

.tk-scope .tk-icon-btn[b-36h32j3cza]  .rzi {
    font-size: 16px;
}

/* Body grid — main + side, each column scrolls independently so a long
   comment thread doesn't push the sidebar (Details / Time / Dates) out
   of view, and vice versa. */
.tk-scope .tk-detail-body[b-36h32j3cza] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    background: var(--bg);
}

/* La regla movil de este bloque vive al FINAL del fichero, no aqui: estaba
   declarada por encima de `.tk-detail-main` / `.tk-detail-side`, con la misma
   especificidad, asi que la base la pisaba por orden y no hacia nada.
   Ver "Apilado en pantallas estrechas" al final. */

.tk-scope .tk-detail-main[b-36h32j3cza] {
    padding: 16px 18px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
}

.tk-scope .tk-detail-side[b-36h32j3cza] {
    padding: 14px 14px 18px;
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
}

/* Full-page variant — when embedded in /tickets/{id} or /admin/tickets/{id}
   the surface fills the viewport, so the body has a bounded height that
   the two-column independent scrolls can pin against. */
.tk-scope.tk-detail--fullpage .tk-detail-body[b-36h32j3cza] {
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Ticket header (inside main) — type icon + meta + title + pipeline + SLA
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-scope .tk-head[b-36h32j3cza] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

.tk-scope .tk-meta-row[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--ink-dim);
}

.tk-scope .tk-meta-row .tk-meta-sep[b-36h32j3cza] {
    color: var(--ink-faint);
}

.tk-scope .tk-meta-row .tk-meta-when[b-36h32j3cza] {
    margin-left: auto;
    font-family: var(--tk-font-mono);
    font-size: 11.5px;
    color: var(--ink-faint);
}

/* Escala tipográfica del detalle — una, no tres.
   El título iba a 22px y los rótulos de sección a 18px dentro de un cajón de
   1300px que ya vive DENTRO de otra pantalla. A ese tamaño el título competía
   con el <h1> de la página de debajo y obligaba a que todo lo demás creciera
   para no parecer una nota al pie. Bajado a 17/13 el panel cabe de un vistazo
   y la jerarquía la marca el peso, no el cuerpo de letra. */
.tk-scope .tk-title-row[b-36h32j3cza] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.tk-scope .tk-title-row .tk-title-ico[b-36h32j3cza] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex: none;
    background: var(--violet-soft);
    color: var(--violet);
    border: 1px solid var(--violet-line);
}

.tk-scope .tk-title-row .tk-title-ico[b-36h32j3cza]  .rzi {
    font-size: 16px;
}

.tk-scope .tk-title[b-36h32j3cza] {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.25;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.tk-scope .tk-title.tk-title--editable[b-36h32j3cza] {
    cursor: text;
}

.tk-scope .tk-title-input[b-36h32j3cza] {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: 6px 10px;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   (Aqui vivia la familia .tk-scope .tk-state-* del pipeline de estados. Es
   marcado del HIJO TicketPipelineProgress y migra a SU
   TicketPipelineProgress.razor.css — contribucion del plan, un solo escritor
   por fichero. El ancestro .tk-scope se lo sigue dando este componente.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SLA banner  ·  amber while burning, red when breached, green when settled
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-scope .tk-sla-banner[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--st-prog-line);
    background: var(--st-prog-bg);
    border-radius: 12px;
}

.tk-scope .tk-sla-banner.is-bad[b-36h32j3cza] {
    border-color: var(--st-sla-line);
    background: var(--st-sla-bg);
}

.tk-scope .tk-sla-banner.is-ok[b-36h32j3cza] {
    border-color: var(--st-done-line);
    background: var(--st-done-bg);
}

.tk-scope .tk-sla-banner .tk-sla-ico[b-36h32j3cza] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--surface);
    color: var(--st-prog);
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid var(--st-prog-line);
}

.tk-scope .tk-sla-banner.is-bad .tk-sla-ico[b-36h32j3cza] {
    color: var(--st-sla);
    border-color: var(--st-sla-line);
}

.tk-scope .tk-sla-banner.is-ok .tk-sla-ico[b-36h32j3cza] {
    color: var(--st-done);
    border-color: var(--st-done-line);
}

.tk-scope .tk-sla-banner .tk-sla-meta[b-36h32j3cza] {
    flex: 1;
    min-width: 0;
}

.tk-scope .tk-sla-banner .tk-sla-meta b[b-36h32j3cza] {
    font-size: 13.5px;
    color: var(--ink);
    font-weight: 600;
    display: block;
}

.tk-scope .tk-sla-banner .tk-sla-sub[b-36h32j3cza] {
    font-size: 12px;
    color: var(--ink-2);
    margin-top: 1px;
}

.tk-scope .tk-sla-banner .tk-sla-timer[b-36h32j3cza] {
    font-family: var(--tk-font-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--st-prog);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.tk-scope .tk-sla-banner.is-bad .tk-sla-timer[b-36h32j3cza] { color: var(--st-sla); }
.tk-scope .tk-sla-banner.is-ok  .tk-sla-timer[b-36h32j3cza] { color: var(--st-done); }

/* ═══════════════════════════════════════════════════════════════════════════
   Sections (description, AI summary, timeline, composer)
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-scope .tk-sec[b-36h32j3cza] {
    margin-bottom: 22px;
}

.tk-scope .tk-sec-h[b-36h32j3cza] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tk-scope .tk-sec-h .tk-sec-count[b-36h32j3cza] {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 5px;
    font-size: 10.5px;
    color: var(--ink-2);
    padding: 1px 6px;
    font-weight: 600;
}

.tk-scope .tk-desc[b-36h32j3cza] {
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.6;
}

.tk-scope .tk-desc[b-36h32j3cza]  p { margin: 0 0 10px; }
.tk-scope .tk-desc[b-36h32j3cza]  p:last-child { margin: 0; }

.tk-scope .tk-desc--editable[b-36h32j3cza] {
    cursor: text;
}

.tk-scope .tk-desc--empty[b-36h32j3cza] {
    color: var(--ink-faint);
    font-style: italic;
}

/* AI summary card */
.tk-scope .tk-ai[b-36h32j3cza] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--tk-ai-card-bg);
    border: 1px solid var(--violet-line);
    border-radius: 12px;
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
}

.tk-scope .tk-ai[b-36h32j3cza]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--tk-ai-rail);
}

.tk-scope .tk-ai-ico[b-36h32j3cza] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--tk-ai-ico-bg);
    color: var(--rz-on-primary);
    display: grid;
    place-items: center;
    flex: none;
}

.tk-scope .tk-ai-ico[b-36h32j3cza]  .rzi { font-size: 16px; }

.tk-scope .tk-ai-body[b-36h32j3cza] {
    flex: 1;
    min-width: 0;
}

.tk-scope .tk-ai-h[b-36h32j3cza] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tk-scope .tk-ai-text[b-36h32j3cza] {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Timeline tabs  ·  underline-style segmented control
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-scope .tl-tabs[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.tk-scope .tl-tab[b-36h32j3cza] {
    padding: 8px 14px;
    font-size: 12.5px;
    color: var(--ink-dim);
    font-weight: 500;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tk-scope .tl-tab:hover[b-36h32j3cza] {
    color: var(--ink-2);
}

.tk-scope .tl-tab[b-36h32j3cza]  .rzi {
    font-size: 14px;
}

.tk-scope .tl-tab.is-active[b-36h32j3cza] {
    color: var(--violet);
    border-color: var(--violet);
}

.tk-scope .tl-tab .tl-tab-ct[b-36h32j3cza] {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 5px;
    font-size: 10.5px;
    color: var(--ink-2);
    padding: 1px 5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tk-scope .tl-tab.is-active .tl-tab-ct[b-36h32j3cza] {
    background: var(--violet-soft);
    border-color: var(--violet-line);
    color: var(--violet);
}

/* Timeline list — vertical line with dots */
.tk-scope .tl[b-36h32j3cza] {
    position: relative;
    padding-left: 24px;
}

.tk-scope .tl[b-36h32j3cza]::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--line);
    border-radius: 1px;
}

.tk-scope .tl-item[b-36h32j3cza] {
    position: relative;
    padding: 0 0 18px 0;
}

.tk-scope .tl-item:last-child[b-36h32j3cza] {
    padding-bottom: 0;
}

.tk-scope .tl-dot[b-36h32j3cza] {
    position: absolute;
    left: -19px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--ink-faint);
    display: grid;
    place-items: center;
}

.tk-scope .tl-dot--violet[b-36h32j3cza] { border-color: var(--violet); background: var(--violet-soft); }
.tk-scope .tl-dot--green[b-36h32j3cza]  { border-color: var(--st-done); background: var(--st-done-bg); }
.tk-scope .tl-dot--amber[b-36h32j3cza]  { border-color: var(--st-prog); background: var(--st-prog-bg); }
.tk-scope .tl-dot--gray[b-36h32j3cza]   { border-color: var(--ink-faint); background: var(--surface); }

.tk-scope .tl-dot[b-36h32j3cza]  .rzi {
    font-size: 9px;
    color: currentColor;
}

.tk-scope .tl-meta[b-36h32j3cza] {
    font-size: 11.5px;
    color: var(--ink-dim);
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.tk-scope .tl-meta b[b-36h32j3cza] {
    color: var(--ink);
    font-weight: 600;
}

.tk-scope .tl-meta .tl-when[b-36h32j3cza] {
    color: var(--ink-faint);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-family: var(--tk-font-mono);
    font-size: 11px;
}

.tk-scope .tl-author-av[b-36h32j3cza] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--rz-on-primary);
    font-size: 9.5px;
    font-weight: 600;
    display: inline-grid;
    place-items: center;
    flex: none;
    text-transform: uppercase;
}

/* Bubbles — public / internal / client / system */
.tk-scope .tl-bubble[b-36h32j3cza] {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.55;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 4px;
    /* Comment HTML can include wide email payloads (inline images from
       Outlook/Graph, wide pasted tables, screenshots). Keep them inside the
       bubble: cap images, allow tables to scroll horizontally inside. */
    overflow: hidden;
    min-width: 0;
}

.tk-scope .tl-bubble[b-36h32j3cza]  img,
.tk-scope .td-description[b-36h32j3cza]  img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    cursor: zoom-in;
    /* Static skeleton background — the image paints on top of this gradient
       as soon as bytes arrive, so the placeholder is naturally hidden. No
       animation: animating background-position triggers paint/composite per
       frame for every visible <img>, which gets pricey on long threads.
       Plain rgba so we don't depend on color-mix (Chrome 111+). */
    background-color: rgba(127, 127, 127, 0.08);
    background-image: linear-gradient(110deg,
        rgba(127, 127, 127, 0.05) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(127, 127, 127, 0.05) 100%);
    min-height: 60px;
}

.tk-scope .tl-bubble[b-36h32j3cza]  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.tk-scope .tl-bubble[b-36h32j3cza]  pre,
.tk-scope .tl-bubble[b-36h32j3cza]  code {
    white-space: pre-wrap;
    word-break: break-word;
}

.tk-scope .tl-bubble--internal[b-36h32j3cza] {
    background: var(--tk-bubble-internal-bg);
    border-color: var(--tk-bubble-internal-line);
}

.tk-scope .tl-bubble--client[b-36h32j3cza] {
    background: var(--tk-bubble-client-bg);
    border-color: var(--tk-bubble-client-line);
}

.tk-scope .tl-bubble--system[b-36h32j3cza] {
    background: transparent;
    border: 0;
    padding: 2px 0;
    color: var(--ink-dim);
    font-size: 12px;
}

.tk-scope .tl-bubble-meta[b-36h32j3cza] {
    font-size: 11px;
    color: var(--ink-dim);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tk-scope .tl-bubble-meta .tl-tag[b-36h32j3cza] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tk-scope .tl-tag--internal[b-36h32j3cza] {
    background: var(--tk-bubble-internal-tag);
    color: var(--tk-bubble-internal-fg);
    border: 1px solid var(--tk-bubble-internal-line);
}

.tk-scope .tl-tag--client[b-36h32j3cza] {
    background: var(--tk-bubble-client-tag-bg);
    color: var(--tk-bubble-client-fg);
    border: 1px solid var(--tk-bubble-client-tag-line);
}

/* Diff arrows (CRÍTICO) — los spans los construye un StringBuilder en el
   code-behind (runtime, sin b-hash) → ::deep. */
.tk-scope[b-36h32j3cza]  .diff-from,
.tk-scope[b-36h32j3cza]  .diff-to {
    font-family: var(--tk-font-mono);
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 5px;
    font-weight: 500;
}

.tk-scope[b-36h32j3cza]  .diff-from {
    background: var(--tk-diff-from-bg);
    color: var(--tk-diff-from-fg);
    border: 1px solid var(--tk-diff-from-line);
    text-decoration: line-through;
    text-decoration-color: var(--tk-diff-from-strike);
}

.tk-scope[b-36h32j3cza]  .diff-to {
    background: var(--tk-diff-to-bg);
    color: var(--tk-diff-to-fg);
    border: 1px solid var(--tk-diff-to-line);
}

.tk-scope[b-36h32j3cza]  .diff-arr {
    color: var(--ink-faint);
    font-size: 12px;
    margin: 0 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Attachments tab panel  ·  rich list + drop zone
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-scope .tl-panel[b-36h32j3cza] {
    padding: 4px 0 8px;
}

.tk-scope .att-head[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 4px 12px;
}

.tk-scope .att-tot[b-36h32j3cza] {
    font-size: 12.5px;
    color: var(--ink-dim);
}

.tk-scope .att-tot b[b-36h32j3cza] {
    color: var(--ink);
    font-weight: 600;
}

.tk-scope .att-list[b-36h32j3cza] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tk-scope .att[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 10px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tk-scope .att:hover[b-36h32j3cza] {
    border-color: var(--line-strong);
    background: var(--surface-2);
}

.tk-scope .att-thumb[b-36h32j3cza] {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    color: var(--ink-dim);
    flex: none;
    overflow: hidden;
}

.tk-scope .att-thumb img[b-36h32j3cza] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tk-scope .att-thumb[b-36h32j3cza]  .rzi {
    font-size: 20px;
}

.tk-scope .att-meta[b-36h32j3cza] {
    flex: 1;
    min-width: 0;
}

.tk-scope .att-name[b-36h32j3cza] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-scope .att-sub[b-36h32j3cza] {
    font-size: 11.5px;
    color: var(--ink-dim);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.tk-scope .att-actions[b-36h32j3cza] {
    display: flex;
    gap: 2px;
}

.tk-scope .att-drop[b-36h32j3cza] {
    margin-top: 14px;
    border: 1.5px dashed var(--line-strong);
    border-radius: 10px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--ink-dim);
    font-size: 12.5px;
    background: var(--surface-2);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    cursor: pointer;
    text-align: center;
}

.tk-scope .att-drop:hover[b-36h32j3cza] {
    border-color: var(--violet);
    background: var(--violet-soft);
    color: var(--violet);
}

.tk-scope .att-drop[b-36h32j3cza]  .rzi { font-size: 22px; color: var(--ink-faint); }
.tk-scope .att-drop:hover[b-36h32j3cza]  .rzi { color: var(--violet); }

.tk-scope .att-drop[b-36h32j3cza]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.tk-scope .att-drop-wrap[b-36h32j3cza] {
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Time tab panel  ·  3 cards + entry log + empty state
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-scope .time-grid[b-36h32j3cza] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

@media (max-width: 720px) {
    .tk-scope .time-grid[b-36h32j3cza] { grid-template-columns: 1fr; }
}

.tk-scope .time-card[b-36h32j3cza] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
}

.tk-scope .time-label[b-36h32j3cza] {
    font-size: 10.5px;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 6px;
}

.tk-scope .time-num[b-36h32j3cza] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--ink);
}

.tk-scope .time-num b[b-36h32j3cza] {
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.tk-scope .time-num span[b-36h32j3cza] {
    font-size: 12px;
    color: var(--ink-dim);
}

.tk-scope .time-sub[b-36h32j3cza] {
    font-size: 11.5px;
    color: var(--ink-dim);
    margin-top: 4px;
}

.tk-scope .time-empty[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    border: 1.5px dashed var(--line-strong);
    border-radius: 10px;
    background: var(--surface-2);
}

.tk-scope .time-empty[b-36h32j3cza]  .rzi {
    font-size: 22px;
    color: var(--ink-faint);
    flex: none;
}

.tk-scope .time-empty b[b-36h32j3cza] {
    display: block;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.tk-scope .time-empty p[b-36h32j3cza] {
    margin: 0;
    color: var(--ink-dim);
    font-size: 12px;
}

.tk-scope .time-empty > div[b-36h32j3cza] {
    flex: 1;
}

.tk-scope .time-entry-list[b-36h32j3cza] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tk-scope .time-entry-row[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tk-scope .time-entry-row:hover[b-36h32j3cza] {
    border-color: var(--line-strong);
    background: var(--surface-2);
}

.tk-scope .time-entry-name[b-36h32j3cza] {
    flex: 1;
    font-size: 12.5px;
    color: var(--ink);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-scope .time-entry-hours[b-36h32j3cza] {
    font-family: var(--tk-font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--violet);
    flex: none;
}

.tk-scope .time-entry-meta[b-36h32j3cza] {
    font-size: 11px;
    color: var(--ink-dim);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Composer  ·  4 tabs (Reply, Internal, Time, Resolve)
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-scope .tk-composer[b-36h32j3cza] {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}

.tk-scope .tk-composer.is-internal[b-36h32j3cza] {
    background: var(--tk-composer-internal-bg);
    border-color: var(--tk-bubble-internal-line);
}

.tk-scope .tk-composer-tabs[b-36h32j3cza] {
    display: flex;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}

.tk-scope .tk-composer-tab[b-36h32j3cza] {
    padding: 9px 14px;
    font-size: 12.5px;
    color: var(--ink-dim);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    background: transparent;
    font-family: inherit;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.tk-scope .tk-composer-tab[b-36h32j3cza]  .rzi { font-size: 14px; }

.tk-scope .tk-composer-tab:hover[b-36h32j3cza] {
    color: var(--ink-2);
}

.tk-scope .tk-composer-tab.is-active[b-36h32j3cza] {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--violet);
}

.tk-scope .tk-composer-tab.is-active.is-internal-tab[b-36h32j3cza] {
    color: var(--tk-bubble-internal-fg);
    border-color: var(--tk-bubble-internal-fg);
    background: var(--tk-bubble-internal-bg);
}

.tk-scope .tk-composer-area[b-36h32j3cza] {
    padding: 12px 14px;
}

.tk-scope .tk-composer-internal-badge[b-36h32j3cza] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--tk-bubble-internal-tag);
    color: var(--tk-bubble-internal-fg);
    border: 1px solid var(--tk-bubble-internal-line);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.tk-scope .tk-composer-actions[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface-2);
    border-top: 1px solid var(--line-soft);
    flex-wrap: wrap;
}

.tk-scope .tk-composer-actions .right[b-36h32j3cza] {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
}

.tk-scope .tk-composer-ai-hint[b-36h32j3cza] {
    font-size: 11.5px;
    color: var(--violet);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--violet-soft);
    border: 1px solid var(--violet-line);
    cursor: pointer;
    font-family: inherit;
}

.tk-scope .tk-composer-ai-hint .rzi[b-36h32j3cza] { font-size: 12px; }

/* Time-log composer */
.tk-scope .tk-composer-time[b-36h32j3cza] {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 10px;
    align-items: end;
}

@media (max-width: 720px) {
    .tk-scope .tk-composer-time[b-36h32j3cza] { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Side panel  ·  cards (Quick actions, Asignación, Contexto, Fechas)
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-scope .tk-side-card[b-36h32j3cza] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--shadow-sm);
}

.tk-scope .tk-side-h[b-36h32j3cza] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tk-scope .qa-list[b-36h32j3cza] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.tk-scope .qa-list button[b-36h32j3cza] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 11px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    font-weight: 500;
    justify-content: flex-start;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tk-scope .qa-list button[b-36h32j3cza]  .rzi { font-size: 14px; }

.tk-scope .qa-list button:hover[b-36h32j3cza] {
    border-color: var(--violet);
    color: var(--violet);
    background: var(--violet-soft);
}

.tk-scope .qa-list button.qa-full[b-36h32j3cza] {
    grid-column: span 2;
}

.tk-scope .qa-list button.qa-violet[b-36h32j3cza] {
    background: var(--violet);
    color: var(--rz-on-primary);
    border-color: var(--violet);
}

.tk-scope .qa-list button.qa-violet:hover[b-36h32j3cza] {
    background: var(--rz-primary-dark);
    color: var(--rz-on-primary);
    border-color: var(--rz-primary-dark);
}

/* Side kv-list */
.tk-scope .kv-list[b-36h32j3cza] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.tk-scope .kv-row[b-36h32j3cza] {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    font-size: 12.5px;
}

.tk-scope .kv-row dt[b-36h32j3cza] {
    color: var(--ink-dim);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    margin: 0;
}

.tk-scope .kv-row dd[b-36h32j3cza] {
    margin: 0;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}

.tk-scope .kv-row dd .kv-val[b-36h32j3cza] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    transition: border-color 0.12s ease, background 0.12s ease;
    max-width: 100%;
}

.tk-scope .kv-row dd .kv-val.is-clickable[b-36h32j3cza] {
    cursor: pointer;
}

.tk-scope .kv-row dd .kv-val.is-clickable:hover[b-36h32j3cza] {
    border-color: var(--line-strong);
    background: var(--surface);
}

.tk-scope .kv-row dd .kv-val.is-empty[b-36h32j3cza] {
    color: var(--ink-faint);
    border-style: dashed;
}

.tk-scope .kv-row dd .kv-val .lbl[b-36h32j3cza] {
    /* Allow long labels (project names, service categories) to wrap to a
       second line instead of clipping with ellipsis. The side panel is
       320–360px wide; truncation hid useful information. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
}

.tk-scope .kv-av[b-36h32j3cza] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--rz-on-primary);
    font-size: 9.5px;
    font-weight: 600;
    display: inline-grid;
    place-items: center;
    flex: none;
    text-transform: uppercase;
}

.tk-scope .kv-watcher-stack[b-36h32j3cza] {
    display: inline-flex;
    align-items: center;
}

/* `.ua` es marcado del HIJO UserAvatar (sin b-hash) → ::deep; `.kv-av` es
   marcado propio y se acota solo. */
.tk-scope .kv-watcher-stack .kv-av[b-36h32j3cza],
.tk-scope .kv-watcher-stack[b-36h32j3cza]  .ua {
    margin-right: -4px;
    border: 1px solid var(--surface);
}

.tk-scope .kv-watcher-stack .kv-av:last-child[b-36h32j3cza],
.tk-scope .kv-watcher-stack[b-36h32j3cza]  .ua:last-child {
    margin-right: 0;
}

.tk-scope .kv-watcher-add[b-36h32j3cza] {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px dashed var(--line-strong);
    color: var(--ink-faint);
    background: transparent;
    margin-left: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    transition: border-color 0.12s ease, color 0.12s ease;
}

.tk-scope .kv-watcher-add:hover[b-36h32j3cza] {
    border-color: var(--violet);
    color: var(--violet);
}

/* No-comments / empty timeline */
.tk-scope .tl-empty[b-36h32j3cza] {
    text-align: center;
    padding: 32px 16px;
    color: var(--ink-dim);
    font-size: 13px;
}

.tk-scope .tl-empty[b-36h32j3cza]  .rzi {
    font-size: 28px;
    color: var(--ink-faint);
    display: block;
    margin-bottom: 8px;
}

/* Composer comment input wrapper — keeps the existing RichCommentEditor's
   chrome but neutralises the legacy padding so the new wrapper looks clean. */
.tk-scope .tk-composer-area[b-36h32j3cza]  .comment-input-wrapper,
.tk-scope .tk-composer-area[b-36h32j3cza]  .comment-mode-tabs,
.tk-scope .tk-composer-area[b-36h32j3cza]  .comment-input-area {
    padding: 0;
}

/* Loading state for the detail surface */
.tk-scope .tk-detail-loading[b-36h32j3cza] {
    padding: 24px;
    color: var(--ink-dim);
    text-align: center;
}

.tk-scope .tk-detail-empty[b-36h32j3cza] {
    padding: 48px 24px;
    color: var(--ink-dim);
    text-align: center;
}

.tk-scope .tk-detail-empty[b-36h32j3cza]  .rzi {
    font-size: 36px;
    color: var(--ink-faint);
    display: block;
    margin-bottom: 10px;
}

/* When hosted as full-page (not a Radzen dialog) the surface fills the parent */
.tk-scope.tk-detail--fullpage[b-36h32j3cza] {
    min-height: calc(100vh - 56px);
}

/* Pending comment ghost (optimistic post) */
.tk-scope .tl-bubble.is-pending[b-36h32j3cza] {
    opacity: 0.78;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sidebar Time card — mirrors TaskDetailDialog's time widget on the right
   sidebar so agents can register / inspect hours without opening the Time
   tab in the timeline.
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-scope .tk-side-time[b-36h32j3cza] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tk-scope .tk-side-time-row[b-36h32j3cza] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tk-scope .tk-side-time-total[b-36h32j3cza] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.tk-scope .tk-side-time-total b[b-36h32j3cza] {
    font-size: 22px;
    color: var(--ink);
    font-weight: 700;
}

.tk-scope .tk-side-time-total span[b-36h32j3cza] {
    font-size: 12px;
    color: var(--ink-dim);
    font-weight: 500;
}

.tk-scope .tk-side-time-actions[b-36h32j3cza] {
    display: inline-flex;
    gap: 4px;
}

.tk-scope .tk-icon-btn--primary[b-36h32j3cza] {
    background: var(--violet);
    color: #fff;
}

.tk-scope .tk-icon-btn--primary:hover[b-36h32j3cza] {
    background: var(--violet);
    border-color: var(--violet);
    color: #fff;
    filter: brightness(1.08);
}

.tk-scope .tk-side-time-sub[b-36h32j3cza] {
    font-size: 12px;
    color: var(--ink-dim);
}

.tk-scope .tk-side-time-list[b-36h32j3cza] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
}

.tk-scope .tk-side-time-entry[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
    min-width: 0;
}

.tk-scope .tk-side-time-entry:hover[b-36h32j3cza] {
    background: var(--surface-2);
}

.tk-scope .tk-side-time-entry .kv-av[b-36h32j3cza] {
    width: 22px;
    height: 22px;
    font-size: 10px;
    flex-shrink: 0;
}

.tk-scope .tk-side-time-entry-body[b-36h32j3cza] {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-scope .tk-side-time-entry-hours[b-36h32j3cza] {
    font-size: 12px;
    font-weight: 600;
    color: var(--violet);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.tk-scope .tk-side-time-viewall[b-36h32j3cza] {
    align-self: center;
    background: transparent;
    border: 0;
    color: var(--violet);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.tk-scope .tk-side-time-viewall:hover[b-36h32j3cza] {
    background: var(--violet-soft);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Comment actions inside a timeline bubble
   The redesign kept the bubble but dropped the affordances the code-behind
   still implements (edit / delete / reactions). Buttons stay invisible until
   the row is hovered or focused so the stream keeps its calm reading rhythm,
   but they are always in the accessibility tree and reachable by keyboard.
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-scope .tl-comment-body--editable[b-36h32j3cza] {
    cursor: text;
    border-radius: 6px;
    margin: -2px -4px;
    padding: 2px 4px;
    transition: background 0.12s ease;
}

.tk-scope .tl-comment-body--editable:hover[b-36h32j3cza] {
    background: var(--violet-soft);
}

.tk-scope .tl-comment-actions[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    min-height: 22px;
}

.tk-scope .tl-reactions[b-36h32j3cza] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.tk-scope .tl-comment-buttons[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.tk-scope .tl-comment-edited[b-36h32j3cza] {
    font-size: 11px;
    color: var(--ink-faint);
    white-space: nowrap;
}

.tk-scope .tl-reaction-chip[b-36h32j3cza],
.tk-scope .tl-comment-btn[b-36h32j3cza] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-dim);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}

.tk-scope .tl-reaction-chip:hover[b-36h32j3cza],
.tk-scope .tl-comment-btn:hover[b-36h32j3cza] {
    border-color: var(--violet);
    color: var(--violet);
    background: var(--violet-soft);
}

.tk-scope .tl-reaction-chip--active[b-36h32j3cza] {
    border-color: var(--violet);
    color: var(--violet);
    background: var(--violet-soft);
}

.tk-scope .tl-reaction-count[b-36h32j3cza] {
    font-weight: 600;
}

.tk-scope .tl-comment-btn[b-36h32j3cza] {
    padding: 2px 6px;
    border-radius: 6px;
}

.tk-scope .tl-comment-btn--danger:hover[b-36h32j3cza] {
    border-color: var(--st-sla);
    color: var(--st-sla);
    background: transparent;
}

.tk-scope .tl-comment-btn:disabled[b-36h32j3cza] {
    opacity: 0.45;
    cursor: default;
}

/* Reveal on hover/focus only — but never hide them from a keyboard user, and
   never on touch, where there is no hover to reveal anything with. */
.tk-scope .tl-comment-btn[b-36h32j3cza],
.tk-scope .tl-reaction-chip--add[b-36h32j3cza] {
    opacity: 0;
}

.tk-scope .tl-item:hover .tl-comment-btn[b-36h32j3cza],
.tk-scope .tl-item:hover .tl-reaction-chip--add[b-36h32j3cza],
.tk-scope .tl-item:focus-within .tl-comment-btn[b-36h32j3cza],
.tk-scope .tl-item:focus-within .tl-reaction-chip--add[b-36h32j3cza] {
    opacity: 1;
}

@media (hover: none) {
    .tk-scope .tl-comment-btn[b-36h32j3cza],
    .tk-scope .tl-reaction-chip--add[b-36h32j3cza] {
        opacity: 1;
    }
}

.tk-scope .tl-reaction-picker[b-36h32j3cza] {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: flex;
    gap: 2px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}

.tk-scope .tl-reaction-picker__item[b-36h32j3cza] {
    border: none;
    background: transparent;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}

.tk-scope .tl-reaction-picker__item:hover[b-36h32j3cza] {
    background: var(--violet-soft);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Attach-from-composer + upload progress in the attachments panel
   The <input type="file"> is the element that actually receives the click; the
   label around it is the visible affordance (same overlay pattern as .att-drop).
   ═══════════════════════════════════════════════════════════════════════════ */

.tk-scope .comment-attach-btn[b-36h32j3cza] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-dim);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.tk-scope .comment-attach-btn:hover[b-36h32j3cza] {
    border-color: var(--violet);
    color: var(--violet);
    background: var(--violet-soft);
}

.tk-scope .comment-attach-btn[b-36h32j3cza]  .rzi {
    font-size: 15px;
}

.tk-scope .comment-attach-btn[b-36h32j3cza]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.tk-scope .comment-attach-status[b-36h32j3cza] {
    font-size: 12px;
    color: var(--ink-faint);
}

.tk-scope .att-uploading[b-36h32j3cza] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0 0;
    font-size: 12.5px;
    color: var(--ink-dim);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Apilado en pantallas estrechas
   Tiene que ir DESPUES de `.tk-detail-main` / `.tk-detail-side`: misma
   especificidad, gana el ultimo. Declarado antes (como estaba) la base
   restauraba `height: 100%` + `overflow-y: auto`, y en un telefono el
   resultado eran dos cajas de 403 px con scroll propio, una encima de otra,
   dentro de un cajon que ya scrollea: tres barras anidadas para una ficha.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    /* La variante de pagina completa se nombra tambien: su regla
       `.tk-scope.tk-detail--fullpage .tk-detail-body { overflow: hidden }` es mas
       especifica y volveria a recortar el contenido apilado. */
    .tk-scope .tk-detail-body[b-36h32j3cza],
    .tk-scope.tk-detail--fullpage .tk-detail-body[b-36h32j3cza] {
        grid-template-columns: 1fr;
        /* Sin esto la rejilla reparte su altura definida entre las dos filas
           (`align-content: stretch` por defecto) y cada mitad se queda en 401 px
           con el contenido derramandose fuera de su caja: el cuerpo de la
           incidencia terminaba pisando la barra lateral. Las filas miden lo que
           mide su contenido y el que desplaza es el cuerpo. */
        grid-auto-rows: min-content;
        align-content: start;
        overflow: auto;
    }

    .tk-scope .tk-detail-main[b-36h32j3cza],
    .tk-scope .tk-detail-side[b-36h32j3cza] {
        height: auto;
        overflow: visible;
    }
}

@media (max-width: 720px) {
    .tk-scope .tk-detail-main[b-36h32j3cza] {
        padding: 12px 14px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .tk-scope .tk-detail-side[b-36h32j3cza] {
        padding: 12px 14px 16px;
    }

    /* Cinco pestanas con contador no caben en 414 px: en vez de romper en tres
       filas, ruedan en horizontal como cualquier barra de pestanas de movil. */
    .tk-scope .tl-tabs[b-36h32j3cza] {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tk-scope .tl-tabs[b-36h32j3cza]::-webkit-scrollbar {
        display: none;
    }

    .tk-scope .tl-tab[b-36h32j3cza] {
        flex: 0 0 auto;
    }

    /* Que envuelvan antes que desbordar por el borde derecho. */
    .tk-scope .tk-head-actions[b-36h32j3cza],
    .tk-scope .tk-composer-tabs[b-36h32j3cza] {
        flex-wrap: wrap;
    }
}

/* ── Datos que la subcategoria exigio al abrir la incidencia ─────────────
   Se leen como una ficha, no como texto libre: cada linea es una pregunta
   que el solicitante respondio, y el agente los escanea de un vistazo. */
.tk-scope .tk-req-list[b-36h32j3cza] {
    margin: 0;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 12px 16px;
}

.tk-scope .tk-req-row[b-36h32j3cza] {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line-soft);
}

.tk-scope .tk-req-row:last-child[b-36h32j3cza] {
    border-bottom: none;
}

.tk-scope .tk-req-row dt[b-36h32j3cza] {
    flex: 0 0 40%;
    max-width: 40%;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-dim);
    margin: 0;
    word-break: break-word;
}

.tk-scope .tk-req-row dd[b-36h32j3cza] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    color: var(--ink-2);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Aviso de reclasificacion: la subcategoria actual pide algo que el ticket
   nunca trajo. Solo lo ven los agentes. */
.tk-scope .tk-req-missing[b-36h32j3cza] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--rz-warning-light, #f0c36d);
    border-radius: 12px;
    background: var(--rz-warning-lighter, #fdf5e2);
    font-size: 12.5px;
    color: var(--ink-2);
}

.tk-scope .tk-req-missing[b-36h32j3cza]  .rzi {
    color: var(--rz-warning, #d18700);
    font-size: 18px;
}

.tk-scope .tk-req-missing-head[b-36h32j3cza] {
    font-weight: 600;
    margin-bottom: 4px;
}

.tk-scope .tk-req-missing ul[b-36h32j3cza] {
    margin: 0 0 8px;
    padding-left: 18px;
}

/* ── Como se abrio la incidencia (solo agentes) ──────────────────────────
   Ambar, no rojo: no es un fallo del cliente, es contexto que hasta ahora se
   perdia entre el dialogo de alta y la cola. */
.tk-scope .tk-intake[b-36h32j3cza] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid var(--rz-warning-light, #f0c36d);
    border-left-width: 3px;
    border-radius: 12px;
    background: var(--rz-warning-lighter, #fdf5e2);
    font-size: 12.5px;
    color: var(--ink-2);
}

.tk-scope .tk-intake[b-36h32j3cza]  .rzi {
    color: var(--rz-warning, #d18700);
    font-size: 18px;
}

.tk-scope .tk-intake-body[b-36h32j3cza] {
    min-width: 0;
    flex: 1 1 auto;
}

.tk-scope .tk-intake-head[b-36h32j3cza] {
    font-weight: 600;
    margin-bottom: 4px;
}

.tk-scope .tk-intake-list[b-36h32j3cza] {
    margin: 0;
    padding-left: 18px;
}

.tk-scope .tk-intake-list li[b-36h32j3cza] {
    margin-bottom: 2px;
}

.tk-scope .tk-intake-kind[b-36h32j3cza] {
    font-weight: 500;
}

.tk-scope .tk-intake-detail[b-36h32j3cza] {
    display: block;
    color: var(--ink-dim);
    font-size: 11.5px;
    word-break: break-word;
}

.tk-scope .tk-intake-foot[b-36h32j3cza] {
    margin-top: 6px;
    font-size: 11px;
    color: var(--ink-faint);
}
/* /Components/Pages/ServiceDesk/TicketList.razor.rz.scp.css */
/* Estilos propios de TicketList (/tickets) — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Dos bloques, dos procedencias:

   1) wwwroot/css/servicedesk/ticket-list.css (hoja completa). Notas:
      - El bloque kpi-card/kpi-icon/kpi-body/kpi-value/kpi-label/kpi-hint +
        accents estaba TOTALMENTE en sombra (perdia ante tickets-admin.css /
        invoices-admin.css por orden de carga) y esta pagina no lo usa (la tira
        real es tk-kpi-* de tickets-tokens.css). Decision del ejecutor: se
        MUEVE byte a byte en vez de dejarlo morir — inerte aqui igual que hoy,
        pero recuperable si el markup vuelve a citarlo.
      - Las @media de `.kpi-grid !important` NO estan aqui: solo afectaban a
        ProjectMetrics y van como contribucion a ProjectMetrics.razor.css
        (clúster projects).
      - `corp-search` y `table-responsive-wrapper` no tienen consumidor en esta
        pagina; viajan con el primario como pide el plan.
      - La superficie base de `.filter-bar` sigue en theme.css (prohibido
        tocarla): aqui solo el override de padding de la @media 576.

   2) De wwwroot/css/admin/tickets-admin.css: awaiting-dot + @keyframes
      awaiting-pulse, awaiting-col-header y ticket-row--awaiting — estas tres
      familias NO existian en la hoja propia y sin este duplicado /tickets
      pierde el punto pulsante "cliente esperando". Duplicado deliberado con
      TicketsAdmin.razor.css.

   Llevan `::deep` (anclado en el div raiz .tk-scope o en un elemento propio):
     - internos .rz-* de la grid y la filter-bar (DOM de Radzen);
     - `.ticket-grid …`: la clase va sobre el componente <RadzenDataGrid>, no
       recibe b-hash — colgroup/table/tr son DOM de Radzen;
     - `.ticket-row--kbd-selected` y `.ticket-row--awaiting`: clases inyectadas
       por OnRowRender en runtime;
     - `.awaiting-col-header`: construida con RenderTreeBuilder en code-behind;
     - `.priority-badge .material-icons`: icono emitido por <RadzenIcon>.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════ BLOQUE 1 — servicedesk/ticket-list.css ═══════════════ */

/* TicketList — enterprise corporate design (matches ProjectList). */

/* Los controles de la barra: una sola altura, un solo radio, un solo borde.
   Venían con el redondeo de píldora y el alto por defecto de Radzen, que es de
   formulario de alta —no de barra de filtros—, y cada tipo de control traía el
   suyo: la caja de texto no medía lo mismo que el desplegable, y en una fila de
   cinco eso se ve como un dentado. */
.tk-scope .filter-bar[b-3tm4qk5pfn]  .rz-textbox,
.tk-scope .filter-bar[b-3tm4qk5pfn]  .rz-dropdown,
.tk-scope .filter-bar[b-3tm4qk5pfn]  .rz-lookup {
    height: 34px;
    min-height: 34px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: none;
    font-size: 12.5px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.tk-scope .filter-bar[b-3tm4qk5pfn]  .rz-textbox:hover,
.tk-scope .filter-bar[b-3tm4qk5pfn]  .rz-dropdown:hover {
    border-color: var(--line-strong);
}

/* Un solo anillo de foco, del color de marca, en vez del contorno del navegador
   más la sombra propia de Radzen pisándose. */
.tk-scope .filter-bar[b-3tm4qk5pfn]  .rz-textbox:focus,
.tk-scope .filter-bar[b-3tm4qk5pfn]  .rz-dropdown:focus,
.tk-scope .filter-bar[b-3tm4qk5pfn]  .rz-dropdown.rz-state-focused {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px var(--violet-glow);
}

/* Los botones de la barra acompañan a los campos, no los presiden. */
.tk-scope .filter-bar[b-3tm4qk5pfn]  .rz-button {
    height: 34px;
    min-height: 34px;
    border-radius: 8px;
}

.corp-search[b-3tm4qk5pfn] {
    background: var(--rz-base-50);
    border-radius: 6px;
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--rz-base-200);
    transition: all 0.15s ease;
}

.corp-search:focus-within[b-3tm4qk5pfn] {
    border-color: var(--rz-primary);
    background: var(--rz-base-background-color);
    box-shadow: 0 0 0 3px var(--rz-primary-lighter);
}

/* KPI cards (corporate, theme-driven). */
.kpi-card[b-3tm4qk5pfn] {
    --kpi-accent: var(--rz-text-secondary-color);
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

.kpi-card:hover[b-3tm4qk5pfn] {
    border-color: var(--rz-base-300);
    box-shadow: var(--rz-shadow-1);
}

.kpi-icon[b-3tm4qk5pfn] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rz-base-100);
    color: var(--kpi-accent);
}

.kpi-icon .rzi[b-3tm4qk5pfn],
.kpi-icon .material-icons[b-3tm4qk5pfn] { font-size: 1.25rem; }

.kpi-body[b-3tm4qk5pfn] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.0625rem;
}

.kpi-value[b-3tm4qk5pfn] {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--rz-text-title-color);
    font-variant-numeric: tabular-nums;
}

.kpi-label[b-3tm4qk5pfn] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-primary-color);
}

.kpi-hint[b-3tm4qk5pfn] {
    font-size: 0.6875rem;
    color: var(--rz-text-tertiary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Accents — only apply a coloured dot next to the icon, never a full tint. */
.kpi-card--accent-primary .kpi-icon[b-3tm4qk5pfn] { color: var(--rz-primary); background: color-mix(in srgb, var(--rz-primary) 10%, var(--rz-base-100)); }
.kpi-card--accent-success .kpi-icon[b-3tm4qk5pfn] { color: var(--rz-success); background: color-mix(in srgb, var(--rz-success) 10%, var(--rz-base-100)); }
.kpi-card--accent-info    .kpi-icon[b-3tm4qk5pfn] { color: var(--rz-info);    background: color-mix(in srgb, var(--rz-info) 10%, var(--rz-base-100)); }
.kpi-card--accent-warning .kpi-icon[b-3tm4qk5pfn] { color: var(--rz-warning); background: color-mix(in srgb, var(--rz-warning) 10%, var(--rz-base-100)); }
.kpi-card--accent-danger  .kpi-icon[b-3tm4qk5pfn] { color: var(--rz-danger);  background: color-mix(in srgb, var(--rz-danger) 10%, var(--rz-base-100)); }
.kpi-card--accent-danger  .kpi-value[b-3tm4qk5pfn] { color: var(--rz-danger); }
.kpi-card--accent-neutral .kpi-icon[b-3tm4qk5pfn] { color: var(--rz-text-secondary-color); background: var(--rz-base-100); }

/* Table enhancements — compact corporate.
   ─────────────────────────────────────────────────────────────────────────────
   Solo lo que esta pagina posee de verdad; lo que coincidia con theme.css se
   borro en su dia (ver historia en el checker de scoping).
   ───────────────────────────────────────────────────────────────────────────── */

/* Rows in the ticket list open the ticket, so they advertise it. Other grids in
   the portal are not necessarily clickable, which is why this no longer applies
   to all of them. */
.tk-scope[b-3tm4qk5pfn]  .rz-datatable tr,
.tk-scope[b-3tm4qk5pfn]  .rz-data-grid tr {
    cursor: pointer;
}

/* Banda del selector de columnas, en el flujo y al mínimo.
   Se probó a sacarla del flujo para que la rejilla empezara por sus
   encabezados, y flotando sobre la esquina superior derecha SOLAPA la cabecera
   de la última columna: medido, el control cae sobre "Actualizado". Un control
   encima de un rótulo es peor que una franja de más, así que se queda en su
   fila, a la altura mínima y sin superficie propia. */
.tk-scope[b-3tm4qk5pfn]  .rz-data-grid .rz-group-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 8px;
    min-height: 0;
    background: transparent;
    border-bottom: 0;
}

.tk-scope[b-3tm4qk5pfn]  .rz-data-grid .rz-group-header .rz-column-picker .rz-dropdown {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: 4px 8px;
    min-height: 0;
    height: auto;
}

.tk-scope[b-3tm4qk5pfn]  .rz-data-grid .rz-group-header .rz-column-picker .rz-dropdown:hover {
    background: var(--surface-2);
    border-color: var(--line);
}

.tk-scope[b-3tm4qk5pfn]  .rz-data-grid .rz-group-header .rz-column-picker .rz-dropdown-label {
    font-size: 11.5px;
    color: var(--ink-dim);
}

/* Responsive: tabla con scroll horizontal en pantallas pequeñas */
.table-responsive-wrapper[b-3tm4qk5pfn] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* The min-widths force a horizontal scroll rather than let the ticket columns
   crush together on a phone. That is this list's own call — imposing it on every
   grid in the portal gave narrow screens a scrollbar on tables that fit fine. */
@media (max-width: 992px) {
    .tk-scope[b-3tm4qk5pfn]  .rz-datatable,
    .tk-scope[b-3tm4qk5pfn]  .rz-data-grid {
        min-width: 900px;
    }
}

@media (max-width: 576px) {
    .tk-scope[b-3tm4qk5pfn]  .rz-datatable,
    .tk-scope[b-3tm4qk5pfn]  .rz-data-grid {
        min-width: 700px;
    }

    .filter-bar[b-3tm4qk5pfn] {
        padding: 0.75rem 1rem;
    }
}

.ticket-number-link[b-3tm4qk5pfn] {
    color: var(--rz-primary);
    font-weight: 600;
    text-decoration: none;
}

.ticket-number-link:hover[b-3tm4qk5pfn] {
    text-decoration: underline;
}

.assignee-avatar[b-3tm4qk5pfn] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
    color: white;
}

.col-filter-checklist[b-3tm4qk5pfn] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.75rem;
    min-width: 150px;
}
.col-filter-row[b-3tm4qk5pfn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.2rem 0;
    font-size: 0.8125rem;
}
.col-filter-row:hover[b-3tm4qk5pfn] { color: var(--rz-primary); }

.priority-badge[b-3tm4qk5pfn] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.priority-badge[b-3tm4qk5pfn]  .material-icons {
    font-size: 16px;
}

.ticket-mobile-list[b-3tm4qk5pfn] {
    display: grid;
    gap: 0.875rem;
}

.ticket-mobile-card[b-3tm4qk5pfn] {
    border: 1px solid var(--rz-base-200);
    border-radius: 14px;
    background: var(--rz-base-background-color);
    box-shadow: var(--rz-shadow-4);
    overflow: hidden;
}

.ticket-mobile-card__header[b-3tm4qk5pfn],
.ticket-mobile-card__footer[b-3tm4qk5pfn],
.ticket-mobile-card__meta[b-3tm4qk5pfn],
.ticket-mobile-card__chips[b-3tm4qk5pfn],
.ticket-mobile-card__people[b-3tm4qk5pfn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ticket-mobile-card__header[b-3tm4qk5pfn],
.ticket-mobile-card__footer[b-3tm4qk5pfn] {
    justify-content: space-between;
    padding: 0.75rem 0.875rem;
}

.ticket-mobile-card__header[b-3tm4qk5pfn] {
    border-bottom: 1px solid var(--rz-base-100);
}

.ticket-mobile-card__number[b-3tm4qk5pfn] {
    color: var(--rz-primary);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ticket-mobile-card__date[b-3tm4qk5pfn] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.ticket-mobile-card__content[b-3tm4qk5pfn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.ticket-mobile-card__title[b-3tm4qk5pfn] {
    font-weight: 700;
    color: var(--rz-text-title-color);
    line-height: 1.35;
}

.ticket-mobile-card__license[b-3tm4qk5pfn] {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.ticket-mobile-card__people[b-3tm4qk5pfn] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.ticket-mobile-card__footer[b-3tm4qk5pfn] {
    border-top: 1px solid var(--rz-base-100);
}

.ticket-mobile-card__status[b-3tm4qk5pfn] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ─── FASE 7 ─ Marker para el cursor j/k de teclado ─────────────────────────
   Aplica un riel violeta a la izquierda y un fondo muy sutil en la fila
   actualmente seleccionada por los atajos j/k. El cursor solo se ve cuando
   el usuario interactúa con teclado; el hover de ratón sigue funcionando.
   La clase la inyecta OnRowRender en runtime y .ticket-grid va sobre el
   componente RadzenDataGrid → ::deep desde el .tk-scope propio.
   ────────────────────────────────────────────────────────────────────────── */
.tk-scope[b-3tm4qk5pfn]  .ticket-grid .rz-data-row.ticket-row--kbd-selected,
.tk-scope[b-3tm4qk5pfn]  .ticket-grid tr.ticket-row--kbd-selected {
    box-shadow: inset 3px 0 0 0 var(--ticket-priority-medium);
    background: var(--rz-primary-lighter) !important;
}

/* ─── El hueco blanco de 100px delante de la primera columna ────────────────
   No era relleno ni un margen: era una COLUMNA FANTASMA. Con el selector de
   columnas activo, Radzen deja de emitir el <th> y los <td> de una columna
   oculta pero SIGUE emitiendo su <col> en el <colgroup>. La tabla acaba con
   ocho <col> para siete <th> —medido en la app— y como el layout es fijo, ese
   primer <col> de 100px reserva su ancho igual: una franja en blanco pegada al
   borde izquierdo, delante de "Nº", que no pertenece a ninguna columna.

   Ignorando el colgroup, los anchos los deciden las celdas que existen de
   verdad. Se pierde el ancho declarado por columna, que aquí no hacía falta: la
   rejilla se reparte bien sola y las columnas siguen siendo redimensionables a
   mano (AllowColumnResize sigue activo).
   ────────────────────────────────────────────────────────────────────────── */
.tk-scope[b-3tm4qk5pfn]  .ticket-grid colgroup {
    display: none;
}

.tk-scope[b-3tm4qk5pfn]  .ticket-grid table {
    table-layout: auto;
}

/* ═══════════════ BLOQUE 2 — de admin/tickets-admin.css ═══════════════
   El punto pulsante "cliente esperando": estas tres familias no existian en la
   hoja propia (no son homonimas). Duplicado deliberado con
   TicketsAdmin.razor.css (regla de isolation: cada hoja con su hash).
   ═══════════════════════════════════════════════════════════════════════════ */

.awaiting-dot[b-3tm4qk5pfn] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rz-warning, #f59e0b);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--rz-warning, #f59e0b) 60%, transparent);
    animation: awaiting-pulse-b-3tm4qk5pfn 1.6s ease-in-out infinite;
}

@keyframes awaiting-pulse-b-3tm4qk5pfn {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rz-warning, #f59e0b) 60%, transparent); }
    70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--rz-warning, #f59e0b) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rz-warning, #f59e0b) 0%, transparent); }
}

/* Cabecera construida con RenderTreeBuilder en el code-behind (runtime) → ::deep. */
.tk-scope[b-3tm4qk5pfn]  .awaiting-col-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rz-text-tertiary-color);
}

/* Subtle row tint when the customer is waiting on the agent — same
   semantics as the dot so triage is consistent across views.
   Clase inyectada por OnRowRender en <tr> de RadzenDataGrid → ::deep. */
.tk-scope[b-3tm4qk5pfn]  .ticket-row--awaiting > td {
    background: color-mix(in srgb, var(--rz-warning, #f59e0b) 5%, transparent) !important;
}
/* /Components/Pages/Settings/AgentsListContent.razor.rz.scp.css */
/* Estilos propios de AgentsListContent — CSS isolation.
   Vienen de wwwroot/css/settings/agents-list-content.css (hoja entera).

   La raiz es <div class="agents-container"> propio: sin envoltorio. Llevan
   `::deep` (marcado que pinta Radzen, sin `b-{hash}`):
   - `.agents-tabs` y TODOS sus descendientes .rz-* (la clase cae sobre
     <RadzenTabs> y sus internos), anclados en .agents-container;
   - `.field-row` (clase sobre <RadzenRow>);
   - `.config-section__subtitle` (clase sobre <RadzenText>);
   - `.slider-block ::deep .rz-slider` (RadzenSlider);
   - `.subagent-tool-item ::deep .rz-chkbox` (RadzenCheckBox).

   El bloque "Legacy styles for backwards compat" (agent-card, agents-grid…)
   no tiene NINGUN consumidor en el arbol: se conserva byte a byte igualmente
   (mover, no cambiar). OJO homonimo .field-row: hoy ganaba la def de
   edit-agent-dialog.css (row-gap .75rem); scoped, este panel usa su propia
   def (.5rem) — cambio esperado por politica de homonimos.
   ───────────────────────────────────────────────────────────────────────────── */

.agents-container[b-v5gh6t3bvr] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0;
}
.agents-container[b-v5gh6t3bvr]  .agents-tabs {
    border-bottom: 1px solid var(--rz-border-color);
    min-width: 0;
}
.agents-container[b-v5gh6t3bvr]  .agents-tabs .rz-tabview-nav,
.agents-container[b-v5gh6t3bvr]  .agents-tabs .rz-tabs-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.125rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding-right: 0.25rem;
}
.agents-container[b-v5gh6t3bvr]  .agents-tabs .rz-tabview-nav li,
.agents-container[b-v5gh6t3bvr]  .agents-tabs .rz-tabs-nav li,
.agents-container[b-v5gh6t3bvr]  .agents-tabs .rz-tabview-nav .rz-tabview-selected,
.agents-container[b-v5gh6t3bvr]  .agents-tabs .rz-tabs-nav .rz-tab {
    flex: 0 0 auto;
    min-width: max-content;
}
.agents-container[b-v5gh6t3bvr]  .agents-tabs .rz-tabview-nav-link,
.agents-container[b-v5gh6t3bvr]  .agents-tabs .rz-tab-link {
    white-space: nowrap;
    padding: 0.625rem 0.75rem !important;
}
.agents-container[b-v5gh6t3bvr]  .agents-tabs .rz-tabview-title,
.agents-container[b-v5gh6t3bvr]  .agents-tabs .rz-tab-link {
    font-size: 0.72rem !important;
    letter-spacing: 0.08em;
}
.agents-container[b-v5gh6t3bvr]  .agents-tabs .rzi,
.agents-container[b-v5gh6t3bvr]  .agents-tabs .rz-tab-link .rzi {
    font-size: 0.95rem !important;
}
.orchestrator-section[b-v5gh6t3bvr] {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
}
.orchestrator-header[b-v5gh6t3bvr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--rz-base-100);
    border-radius: 8px;
    border: 1px solid var(--rz-border-color);
}
.orchestrator-avatar[b-v5gh6t3bvr] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    flex-shrink: 0;
}
.config-section[b-v5gh6t3bvr] {
    margin-bottom: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--rz-base-100);
    border-radius: 8px;
    border: 1px solid var(--rz-border-color);
}
.config-section__header[b-v5gh6t3bvr] {
    margin-bottom: 0.5rem;
}
.agents-container[b-v5gh6t3bvr]  .config-section__subtitle {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}
.agents-container[b-v5gh6t3bvr]  .field-row { row-gap: 0.5rem; }
.model-params-grid[b-v5gh6t3bvr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.slider-block[b-v5gh6t3bvr] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
    align-items: center;
}
.slider-block__label[b-v5gh6t3bvr] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    font-weight: 500;
}
.slider-block__value[b-v5gh6t3bvr] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rz-primary);
    font-variant-numeric: tabular-nums;
}
.slider-block[b-v5gh6t3bvr]  .rz-slider {
    grid-column: 1 / -1;
    width: 100%;
}
.reasoning-params-grid[b-v5gh6t3bvr] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0.75rem; background: var(--rz-base-200); border-radius: var(--rz-border-radius); }

/* Subagents tab */
.subagents-container[b-v5gh6t3bvr] {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
}
.subagent-row[b-v5gh6t3bvr] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    transition: all 0.15s ease;
}
.subagent-row:hover[b-v5gh6t3bvr] {
    border-color: var(--rz-primary-lighter);
}
.subagent-icon[b-v5gh6t3bvr] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
}
.subagent-info[b-v5gh6t3bvr] {
    flex: 1;
    min-width: 0;
}
.subagent-name[b-v5gh6t3bvr] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--rz-text-color);
}
.subagent-desc[b-v5gh6t3bvr] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.subagent-controls[b-v5gh6t3bvr] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}
.subagent-tools[b-v5gh6t3bvr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--rz-base-100);
    border-radius: 6px;
    border: 1px solid var(--rz-border-color);
    min-width: 200px;
}
.subagent-tool-item[b-v5gh6t3bvr] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}
.subagent-tool-item[b-v5gh6t3bvr]  .rz-chkbox {
    --rz-checkbox-size: 16px;
}
.subagent-tool-item label[b-v5gh6t3bvr] {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* Legacy styles for backwards compat */
.agents-header[b-v5gh6t3bvr] {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 1rem;
}
.agents-grid[b-v5gh6t3bvr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    overflow-y: auto;
    flex: 1;
    padding: 0.25rem;
}
.agent-card[b-v5gh6t3bvr] {
    display: flex;
    flex-direction: column;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.agent-card:hover[b-v5gh6t3bvr] {
    border-color: var(--rz-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.agent-card-header[b-v5gh6t3bvr] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.agent-avatar[b-v5gh6t3bvr] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    flex-shrink: 0;
}
.agent-info[b-v5gh6t3bvr] {
    flex: 1;
    min-width: 0;
}
.agent-name[b-v5gh6t3bvr] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--rz-text-color);
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agent-tagline[b-v5gh6t3bvr] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agent-description[b-v5gh6t3bvr] {
    font-size: 0.8rem;
    color: var(--rz-text-tertiary-color);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.75rem;
    flex: 1;
}
.agent-footer[b-v5gh6t3bvr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.agent-badges[b-v5gh6t3bvr] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.agent-actions[b-v5gh6t3bvr] {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.agent-card:hover .agent-actions[b-v5gh6t3bvr] {
    opacity: 1;
}
.agents-empty[b-v5gh6t3bvr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--rz-text-secondary-color);
}
.agents-loading[b-v5gh6t3bvr] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}
/* /Components/Pages/Settings/EditAgentDialog.razor.rz.scp.css */
/* Estilos propios de EditAgentDialog — CSS isolation.
   Vienen de wwwroot/css/settings/edit-agent-dialog.css.

   `agent-dialog-shell` estaba en el <RadzenStack> del formulario (dentro de
   RadzenTemplateForm, sin HTML propio en la raiz): de ahi el <div> envoltorio
   nuevo en el marcado, que sostiene la regla bare (max-width) y hace de ancla.

   Llevan `::deep` desde ese ancla:
   - `.field-row` (clase sobre <RadzenRow>);
   - `.agent-section__subtitle` (clase sobre <RadzenText>);
   - `.simple-agent-icon` (clase sobre <RadzenIcon>).
   El resto (agent-section, grids, simple-agent-card) es HTML propio.

   OJO: la def global de .field-row de esta hoja era la que ganaba en todo el
   portal; EditModelDeploymentDialog la recibia por leak y recibe su copia via
   contribution (ver salida del migrador), no desde aqui.
   ───────────────────────────────────────────────────────────────────────────── */

.agent-dialog-shell[b-uftdtxi54m] { max-width: 880px; margin: 0 auto; }
.agent-section[b-uftdtxi54m] { margin-bottom: 1.5rem; padding: 1rem; background: var(--rz-base-100); border-radius: 8px; border: 1px solid var(--rz-border-color); }
.agent-section__header[b-uftdtxi54m] { margin-bottom: 0.75rem; }
.agent-dialog-shell[b-uftdtxi54m]  .agent-section__subtitle { font-size: 0.85rem; color: var(--rz-text-secondary-color); }
.agent-dialog-shell[b-uftdtxi54m]  .field-row { row-gap: 0.75rem; }
.model-params-grid[b-uftdtxi54m] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.reasoning-params-grid[b-uftdtxi54m] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0.75rem; background: var(--rz-base-200); border-radius: var(--rz-border-radius); }
.simple-agent-card[b-uftdtxi54m] { text-align: center; padding: 2rem 1rem; }
.agent-dialog-shell[b-uftdtxi54m]  .simple-agent-icon { font-size: 3rem; margin-bottom: 1rem; color: var(--rz-primary); }
/* /Components/Pages/Settings/EditModelDeploymentDialog.razor.rz.scp.css */
.overview-card[b-1yaukeo4oo] {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    border-top-width: 4px;
    border-top-style: solid;
    padding-top: 0.35rem;
}

.overview-card .rz-text-caption[b-1yaukeo4oo],
.overview-card .text-muted[b-1yaukeo4oo] {
    position: relative;
    z-index: 1;
}

.overview-card .rz-text-h6[b-1yaukeo4oo],
.overview-card .rz-text-h5[b-1yaukeo4oo] {
    position: relative;
    z-index: 1;
    color: var(--rz-text-title-color);
    letter-spacing: -0.02em;
}

/* ── Contribución cross-cluster (de settings/edit-agent-dialog.css) aplicada por el orquestador ── */
.deployment-dialog-host[b-1yaukeo4oo]  .field-row { row-gap: 0.75rem; }
/* /Components/Pages/Settings/EmailSettingsContent.razor.rz.scp.css */
/* Estilos propios de EmailSettingsContent — CSS isolation.
   Vienen de wwwroot/css/settings/email-settings-content.css (hoja entera).

   La raiz era el propio <RadzenTabs class="email-settings-tabs"> (sin HTML
   propio): de ahi el <div class="email-settings-content"> envoltorio nuevo en
   el marcado — sin regla propia, solo ancla del `b-{hash}`.

   Llevan `::deep`:
   - el compuesto `.email-settings-tabs .provider-section` (RadzenTabs +
     RadzenCard), anclado en el envoltorio. Este compuesto pisa a proposito
     (background y border) lo que aportaba la def base de
     email-settings-dialog.css — por eso no hace falta duplicar la base aqui;
   - `.email-module-title` (clase sobre <RadzenText>), anclado en su
     .email-module-card propio.
   email-module-grid/card son divs propios dentro de los templates de las
   tabs (compilan con el hash del padre) y se acotan solos.
   ───────────────────────────────────────────────────────────────────────────── */

.email-settings-content[b-tjdy6pydct]  .email-settings-tabs .provider-section {
    background: linear-gradient(135deg, var(--rz-primary-light) 0%, transparent 100%);
    border: none;
}

.email-module-grid[b-tjdy6pydct] {
    display: grid;
    gap: 1rem;
}

.email-module-card[b-tjdy6pydct] {
    padding: 1rem;
    border: 1px solid var(--rz-border-color);
    border-radius: var(--rz-border-radius);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.02), transparent);
}

.email-module-card[b-tjdy6pydct]  .email-module-title {
    margin-bottom: 0.25rem;
}
/* /Components/Pages/Settings/EmailSettingsDialog.razor.rz.scp.css */
/* Estilos propios de EmailSettingsDialog — CSS isolation.
   Vienen de wwwroot/css/settings/email-settings-dialog.css (hoja entera).

   La raiz era RadzenBreadCrumb + RadzenTabs (sin HTML propio): de ahi el
   <div class="email-settings-dialog"> envoltorio nuevo en el marcado — sin
   regla propia, solo ancla del `b-{hash}`.

   Llevan `::deep` desde ese ancla (clases sobre componentes Radzen):
   - `.provider-section` y `.acs-management-panel` (RadzenCard);
   - `.acs-management-title` (RadzenText);
   - `.acs-management-button` (RadzenButton).
   Los divs acs-management-badge/chip-row/chip estan escritos dentro de
   fragments de este mismo dialogo: llevan hash y se acotan solos.
   El .provider-section del EmailSettingsContent queda cubierto por su regla
   compuesta propia (ver EmailSettingsContent.razor.css).
   ───────────────────────────────────────────────────────────────────────────── */

.email-settings-dialog[b-nzudhnqacq]  .provider-section {
    background: linear-gradient(135deg, var(--rz-primary-light) 0%, transparent 100%);
    border: 1px solid color-mix(in srgb, var(--rz-primary) 14%, var(--rz-base-background-color));
}

.email-settings-dialog[b-nzudhnqacq]  .acs-management-panel {
    background: linear-gradient(180deg, color-mix(in srgb, var(--rz-primary) 5%, white) 0%, white 100%);
    border: 1px solid color-mix(in srgb, var(--rz-primary) 16%, var(--rz-base-background-color));
    box-shadow: none;
    border-radius: 16px;
}

.email-settings-dialog[b-nzudhnqacq]  .acs-management-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--rz-text-title-color);
}

.acs-management-badge[b-nzudhnqacq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.8rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-primary) 10%, white);
    color: var(--rz-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.acs-management-chip-row[b-nzudhnqacq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.acs-management-chip[b-nzudhnqacq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-primary) 6%, white);
    color: var(--rz-text-secondary-color);
    font-size: 0.82rem;
    font-weight: 600;
}

.email-settings-dialog[b-nzudhnqacq]  .acs-management-button {
    min-height: 3.25rem;
    justify-content: center;
    font-weight: 600;
    white-space: normal;
    text-align: center;
    text-transform: none;
    line-height: 1.2;
    padding: 0.75rem 1rem;
    overflow: visible;
}
/* /Components/Pages/Settings/GlobalSettingsDialog.razor.rz.scp.css */
/* Estilos propios de GlobalSettingsDialog — CSS isolation.
   Vienen de wwwroot/css/settings/module-toggles.css (hoja entera,
   monoconsumidor verificado).

   Todas las tarjetas module-toggle-* son divs propios de este marcado, con
   .is-on interpolada en C# sobre esos mismos divs (llevan `b-{hash}`): se
   acotan solas. Solo el icono necesita `::deep`:
   `.module-toggle-icon ::deep .rzi` (RadzenIcon).
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   MODULE TOGGLE CARDS — "Módulos" section of GlobalSettingsDialog
   Same visual family as settings-card.css. Every color derives from Radzen
   theme tokens (--rz-*) so light/dark themes flip automatically.
   ═══════════════════════════════════════════════════════════════════════════ */

.module-toggle-grid[b-9h7091z98s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
}

.module-toggle-card[b-9h7091z98s] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.module-toggle-card:hover[b-9h7091z98s] {
    border-color: color-mix(in srgb, var(--rz-primary) 35%, var(--rz-border-color));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ON state — accent border + soft primary tint, icon lights up */
.module-toggle-card.is-on[b-9h7091z98s] {
    border-color: color-mix(in srgb, var(--rz-primary) 45%, transparent);
    background: color-mix(in srgb, var(--rz-primary) 6%, var(--rz-base-background-color));
}

.module-toggle-icon[b-9h7091z98s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.module-toggle-icon[b-9h7091z98s]  .rzi {
    font-size: 1.25rem;
}

.module-toggle-card.is-on .module-toggle-icon[b-9h7091z98s] {
    background: color-mix(in srgb, var(--rz-primary) 14%, transparent);
    color: var(--rz-primary);
}

.module-toggle-text[b-9h7091z98s] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.module-toggle-name[b-9h7091z98s] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--rz-text-color);
}

.module-toggle-desc[b-9h7091z98s] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.module-toggle-switch[b-9h7091z98s] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Subtle legal-prerequisite line under the description of some RRHH feature cards
   ("Requiere: convenio colectivo — L5", etc.). Informative, never blocking. */
.module-toggle-req[b-9h7091z98s] {
    font-size: 0.7rem;
    font-style: italic;
    color: var(--rz-text-disabled-color, var(--rz-text-secondary-color));
    line-height: 1.3;
}
/* /Components/Pages/Settings/ManageModelsDialog.razor.rz.scp.css */
/* Estilos propios de ManageModelsDialog — CSS isolation.
   Vienen de wwwroot/css/settings/manage-models-dialog.css (hoja entera,
   monoconsumidor verificado: todas las clases mm-* viven en este marcado).

   La raiz es <div class="mm-dialog"> propio: sin envoltorio. Las variantes
   dinamicas (mm-provider-chip.azureopenai…, mm-cap.reasoning…) se interpolan
   en C# sobre spans propios con hash y se acotan solas.

   Llevan `::deep` desde el ancla .mm-dialog:
   - `.mm-search` (clase sobre <RadzenTextBox>);
   - `.mm-empty__icon` (clase sobre <RadzenIcon>).
   ───────────────────────────────────────────────────────────────────────────── */

.mm-dialog[b-bg8g4j97wo] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1rem;
    min-height: 420px;
}

.mm-toolbar[b-bg8g4j97wo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.875rem;
    background: var(--rz-base-50);
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
}
.mm-toolbar__left[b-bg8g4j97wo] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex: 1 1 320px;
    min-width: 0;
}
.mm-toolbar__right[b-bg8g4j97wo] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.mm-dialog[b-bg8g4j97wo]  .mm-search {
    flex: 1;
    min-width: 180px;
    max-width: 320px;
}
.mm-toggle[b-bg8g4j97wo] {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    color: var(--rz-text-secondary-color);
    font-size: 0.8125rem;
    white-space: nowrap;
    cursor: pointer;
}

.mm-grid[b-bg8g4j97wo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.75rem;
    flex: 1;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.mm-card[b-bg8g4j97wo] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 10px;
    padding: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mm-card:hover[b-bg8g4j97wo] {
    border-color: var(--rz-primary-lighter);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.mm-card--inactive[b-bg8g4j97wo] {
    opacity: 0.58;
    background: var(--rz-base-50);
}

.mm-card__head[b-bg8g4j97wo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}
.mm-card__head-left[b-bg8g4j97wo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}
.mm-provider-chip[b-bg8g4j97wo] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.mm-provider-chip.azureopenai[b-bg8g4j97wo] { background: #dbeafe; color: #1d4ed8; }
.mm-provider-chip.azureaihub[b-bg8g4j97wo]  { background: #cffafe; color: #0e7490; }
.mm-provider-chip.claude[b-bg8g4j97wo]      { background: #fef3c7; color: #b45309; }
.mm-provider-chip.other[b-bg8g4j97wo]       { background: var(--rz-base-200); color: var(--rz-text-color); }

.mm-card__actions[b-bg8g4j97wo] {
    display: flex;
    gap: 0.125rem;
    opacity: 0.65;
    transition: opacity 0.15s ease;
}
.mm-card:hover .mm-card__actions[b-bg8g4j97wo] { opacity: 1; }

.mm-card__name[b-bg8g4j97wo] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mm-card__model[b-bg8g4j97wo] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    display: flex;
    gap: 0.375rem;
    align-items: center;
    flex-wrap: wrap;
}
.mm-card__version[b-bg8g4j97wo] {
    font-size: 0.7rem;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    background: var(--rz-base-100);
    color: var(--rz-text-tertiary-color);
    font-family: var(--rz-text-mono-font-family, ui-monospace, monospace);
}

.mm-caps[b-bg8g4j97wo] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    min-height: 22px;
}
.mm-cap[b-bg8g4j97wo] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    background: var(--rz-base-100);
    color: var(--rz-text-secondary-color);
}
.mm-cap.reasoning[b-bg8g4j97wo] { background: #e0f2fe; color: #0369a1; }
.mm-cap.image[b-bg8g4j97wo]     { background: #fce7f3; color: #be185d; }
.mm-cap.video[b-bg8g4j97wo]     { background: #f3e8ff; color: #7e22ce; }

.mm-card__foot[b-bg8g4j97wo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.625rem;
    border-top: 1px dashed var(--rz-border-color);
    gap: 0.5rem;
}
.mm-assigned[b-bg8g4j97wo] {
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}
.mm-assigned__name[b-bg8g4j97wo] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--rz-primary);
    font-weight: 500;
}
.mm-assigned__empty[b-bg8g4j97wo] { color: var(--rz-text-tertiary-color); font-style: italic; }

.mm-empty[b-bg8g4j97wo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--rz-text-secondary-color);
    text-align: center;
    min-height: 320px;
}
.mm-dialog[b-bg8g4j97wo]  .mm-empty__icon {
    font-size: 2.5rem;
    opacity: 0.4;
}
.mm-empty__title[b-bg8g4j97wo] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--rz-text-color);
}
.mm-empty__hint[b-bg8g4j97wo] {
    max-width: 360px;
    font-size: 0.85rem;
    line-height: 1.4;
}

.mm-footer[b-bg8g4j97wo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rz-border-color);
    font-size: 0.78rem;
    color: var(--rz-text-tertiary-color);
}
/* /Components/Pages/Settings/SettingsCard.razor.rz.scp.css */
/* Estilos propios de SettingsCard — CSS isolation.
   Vienen de wwwroot/css/settings/settings-card.css (hoja entera,
   monoconsumidor).

   La raiz es <div class="settings-card"> propio: sin envoltorio. Llevan
   `::deep` (RadzenIcon no recibe el `b-{hash}`):
   - `.settings-card-icon ::deep .rzi`;
   - `.settings-card ::deep .settings-card-arrow`, incluida la variante
     `:hover` (la flecha es un <RadzenIcon class="settings-card-arrow">).
   ───────────────────────────────────────────────────────────────────────────── */

.settings-card[b-0uuilfqcwb] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-card:hover[b-0uuilfqcwb] {
    background: var(--rz-base-200);
    border-color: var(--rz-primary-light);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.settings-card:active[b-0uuilfqcwb] {
    transform: translateX(2px);
}

.settings-card-icon[b-0uuilfqcwb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    color: white;
    flex-shrink: 0;
}

.settings-card-icon[b-0uuilfqcwb]  .rzi {
    font-size: 1.25rem;
}

.settings-card-content[b-0uuilfqcwb] {
    flex: 1;
    min-width: 0;
}

.settings-card-title[b-0uuilfqcwb] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--rz-text-color);
    margin-bottom: 0.25rem;
}

.settings-card-description[b-0uuilfqcwb] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.settings-card[b-0uuilfqcwb]  .settings-card-arrow {
    color: var(--rz-text-tertiary-color);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.settings-card:hover[b-0uuilfqcwb]  .settings-card-arrow {
    opacity: 1;
}
/* /Components/Pages/Settings/SettingsSidebar.razor.rz.scp.css */
/* Estilos propios de SettingsSidebar — CSS isolation.
   Vienen de wwwroot/css/settings/settings-sidebar.css (hoja entera).

   La raiz es <div class="settings-panel"> propio (con .expanded dinamica en
   C# sobre ese mismo div): sin envoltorio. Llevan `::deep` desde ese ancla
   (clases sobre componentes Radzen):
   - `.header-icon` (RadzenIcon del engranaje);
   - `.close-button` (RadzenButton);
   - `.highlight-card` (RadzenCard; la hoja traia el bloque DUPLICADO y se
     conservan ambos byte a byte, +:hover).
   `.link-fake` va sobre <span> propios y se acota solo.

   OJO leak deliberadamente NO compensado: el div.settings-panel de
   SuperSheet/Panels/SettingsPanel.razor heredaba de la hoja global el
   position:fixed/translateX(100%)/width:700px de drawer; al scopar deja de
   recibirlo y queda con su <style> inline (probable arreglo de un leak).
   ───────────────────────────────────────────────────────────────────────────── */

.settings-panel[b-ohexkhob79] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 700px;
    max-width: 90vw;
    background: var(--rz-base-background-color);
    border-left: 1px solid var(--rz-border-color);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.settings-panel.expanded[b-ohexkhob79] {
    transform: translateX(0);
    box-shadow: -8px 0 24px rgba(0,0,0,0.12);
}

.settings-panel-header[b-ohexkhob79] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem;
    border-bottom: 1px solid var(--rz-border-color);
    background: linear-gradient(135deg, var(--rz-primary-lighter) 0%, transparent 100%);
}

.header-content[b-ohexkhob79] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.settings-panel[b-ohexkhob79]  .header-icon {
    font-size: 2rem;
    color: var(--rz-primary);
    background: var(--rz-base-background-color);
    padding: 0.75rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.header-text[b-ohexkhob79] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.settings-panel[b-ohexkhob79]  .close-button {
    margin-top: -0.5rem;
    margin-right: -0.5rem;
}

.settings-panel-content[b-ohexkhob79] {
    padding: 1rem 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.settings-panel[b-ohexkhob79]  .highlight-card {
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HIGHLIGHT CARDS - Estilo Reporbia
   ═══════════════════════════════════════════════════════════════════════════ */
.settings-panel[b-ohexkhob79]  .highlight-card {
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.settings-panel[b-ohexkhob79]  .highlight-card:hover {
    background-color: var(--rz-menu-item-hover-background-color);
    transform: scale(1.02);
}

/* Links estilo Reporbia */
.link-fake[b-ohexkhob79] {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.link-fake:hover[b-ohexkhob79] {
    opacity: 0.8;
    text-decoration: underline;
}
/* /Components/Pages/Setup/SetupWizard.razor.rz.scp.css */
/* Estilos propios de SetupWizard (/setup) — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/pages/setup-wizard.css, que a su vez nació del <style>
   inline original de SetupWizard.razor: CSS de UNA página con root plano
   .wizard-container (los tokens --wz-* declarados sobre él viajan tal cual) y
   marcado HTML artesanal → migración directa, sin envoltorio.

   OJO: este fichero YA contenía reglas ::deep para los hijos Radzen
   (.rz-textbox/.rz-password/.rz-dropdown/.rz-fileupload/.rz-switch). En CSS
   global eran reglas MUERTAS (::deep no significa nada fuera de isolation);
   al compilar como isolation SE ACTIVAN — es el estilo que el wizard siempre
   quiso tener (inputs/dropdowns con fondo/borde/radio del wizard). Señalado
   como riesgo visual controlado en la migración, no es un cambio de
   declaraciones.

   Homónimos que este fichero pierde al aislarse (cambio esperado, regla de
   homónimos): section-title/status-badge recuperan su def propia en /setup;
   error-message/error-actions dejan de ganar en /notfound; la base de
   .error-icon de access-denied.css ya no llega mezclada al panel de error.
   ───────────────────────────────────────────────────────────────────────────── */

/* SetupWizard - extracted from inline <style> block. @@ Razor escapes
   were converted back to single @ for static CSS. */

/* The wizard's tokens live on the wizard, not on :root. Nothing outside
   SetupWizard.razor reads a --wz-* variable, and .wizard-container is that
   page's single root element, so declaring them here reaches every consumer
   (including .wizard-container's own background, which resolves custom
   properties declared on the element itself) without publishing eight names
   into the global namespace of a portal the wizard is not even part of. */
.wizard-container[b-jbq9dk95ty] {
    /* Map wizard tokens to Radzen/theme.css variables */
    --wz-bg: var(--rz-body-background-color, #0f0f1a);
    --wz-card: var(--rz-base-background-color, #111827);
    --wz-border: var(--rz-base-200, rgba(0, 0, 0, 0.12));
    --wz-accent: var(--rz-primary, #6366f1);
    --wz-accent2: var(--rz-primary-light, var(--rz-info, #8b5cf6));
    --wz-success: var(--rz-success, #10b981);
    --wz-text: var(--rz-text-color, #f1f5f9);
    --wz-muted: var(--rz-text-secondary-color, #94a3b8);
    --wz-input-bg: var(--rz-base-100, rgba(30, 30, 50, 0.8));
}

.wizard-container[b-jbq9dk95ty] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(ellipse at 20% 0%, var(--rz-info-lighter, rgba(139, 92, 246, 0.1)) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, var(--rz-primary-lighter, rgba(99, 102, 241, 0.1)) 0%, transparent 50%),
        var(--wz-bg);
}

.wizard-card[b-jbq9dk95ty] {
    width: 100%;
    max-width: 900px;
    background: var(--wz-card);
    border: 1px solid var(--wz-border);
    border-radius: 16px;
    box-shadow: var(--rz-shadow-xl, 0 25px 80px rgba(0, 0, 0, 0.2));
    overflow: hidden;
}

.wizard-header[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--rz-layout-body-background-color, rgba(0, 0, 0, 0.04));
    border-bottom: 1px solid var(--wz-border);
}

.wizard-card .brand[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--wz-text);
}

.wizard-card .brand-icon[b-jbq9dk95ty] {
    width: 28px;
    height: 28px;
    color: var(--wz-accent);
}

.wizard-card .brand-icon svg[b-jbq9dk95ty] {
    width: 100%;
    height: 100%;
}

.step-pills[b-jbq9dk95ty] {
    display: flex;
    gap: 0.5rem;
}

.step-pills .pill[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: var(--wz-input-bg);
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--wz-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.step-pills .pill:hover[b-jbq9dk95ty] {
    border-color: var(--wz-border);
}

.step-pills .pill.active[b-jbq9dk95ty] {
    background: linear-gradient(135deg, var(--wz-accent), var(--wz-accent2));
    color: white;
    border-color: transparent;
}

.step-pills .pill.done[b-jbq9dk95ty] {
    background: rgba(16, 185, 129, 0.2);
    color: var(--wz-success);
    border-color: rgba(16, 185, 129, 0.3);
}

.step-pills .pill-num[b-jbq9dk95ty] {
    font-weight: 600;
}

.step-pills .pill-text[b-jbq9dk95ty] {
    display: none;
}

@media (min-width: 640px) {
    .step-pills .pill-text[b-jbq9dk95ty] {
        display: inline;
    }
}

.wizard-body[b-jbq9dk95ty] {
    padding: 1.5rem;
    min-height: 340px;
}

.step-panel[b-jbq9dk95ty] {
    animation: wizard-fadeUp-b-jbq9dk95ty 0.3s ease;
}

@keyframes wizard-fadeUp-b-jbq9dk95ty {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-panel h2[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--wz-text);
    margin: 0 0 0.25rem;
}

.step-panel h2 i[b-jbq9dk95ty] {
    color: var(--wz-accent);
}

.step-panel h3[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wz-text);
    margin: 1.5rem 0 0.75rem;
}

.step-panel h3 i[b-jbq9dk95ty] {
    color: var(--wz-accent);
    font-size: 0.85rem;
}

.step-desc[b-jbq9dk95ty] {
    color: var(--wz-muted);
    font-size: 0.85rem;
    margin: 0 0 1.25rem;
}

.wizard-card .form-row[b-jbq9dk95ty] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.wizard-card .form-field[b-jbq9dk95ty] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wizard-card .form-field.full[b-jbq9dk95ty] {
    grid-column: 1 / -1;
}

.wizard-card .form-field label[b-jbq9dk95ty] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--wz-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wizard-card .form-field small[b-jbq9dk95ty] {
    font-size: 0.7rem;
    color: var(--wz-muted);
    opacity: 0.7;
}

.wizard-card[b-jbq9dk95ty]  .w-full {
    width: 100%;
}

.w-full[b-jbq9dk95ty]  .rz-textbox,
.w-full[b-jbq9dk95ty]  .rz-password,
.w-full[b-jbq9dk95ty]  .rz-dropdown {
    width: 100%;
    background: var(--wz-input-bg) !important;
    border: 1px solid var(--wz-border) !important;
    border-radius: 8px !important;
    color: var(--wz-text) !important;
    padding: 0.6rem 0.75rem !important;
}

.w-full[b-jbq9dk95ty]  .rz-textbox:focus,
.w-full[b-jbq9dk95ty]  .rz-password:focus {
    border-color: var(--wz-accent) !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2) !important;
}

.color-row[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.color-hex[b-jbq9dk95ty] {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--wz-muted);
}

.step-icon-large.company-icon[b-jbq9dk95ty] {
    background: linear-gradient(135deg, #10b981, #059669);
}

.section-block[b-jbq9dk95ty] {
    margin-bottom: 1.25rem;
}

.section-block:last-child[b-jbq9dk95ty] {
    margin-bottom: 0;
}

.section-title[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wz-text);
    margin: 0 0 0.75rem;
}

.section-title i[b-jbq9dk95ty] {
    color: var(--wz-accent);
    font-size: 0.9rem;
}

.colors-grid[b-jbq9dk95ty] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.color-card[b-jbq9dk95ty] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.color-card label[b-jbq9dk95ty] {
    font-size: 0.75rem;
    color: var(--wz-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.color-picker-wrap[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--rz-base-50, #F8FAFC);
    border-radius: 8px;
}

@media (max-width: 640px) {
    .colors-grid[b-jbq9dk95ty] {
        grid-template-columns: 1fr;
    }
}

.upload-row[b-jbq9dk95ty] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.upload-box[b-jbq9dk95ty] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.upload-box > label:first-child[b-jbq9dk95ty] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--wz-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.upload-box small[b-jbq9dk95ty] {
    font-size: 0.65rem;
    color: var(--wz-muted);
    opacity: 0.7;
}

.upload-zone[b-jbq9dk95ty] {
    position: relative;
    height: 100px;
    border: 2px dashed var(--wz-border);
    border-radius: 10px;
    background: var(--wz-input-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    overflow: hidden;
    cursor: pointer;
}

.upload-zone:hover[b-jbq9dk95ty] {
    border-color: var(--rz-base-300, #CBD5E1);
    background: var(--rz-primary-lighter, rgba(99, 102, 241, 0.05));
}

.file-input-hidden[b-jbq9dk95ty] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.upload-zone.has-file[b-jbq9dk95ty] {
    border-style: solid;
    border-color: var(--rz-base-300, #CBD5E1);
    background: rgba(203, 213, 225, 0.05);
}

.upload-trigger[b-jbq9dk95ty] {
    width: 100%;
    height: 100%;
}

.upload-trigger[b-jbq9dk95ty]  .rz-fileupload,
.upload-trigger[b-jbq9dk95ty]  .rz-fileupload-choose {
    width: 100%;
    height: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.upload-placeholder[b-jbq9dk95ty] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 96px;
    cursor: pointer;
    color: var(--wz-muted);
}

.upload-placeholder i[b-jbq9dk95ty] {
    font-size: 1.5rem;
    color: var(--wz-accent);
    opacity: 0.7;
}

.upload-placeholder span[b-jbq9dk95ty] {
    font-size: 0.75rem;
}

.setup-upload-btn[b-jbq9dk95ty]  .rz-fileupload {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.setup-upload-btn[b-jbq9dk95ty]  .rz-fileupload-choose {
    background: var(--wz-accent) !important;
    border: none !important;
    color: white !important;
    font-size: 0.8rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
}

.setup-upload-btn[b-jbq9dk95ty]  .rz-fileupload-choose:hover {
    background: var(--wz-accent-hover) !important;
}

.preview-box[b-jbq9dk95ty] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.preview-box img[b-jbq9dk95ty] {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.25rem;
    border-radius: 4px;
}

.remove-btn[b-jbq9dk95ty] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    background: rgba(239, 68, 68, 0.9);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.preview-box:hover .remove-btn[b-jbq9dk95ty] {
    opacity: 1;
}

.erp-grid[b-jbq9dk95ty] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.erp-option[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--wz-input-bg);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.erp-option:hover[b-jbq9dk95ty] {
    border-color: var(--wz-border);
}

.erp-option.selected[b-jbq9dk95ty] {
    border-color: var(--wz-accent);
    background: rgba(139, 92, 246, 0.08);
}

.erp-logo-wrap[b-jbq9dk95ty] {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.erp-logo-wrap img[b-jbq9dk95ty] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.erp-logo-wrap.none[b-jbq9dk95ty] {
    background: rgba(100, 100, 120, 0.2);
}

.erp-logo-wrap.none i[b-jbq9dk95ty] {
    font-size: 1.25rem;
    color: var(--wz-muted);
}

.erp-label[b-jbq9dk95ty] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.erp-label strong[b-jbq9dk95ty] {
    font-size: 0.9rem;
    color: var(--wz-text);
}

.erp-label span[b-jbq9dk95ty] {
    font-size: 0.75rem;
    color: var(--wz-muted);
}

.erp-radio[b-jbq9dk95ty] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--wz-border);
    border-radius: 50%;
    position: relative;
    transition: all 0.2s;
}

.erp-option.selected .erp-radio[b-jbq9dk95ty] {
    border-color: var(--wz-accent);
}

.erp-option.selected .erp-radio[b-jbq9dk95ty]::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background: var(--wz-accent);
    border-radius: 50%;
}

.erp-grid-enhanced[b-jbq9dk95ty] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.erp-card[b-jbq9dk95ty] {
    background: var(--wz-input-bg);
    border: 1px solid var(--wz-border);
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.erp-card:hover[b-jbq9dk95ty] {
    border-color: rgba(139, 92, 246, 0.4);
}

.erp-card.selected[b-jbq9dk95ty] {
    border-color: var(--wz-accent);
    background: rgba(139, 92, 246, 0.05);
}

.erp-card.skip.selected[b-jbq9dk95ty] {
    border-color: var(--wz-muted);
    background: rgba(148, 163, 184, 0.05);
}

.erp-card-header[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.erp-logo-large[b-jbq9dk95ty] {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.erp-logo-large.holded[b-jbq9dk95ty] {
    background: white;
    padding: 6px;
}

.erp-logo-large.bc[b-jbq9dk95ty] {
    background: #003366;
    padding: 6px;
}

.erp-logo-large.none[b-jbq9dk95ty] {
    background: rgba(148, 163, 184, 0.15);
    font-size: 1.2rem;
    color: var(--wz-muted);
}

.erp-logo-large img[b-jbq9dk95ty] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.erp-radio-large[b-jbq9dk95ty] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--wz-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: transparent;
    font-size: 0.7rem;
}

.erp-radio-large.checked[b-jbq9dk95ty] {
    background: var(--wz-accent);
    border-color: var(--wz-accent);
    color: white;
}

.erp-card.skip .erp-radio-large.checked[b-jbq9dk95ty] {
    background: var(--wz-muted);
    border-color: var(--wz-muted);
}

.erp-card-body h4[b-jbq9dk95ty] {
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--wz-text);
}

.erp-card-body p[b-jbq9dk95ty] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--wz-muted);
    line-height: 1.4;
}

.erp-features[b-jbq9dk95ty] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wz-border);
}

.erp-features span[b-jbq9dk95ty] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 12px;
    font-size: 0.7rem;
    color: var(--wz-muted);
}

.erp-features span i[b-jbq9dk95ty] {
    color: var(--wz-success);
    font-size: 0.65rem;
}

.step-icon-large.erp-icon[b-jbq9dk95ty] {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.erp-config[b-jbq9dk95ty] {
    padding: 1rem;
    background: var(--rz-base-50, #F8FAFC);
    border: 1px solid var(--wz-border);
    border-radius: 10px;
}

.erp-config h3[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wz-text);
    margin: 0 0 1rem;
}

.config-logo[b-jbq9dk95ty] {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.config-grid[b-jbq9dk95ty] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.key-configured[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--rz-success-lighter, rgba(16, 185, 129, 0.15));
    border: 1px solid var(--rz-success-light, rgba(16, 185, 129, 0.3));
    border-radius: 8px;
    color: var(--wz-success);
    font-size: 0.85rem;
    font-weight: 500;
}

.key-configured i[b-jbq9dk95ty] {
    font-size: 1.1rem;
}

.wizard-card .fade-in[b-jbq9dk95ty] {
    animation: wizard-fadeUp-b-jbq9dk95ty 0.3s ease;
}

.provider-cards[b-jbq9dk95ty] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.provider-card[b-jbq9dk95ty] {
    background: var(--wz-input-bg);
    border: 1px solid var(--wz-border);
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.provider-card:hover[b-jbq9dk95ty] {
    border-color: var(--rz-primary-light, var(--wz-accent2));
}

.provider-card.selected[b-jbq9dk95ty] {
    border-color: var(--wz-accent);
    background: var(--rz-primary-lighter, rgba(139, 92, 246, 0.05));
}

.provider-header[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.provider-icon[b-jbq9dk95ty] {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.provider-icon.azure[b-jbq9dk95ty] {
    background: linear-gradient(135deg, var(--rz-primary), var(--rz-primary-light, var(--wz-accent2)));
    color: white;
}

.provider-icon.smtp[b-jbq9dk95ty] {
    background: linear-gradient(135deg, var(--rz-info), var(--rz-info-light, var(--wz-accent2)));
    color: white;
}

.provider-radio[b-jbq9dk95ty] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--wz-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: transparent;
    font-size: 0.7rem;
}

.provider-radio.checked[b-jbq9dk95ty] {
    background: var(--wz-accent);
    border-color: var(--wz-accent);
    color: white;
}

.provider-card h4[b-jbq9dk95ty] {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wz-text);
}

.provider-card p[b-jbq9dk95ty] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--wz-muted);
    line-height: 1.4;
}

.config-badge[b-jbq9dk95ty] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.75rem;
    padding: 0.3rem 0.6rem;
    background: var(--rz-success-lighter, rgba(16, 185, 129, 0.15));
    border-radius: 12px;
    font-size: 0.7rem;
    color: var(--wz-success);
}

.config-badge i[b-jbq9dk95ty] {
    font-size: 0.65rem;
}

.alert-section[b-jbq9dk95ty] {
    padding: 0 !important;
}

.info-alert[b-jbq9dk95ty],
.warning-alert[b-jbq9dk95ty] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

.info-alert[b-jbq9dk95ty] {
    background: var(--rz-primary-lighter, rgba(99, 102, 241, 0.15));
    border: 1px solid var(--rz-primary-light, rgba(99, 102, 241, 0.3));
    color: var(--rz-text-color);
}

.info-alert i[b-jbq9dk95ty] {
    font-size: 1.1rem;
    color: var(--rz-primary-light, var(--wz-accent2));
    margin-top: 2px;
}

.warning-alert[b-jbq9dk95ty] {
    background: var(--rz-warning-lighter, rgba(245, 158, 11, 0.15));
    border: 1px solid var(--rz-warning-light, rgba(245, 158, 11, 0.3));
    color: var(--rz-text-color);
}

.warning-alert i[b-jbq9dk95ty] {
    font-size: 1.1rem;
    color: var(--rz-warning-light, var(--rz-warning));
    margin-top: 2px;
}

.info-alert strong[b-jbq9dk95ty],
.warning-alert strong[b-jbq9dk95ty] {
    display: block;
    margin-bottom: 0.25rem;
}

.info-alert p[b-jbq9dk95ty],
.warning-alert p[b-jbq9dk95ty] {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.9;
}

.info-alert code[b-jbq9dk95ty] {
    background: var(--rz-base-50, rgba(0, 0, 0, 0.08));
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.wizard-card .form-field.checkbox-field[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
}

.wizard-card .form-field.checkbox-field label[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.wizard-card .form-field.small[b-jbq9dk95ty] {
    max-width: 120px;
}

.test-email-section[b-jbq9dk95ty] {
    border: 2px dashed var(--rz-primary-lighter, #e0e7ff);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--rz-primary-lightest, #f0f4ff) 0%, var(--wz-input-bg) 100%);
}

.test-email-section h3[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--rz-primary, #667eea);
}

.test-email-section h3 i[b-jbq9dk95ty] {
    font-size: 1.2rem;
}

.test-email-section .section-desc[b-jbq9dk95ty] {
    margin: 0.5rem 0 1rem;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
}

.test-email-section .form-row[b-jbq9dk95ty] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.test-email-section .form-field.flex-grow[b-jbq9dk95ty] {
    flex: 1;
}

.test-email-section .form-field.button-field[b-jbq9dk95ty] {
    padding-bottom: 1.2rem;
}

.test-result[b-jbq9dk95ty] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    animation: wizard-test-fadeIn-b-jbq9dk95ty 0.3s ease;
}

.test-result.success[b-jbq9dk95ty] {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
}

.test-result.success i[b-jbq9dk95ty] {
    color: #28a745;
    font-size: 1.25rem;
}

.test-result.error[b-jbq9dk95ty] {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
}

.test-result.error i[b-jbq9dk95ty] {
    color: #dc3545;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.test-result.error strong[b-jbq9dk95ty] {
    display: block;
    margin-bottom: 0.25rem;
}

.test-result.error p[b-jbq9dk95ty] {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

@keyframes wizard-test-fadeIn-b-jbq9dk95ty {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.loading-senders[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--wz-text-muted);
    font-size: 0.9rem;
}

.no-senders-alert[b-jbq9dk95ty] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 10px;
    padding: 1.25rem;
}

.no-senders-alert .alert-content[b-jbq9dk95ty] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.no-senders-alert .alert-icon[b-jbq9dk95ty] {
    width: 36px;
    height: 36px;
    background: rgba(251, 191, 36, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.no-senders-alert .alert-text[b-jbq9dk95ty] {
    flex: 1;
}

.no-senders-alert .alert-text strong[b-jbq9dk95ty] {
    display: block;
    color: var(--wz-text-primary);
    margin-bottom: 0.25rem;
}

.no-senders-alert .alert-text p[b-jbq9dk95ty] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--wz-text-secondary);
    line-height: 1.5;
}

.wizard-card[b-jbq9dk95ty]  .no-senders-alert .alert-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.sender-dropdown-row[b-jbq9dk95ty] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.sender-dropdown-row .flex-grow[b-jbq9dk95ty] {
    flex: 1;
}

.success-text[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #10b981;
    font-size: 0.9rem;
    font-weight: 500;
}

.success-text i[b-jbq9dk95ty] {
    font-size: 1.1rem;
}

.modules-list[b-jbq9dk95ty] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.module-item[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--wz-input-bg);
    border: 1px solid transparent;
    border-radius: 10px;
    transition: all 0.2s;
}

.module-item.on[b-jbq9dk95ty] {
    border-color: var(--wz-success);
    background: rgba(16, 185, 129, 0.05);
}

.module-icon[b-jbq9dk95ty] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.module-icon.projects[b-jbq9dk95ty] {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
}

.module-icon.servicedesk[b-jbq9dk95ty] {
    background: linear-gradient(135deg, #ec4899, #f43f5e);
    color: white;
}

.module-icon.invoices[b-jbq9dk95ty] {
    background: linear-gradient(135deg, #06b6d4, #0ea5e9);
    color: white;
}

.module-info[b-jbq9dk95ty] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.module-info strong[b-jbq9dk95ty] {
    font-size: 0.9rem;
    color: var(--wz-text);
}

.module-info span[b-jbq9dk95ty] {
    font-size: 0.75rem;
    color: var(--wz-muted);
}

.module-item[b-jbq9dk95ty]  .rz-switch {
    background: var(--wz-border) !important;
}

.module-item[b-jbq9dk95ty]  .rz-switch-checked {
    background: var(--wz-success) !important;
}

.step-header-enhanced[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wz-border);
}

.step-icon-large[b-jbq9dk95ty] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: linear-gradient(135deg, var(--wz-accent), var(--wz-accent2));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: white;
}

.step-header-text h2[b-jbq9dk95ty] {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wz-text);
}

.step-header-text .step-desc[b-jbq9dk95ty] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--wz-muted);
}

.modules-simple[b-jbq9dk95ty] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.module-row[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--wz-input-bg);
    border: 1px solid var(--wz-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.module-row:hover[b-jbq9dk95ty] {
    border-color: rgba(99, 102, 241, 0.4);
}

.module-row.active[b-jbq9dk95ty] {
    border-color: var(--wz-accent);
}

.module-row .module-icon[b-jbq9dk95ty] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.module-label[b-jbq9dk95ty] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.module-label strong[b-jbq9dk95ty] {
    font-size: 0.9rem;
    color: var(--wz-text);
}

.module-label small[b-jbq9dk95ty] {
    font-size: 0.8rem;
    color: var(--wz-muted);
}

.module-row[b-jbq9dk95ty]  .rz-switch {
    flex-shrink: 0;
}

.summary-grid[b-jbq9dk95ty] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.summary-card[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--wz-input-bg);
    border: 1px solid var(--wz-border);
    border-radius: 10px;
}

.summary-card.wide[b-jbq9dk95ty] {
    grid-column: 1 / -1;
}

.summary-icon[b-jbq9dk95ty] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--wz-accent), var(--wz-accent2));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.summary-data[b-jbq9dk95ty] {
    display: flex;
    flex-direction: column;
}

.summary-data label[b-jbq9dk95ty] {
    font-size: 0.7rem;
    color: var(--wz-muted);
    text-transform: uppercase;
}

.summary-data strong[b-jbq9dk95ty] {
    font-size: 0.9rem;
    color: var(--wz-text);
}

.module-tags[b-jbq9dk95ty] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.tag[b-jbq9dk95ty] {
    padding: 0.2rem 0.6rem;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    font-size: 0.7rem;
    color: var(--wz-accent);
}

.tag.muted[b-jbq9dk95ty] {
    background: rgba(100, 100, 120, 0.2);
    color: var(--wz-muted);
}

.wizard-footer[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--rz-base-50, #F8FAFC);
    border-top: 1px solid var(--wz-border);
}

.btn-back[b-jbq9dk95ty],
.btn-next[b-jbq9dk95ty],
.btn-finish[b-jbq9dk95ty] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-back[b-jbq9dk95ty] {
    background: transparent;
    border: 1px solid var(--wz-border);
    color: var(--wz-muted);
}

.btn-back:hover[b-jbq9dk95ty] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--wz-text);
}

.btn-next[b-jbq9dk95ty] {
    background: linear-gradient(135deg, var(--wz-accent), var(--wz-accent2));
    color: white;
}

.btn-next:hover[b-jbq9dk95ty] {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.btn-finish[b-jbq9dk95ty] {
    background: linear-gradient(135deg, var(--wz-success), #059669);
    color: white;
}

.btn-finish:hover:not(:disabled)[b-jbq9dk95ty] {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.btn-finish:disabled[b-jbq9dk95ty] {
    opacity: 0.7;
    cursor: wait;
}

.wizard-card .spinner[b-jbq9dk95ty] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: wizard-spin-b-jbq9dk95ty 0.8s linear infinite;
}

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

.wizard-footer.hidden[b-jbq9dk95ty] {
    display: none;
}

.confirm-list[b-jbq9dk95ty] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.confirm-row[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    background: var(--wz-input-bg);
    border: 1px solid var(--wz-border);
    border-radius: 8px;
}

.confirm-label[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--wz-muted);
    font-size: 0.85rem;
}

.confirm-label i[b-jbq9dk95ty] {
    font-size: 1rem;
    color: var(--wz-accent);
}

.confirm-value[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: right;
}

.confirm-value strong[b-jbq9dk95ty] {
    color: var(--wz-text);
    font-size: 0.9rem;
}

.confirm-value .muted[b-jbq9dk95ty] {
    color: var(--wz-muted);
    font-weight: 400;
}

.color-dots[b-jbq9dk95ty] {
    display: flex;
    gap: 0.35rem;
}

.color-dots .dot[b-jbq9dk95ty] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.erp-value[b-jbq9dk95ty] {
    gap: 0.5rem;
}

.erp-logo-sm[b-jbq9dk95ty] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    background: white;
    border-radius: 4px;
    padding: 2px;
}

.erp-logo-sm.bc[b-jbq9dk95ty] {
    background: #003366;
}

.status-badge[b-jbq9dk95ty] {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.status-badge.ok[b-jbq9dk95ty] {
    background: rgba(16, 185, 129, 0.15);
    color: var(--wz-success);
}

.status-badge.pending[b-jbq9dk95ty] {
    background: rgba(148, 163, 184, 0.15);
    color: var(--wz-muted);
}

.modules-value[b-jbq9dk95ty] {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem !important;
}

.module-tag[b-jbq9dk95ty] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--wz-success);
}

.module-tag i[b-jbq9dk95ty] {
    font-size: 0.65rem;
}

.saving-overlay[b-jbq9dk95ty] {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 26, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-radius: 12px;
    z-index: 10;
}

.saving-spinner[b-jbq9dk95ty] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(139, 92, 246, 0.2);
    border-top-color: var(--wz-accent);
    border-radius: 50%;
    animation: wizard-spin-b-jbq9dk95ty 1s linear infinite;
}

.saving-overlay span[b-jbq9dk95ty] {
    color: var(--wz-text);
    font-size: 0.9rem;
}

.result-panel[b-jbq9dk95ty] {
    text-align: center;
    padding: 2rem 1rem;
    animation: wizard-fadeUp-b-jbq9dk95ty 0.4s ease;
}

.result-icon[b-jbq9dk95ty] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.success-icon[b-jbq9dk95ty] {
    background: rgba(16, 185, 129, 0.15);
}

.checkmark[b-jbq9dk95ty] {
    width: 80px;
    height: 80px;
}

.checkmark-circle[b-jbq9dk95ty] {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--wz-success);
    animation: wizard-stroke-b-jbq9dk95ty 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check[b-jbq9dk95ty] {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 3;
    stroke: var(--wz-success);
    animation: wizard-stroke-b-jbq9dk95ty 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

@keyframes wizard-stroke-b-jbq9dk95ty {
    100% { stroke-dashoffset: 0; }
}

.result-panel.success h2[b-jbq9dk95ty] {
    color: var(--wz-success);
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    justify-content: center;
}

.result-panel.success p[b-jbq9dk95ty] {
    color: var(--wz-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.result-details[b-jbq9dk95ty] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 300px;
    margin: 0 auto 1.5rem;
}

.detail-item[b-jbq9dk95ty] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--wz-text);
}

.detail-item i[b-jbq9dk95ty] {
    color: var(--wz-success);
    font-size: 1rem;
}

.redirect-bar[b-jbq9dk95ty] {
    width: 200px;
    height: 4px;
    background: rgba(16, 185, 129, 0.2);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.redirect-progress[b-jbq9dk95ty] {
    height: 100%;
    background: var(--wz-success);
    width: 0;
    animation: wizard-progress-b-jbq9dk95ty 3s linear forwards;
}

@keyframes wizard-progress-b-jbq9dk95ty {
    to { width: 100%; }
}

.error-icon[b-jbq9dk95ty] {
    background: rgba(239, 68, 68, 0.15);
    font-size: 2.5rem;
    color: #ef4444;
}

.result-panel.error h2[b-jbq9dk95ty] {
    color: #ef4444;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    justify-content: center;
}

.error-message[b-jbq9dk95ty] {
    color: var(--wz-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.error-details[b-jbq9dk95ty] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.error-detail-item[b-jbq9dk95ty] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--wz-muted);
    margin-bottom: 0.5rem;
}

.error-detail-item:last-child[b-jbq9dk95ty] {
    margin-bottom: 0;
}

.error-detail-item i[b-jbq9dk95ty] {
    color: #ef4444;
    margin-top: 2px;
}

.error-actions[b-jbq9dk95ty] {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.btn-retry[b-jbq9dk95ty] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--wz-accent), var(--wz-accent2));
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-retry:hover[b-jbq9dk95ty] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

@media (max-width: 600px) {
    .wizard-header[b-jbq9dk95ty] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .wizard-card .form-row[b-jbq9dk95ty],
    .upload-row[b-jbq9dk95ty],
    .config-grid[b-jbq9dk95ty],
    .summary-grid[b-jbq9dk95ty] {
        grid-template-columns: 1fr;
    }

    .summary-card.wide[b-jbq9dk95ty] {
        grid-column: auto;
    }

    .modules-summary[b-jbq9dk95ty] {
        grid-template-columns: 1fr;
    }
}

/* ── Contribución cross-cluster (de pages/setup-wizard.css) aplicada por el orquestador ── */
/* Correcciones del revisor en SetupWizard.razor.css:
   (1) CRÍTICO — '.wizard-card .w-full' quedo MUERTA bajo isolation (todos los class="w-full"
   van sobre RadzenTextBox/Password/DropDown, sin b-hash): reanclar con ::deep desde el div
   propio .wizard-card, o /setup pierde el ancho completo de todos sus inputs.
   (2) warning — '.no-senders-alert .alert-actions' muerta (RadzenStack sin hash). */
.wizard-card[b-jbq9dk95ty]  .w-full {
    width: 100%;
}

.no-senders-alert[b-jbq9dk95ty]  .alert-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
/* /Components/Pages/SuperSheet/AddDynamicTableMembersDialog.razor.rz.scp.css */
.group-list-container[b-jekodorfga] {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.group-item[b-jekodorfga] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--rz-border-radius);
    cursor: pointer;
    transition: background 0.15s ease;
    background: transparent;
}

.group-item:hover[b-jekodorfga] {
    background: var(--rz-base-100);
}

.group-item.selected[b-jekodorfga] {
    background: var(--rz-primary-lighter);
    border: 1px solid var(--rz-primary);
}

.group-item.skeleton[b-jekodorfga] {
    cursor: default;
}

.group-name[b-jekodorfga] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Pages/SuperSheet/DataTables.razor.rz.scp.css */
/* Estilos propios de DataTables — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/supersheet/shell.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Tab pill bar (Datos / Schema) shown above the grid ── */
.dt-tab-bar[b-mne4jguzbv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--ss-surface);
    border-bottom: 1px solid var(--ss-border-soft);
    flex-shrink: 0;
}

.dt-tab-bar-spacer[b-mne4jguzbv] { flex: 1 1 auto; }

.dt-group-by-anchor[b-mne4jguzbv] {
    display: inline-block;
    width: 0;
    height: 0;
}

/* The legacy `.data-layout`, `.dt-shell`, `.data-main` rules in dynamic-tables.css
   set negative margins and viewport-height calculations that assumed they were
   mounted inside MainLayout. Inside the new shell we override them to plain flow. */
.ds-app .data-layout[b-mne4jguzbv],
.ds-app .dt-shell[b-mne4jguzbv] {
    display: contents;  /* legacy wrappers were removed from markup; this is defensive */
}

.ds-app .data-main[b-mne4jguzbv] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    background: var(--ss-surface-alt);
    overflow: hidden;
}
/* /Components/Pages/SuperSheet/Grid/ColumnHeaderDropdown.razor.rz.scp.css */
/* Estilos propios de ColumnHeaderDropdown — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/supersheet/header-filter.css, 259 lineas que se cargaban
   en TODAS las paginas del portal para un desplegable que solo existe en la
   cabecera de una columna de SuperSheet.

   Comprobado antes de mover: sus 21 clases aparecen las 21 en un class="..." de
   este marcado, ninguna cae sobre un componente de Radzen y nadie mas las usa.
   El desplegable se porta a un popup, pero eso da igual: el `b-{hash}` viaja en
   el propio elemento, no depende de donde acabe en el DOM.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   SUPERSHEET REDESIGN — COLUMN HEADER DROPDOWN (Excel-style filter popover)
   Opened from the ⋮ button on each grid column header.
   Tokens from theme.css (--ss-*). No hex literals.
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-col-filter-popover[b-377c7dunjz] {
    position: fixed;
    z-index: 60;
    width: 280px;
    background: var(--ss-surface);
    color: var(--ss-ink-2);
    font-family: var(--ss-font-ui);
    font-size: 12.5px;
    border: 1px solid var(--ss-border-strong);
    border-radius: 8px;
    box-shadow: var(--ss-shadow-pop);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: calc(100vh - 80px);
    overflow: hidden;
}

.cfp-divider[b-377c7dunjz] {
    height: 1px;
    background: var(--ss-border-soft);
    margin: 4px 0;
}

.cfp-section[b-377c7dunjz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
}

.cfp-section-actions[b-377c7dunjz] { gap: 0; }

/* ── Row buttons (sort / hide / pin / rename / delete) ────────── */
.cfp-row[b-377c7dunjz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    color: var(--ss-ink-2);
    font: inherit;
    text-align: start;
    width: 100%;
}

.cfp-row:hover[b-377c7dunjz] {
    background: var(--ss-primary-soft);
    color: var(--ss-primary);
}

.cfp-row:focus-visible[b-377c7dunjz] {
    outline: 2px solid var(--ss-primary);
    outline-offset: -2px;
}

.cfp-row .cfp-ico[b-377c7dunjz] {
    color: var(--ss-muted);
    flex-shrink: 0;
}

.cfp-row:hover .cfp-ico[b-377c7dunjz] { color: var(--ss-primary); }

.cfp-row .cfp-label[b-377c7dunjz] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cfp-row.cfp-danger[b-377c7dunjz] { color: var(--ss-danger); }

.cfp-row.cfp-danger:hover[b-377c7dunjz] {
    background: rgba(239, 68, 68, 0.08);
    color: var(--ss-danger);
}

.cfp-row.cfp-danger .cfp-ico[b-377c7dunjz] { color: var(--ss-danger); }

/* ── Search input ─────────────────────────────────────────────── */
.cfp-search[b-377c7dunjz] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--ss-surface-2);
    border: 1px solid var(--ss-border);
    border-radius: 5px;
    padding: 0 8px;
    height: 28px;
    margin: 4px 6px;
}

.cfp-search:focus-within[b-377c7dunjz] {
    border-color: var(--ss-primary);
    background: var(--ss-surface);
    box-shadow: 0 0 0 3px var(--ss-primary-soft);
}

.cfp-search input[b-377c7dunjz] {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    color: var(--ss-ink-2);
    min-width: 0;
}

.cfp-search input[b-377c7dunjz]::placeholder { color: var(--ss-muted-2); }

.cfp-search-clear[b-377c7dunjz] {
    width: 18px;
    height: 18px;
    background: transparent;
    border: 0;
    color: var(--ss-muted);
    border-radius: 3px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.cfp-search-clear:hover[b-377c7dunjz] {
    background: var(--ss-surface-3);
    color: var(--ss-ink);
}

/* ── Select-all + values list ─────────────────────────────────── */
.cfp-actions[b-377c7dunjz] {
    padding: 4px 8px 0;
}

.cfp-check-row[b-377c7dunjz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--ss-ink-2);
    -webkit-user-select: none;
    user-select: none;
}

.cfp-check-row:hover[b-377c7dunjz] { background: var(--ss-surface-2); }

.cfp-check-row input[type="checkbox"][b-377c7dunjz] {
    width: 14px;
    height: 14px;
    accent-color: var(--ss-primary);
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}

.cfp-check-row .cfp-value[b-377c7dunjz] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cfp-check-all[b-377c7dunjz] {
    font-weight: 500;
    color: var(--ss-ink);
    border-bottom: 1px solid var(--ss-border-soft);
    margin-bottom: 2px;
    padding-bottom: 6px;
}

.cfp-values-list[b-377c7dunjz] {
    flex: 1;
    min-height: 0;
    max-height: 220px;
    overflow-y: auto;
    padding: 0 6px 4px;
    /* Allow the list area to shrink when the popover is tall. */
    scrollbar-width: thin;
}

.cfp-values-list[b-377c7dunjz]::-webkit-scrollbar { width: 8px; }
.cfp-values-list[b-377c7dunjz]::-webkit-scrollbar-thumb {
    background: var(--ss-surface-3);
    border-radius: 4px;
    border: 1px solid var(--ss-surface);
}

.cfp-empty[b-377c7dunjz] {
    padding: 12px;
    text-align: center;
    color: var(--ss-muted);
    font-size: 11.5px;
}

/* ── Buttons + link ───────────────────────────────────────────── */
.cfp-buttons[b-377c7dunjz] {
    display: flex;
    gap: 6px;
    padding: 4px 6px 0;
}

.cfp-btn[b-377c7dunjz] {
    flex: 1;
    height: 28px;
    border-radius: 5px;
    border: 1px solid var(--ss-border);
    background: var(--ss-surface);
    color: var(--ss-ink-2);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 0 10px;
}

.cfp-btn:hover[b-377c7dunjz] {
    border-color: var(--ss-border-strong);
    background: var(--ss-surface-2);
}

.cfp-btn-primary[b-377c7dunjz] {
    background: var(--ss-primary);
    border-color: var(--ss-primary);
    color: #fff;
}

.cfp-btn-primary:hover[b-377c7dunjz] {
    background: var(--ss-primary-deep);
    border-color: var(--ss-primary-deep);
}

.cfp-btn-ghost[b-377c7dunjz] { color: var(--ss-muted); }

.cfp-link[b-377c7dunjz] {
    padding: 6px 10px;
    background: transparent;
    border: 0;
    color: var(--ss-primary);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: start;
    border-radius: 4px;
    margin-top: 2px;
}

.cfp-link:hover[b-377c7dunjz] { background: var(--ss-primary-soft); }


/* ══ De wwwroot/css/supersheet/menu.css (tanda 2 de la migración) ══ */

/* Overlay used by menu bar / dropdown to catch outside clicks. */
.ds-overlay[b-377c7dunjz] {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: transparent;
    cursor: default;
}
/* /Components/Pages/SuperSheet/Grid/SuperSheet.razor.rz.scp.css */
.check-icon[b-hi79no848f] {
    font-size: 1.125rem;
    color: var(--rz-primary);
    flex-shrink: 0;
}

/* ── Contribución cross-cluster (de admin/create-role-dialog.css) aplicada por el orquestador ── */
.form-row[b-hi79no848f] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
/* /Components/Pages/SuperSheet/Shell/DataTablesShell.razor.rz.scp.css */
/* Estilos propios de DataTablesShell — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/supersheet/shell.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── App shell ─────────────────────────────────────────────────
   Phase 1.B-bis: the shell now lives INSIDE MainLayout — the portal header
   (~56px) and global sidebar stay visible. We bleed out of MainLayout's
   `rz-p-4` 1rem padding with negative margins and use `calc(100vh - 64px - 2rem)`
   to claim the exact area between the portal header and the viewport bottom
   (identical trick to the legacy `.data-layout`). The `.ds-app` itself remains
   a 6-row grid so HostBar / MenuBar / QuickToolbar / FormulaBar / workspace
   / StatusBar arrange exactly the same as before — they just sit below the
   portal header instead of replacing it. */
.ds-app[b-4tjozesttp] {
    /* The shell lives inside the portal's MainLayout (rz-p-4 → 1rem padding).
       The previous bleed-out trick (width: calc(100% + 2rem); margin: -1rem) pushed
       the shell past the viewport edges and broke the workspace height calculation
       in Chromium when a horizontal scrollbar appeared. We now respect MainLayout's
       padding — the 1rem gutter on each side is acceptable and keeps the layout
       deterministic. */
    height: calc(100vh - 64px - 2rem);
    width: 100%;
    min-height: 0;
    /* 4-row grid: MenuBar 32 + QuickToolbar 40 + FormulaBar 30 + workspace 1fr.
       HostBar (36) and StatusBar (24) were dropped because the portal header
       already carries the branding and the StatusBar counters live in ViewTabs now. */
    display: grid;
    grid-template-rows: 32px 40px 30px 1fr;
    grid-template-columns: 1fr;
    background: var(--ss-surface);
    color: var(--ss-ink);
    font-family: var(--ss-font-ui);
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

/* ── Workspace (left | center | right) ──────────────────
   Implemented with flexbox so the right slot can hold a variable mix of
   side-panel (288px when open) + icon rail (38px, always visible). The
   left and right slots provide their own sizing; .ds-center flexes. */
.ds-workspace[b-4tjozesttp] {
    display: flex;
    min-height: 0;
    background: var(--ss-surface-alt);
    position: relative;
    overflow: hidden;
}

.ds-center[b-4tjozesttp] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

/* ── Generic helpers ───────────────────────────────────── */
.ds-app[b-4tjozesttp]  *,
.ds-app[b-4tjozesttp]  *::before,
.ds-app[b-4tjozesttp]  *::after {
    box-sizing: border-box;
}
/* /Components/Pages/SuperSheet/Shell/FloatingSelectionToolbar.razor.rz.scp.css */
/* Estilos propios de FloatingSelectionToolbar — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/supersheet/floating-toolbar.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   SUPERSHEET REDESIGN — FLOATING SELECTION TOOLBAR
   Dark pill that appears above the grid when one or more rows are selected.
   Provides bulk actions: Duplicate, Export, Comment, Summarize with AI, Delete.
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-float-toolbar[b-oqxytbv24i] {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ss-ink);
    color: #fff;
    border-radius: 8px;
    box-shadow: var(--ss-shadow-pop);
    display: flex;
    align-items: center;
    padding: 4px;
    gap: 2px;
    z-index: 20;
    font-size: 12px;
    font-family: var(--ss-font-ui);
}

.ds-float-toolbar .count[b-oqxytbv24i] {
    font-family: var(--ss-font-mono);
    font-size: 11px;
    color: rgba(255, 255, 255, .6);
    padding: 0 8px;
}

.ds-float-toolbar .count b[b-oqxytbv24i] {
    color: #fff;
    font-weight: 600;
}

.ds-float-toolbar .ft-divider[b-oqxytbv24i] {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, .18);
    flex-shrink: 0;
}

.ds-float-toolbar .ft-btn[b-oqxytbv24i] {
    height: 26px;
    padding: 0 8px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .85);
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font: inherit;
    white-space: nowrap;
}

.ds-float-toolbar .ft-btn:hover[b-oqxytbv24i] {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.ds-float-toolbar .ft-btn.danger:hover[b-oqxytbv24i] {
    background: rgba(239, 68, 68, .25);
    color: #FCA5A5;
}

.ds-float-toolbar .ft-btn.ai[b-oqxytbv24i] {
    background: linear-gradient(135deg, rgba(99, 102, 241, .25), rgba(236, 72, 153, .25));
    color: #fff;
}

.ds-float-toolbar .ft-btn.ai:hover[b-oqxytbv24i] { filter: brightness(1.15); }
/* /Components/Pages/SuperSheet/Shell/FormulaBar.razor.rz.scp.css */
/* Estilos propios de FormulaBar — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/supersheet/shell.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Formula bar (cell ref + fx + input) ───────────────── */
.ds-formulabar[b-swaut0jch5] {
    background: var(--ss-surface);
    border-bottom: 1px solid var(--ss-border);
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 8px;
    font-size: 12px;
}

.ds-formulabar .cellref[b-swaut0jch5] {
    font-family: var(--ss-font-mono);
    background: var(--ss-surface-2);
    border: 1px solid var(--ss-border);
    border-radius: 5px;
    padding: 0 8px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    min-width: 96px;
    color: var(--ss-ink-2);
    font-size: 11.5px;
    cursor: pointer;
    gap: 6px;
}

.ds-formulabar .cellref:hover[b-swaut0jch5] { background: var(--ss-surface-3); }

.ds-formulabar .cellref .caret[b-swaut0jch5] { color: var(--ss-muted); }

.ds-formulabar .fx[b-swaut0jch5] {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: var(--ss-primary);
    font-family: var(--ss-font-mono);
    font-weight: 600;
    font-size: 11px;
    font-style: italic;
}

.ds-formulabar .input-wrap[b-swaut0jch5] {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--ss-surface-2);
    border: 1px solid var(--ss-border);
    border-radius: 5px;
    height: 22px;
    padding: 0 10px;
    font-family: var(--ss-font-mono);
    font-size: 11.5px;
    color: var(--ss-ink-2);
    min-width: 0;
}

.ds-formulabar .input-wrap:focus-within[b-swaut0jch5] {
    border-color: var(--ss-primary);
    background: var(--ss-surface);
    box-shadow: 0 0 0 3px var(--ss-primary-soft);
}

.ds-formulabar .input-wrap input[b-swaut0jch5] {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    min-width: 0;
}

.ds-formulabar .input-wrap .accept[b-swaut0jch5],
.ds-formulabar .input-wrap .cancel[b-swaut0jch5] {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    display: grid;
    place-items: center;
    color: var(--ss-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.ds-formulabar .input-wrap .accept:hover[b-swaut0jch5] { color: var(--ss-success); }

.ds-formulabar .input-wrap .cancel:hover[b-swaut0jch5] { color: var(--ss-danger); }
/* /Components/Pages/SuperSheet/Shell/HostBar.razor.rz.scp.css */
/* Estilos propios de HostBar — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/supersheet/shell.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Host bar (top, dark, 36px) ────────────────────────── */
.ds-hostbar[b-gtlpfd5sdn] {
    background: var(--ss-ink);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 16px;
    font-size: 12.5px;
    min-width: 0;
}

.ds-hostbar .brand[b-gtlpfd5sdn] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ds-hostbar .logo[b-gtlpfd5sdn] {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, var(--ss-primary), var(--ss-primary-deep));
    border-radius: 5px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    border: 0;
}

.ds-hostbar .logo:hover[b-gtlpfd5sdn] {
    filter: brightness(1.1);
}

.ds-hostbar .crumbs[b-gtlpfd5sdn] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .55);
    min-width: 0;
    overflow: hidden;
}

.ds-hostbar .crumbs a[b-gtlpfd5sdn] {
    color: inherit;
    text-decoration: none;
}

.ds-hostbar .crumbs a:hover[b-gtlpfd5sdn] {
    color: #fff;
}

.ds-hostbar .crumbs .sep[b-gtlpfd5sdn] { color: rgba(255, 255, 255, .25); }

.ds-hostbar .crumbs .cur[b-gtlpfd5sdn] {
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
}

.ds-hostbar .star[b-gtlpfd5sdn] {
    color: var(--ss-warning-bright);
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0 4px;
    font-size: 14px;
    line-height: 1;
}

.ds-hostbar .star:hover[b-gtlpfd5sdn] { filter: brightness(1.2); }

.ds-hostbar .star.off[b-gtlpfd5sdn] { color: rgba(255, 255, 255, .35); }

.ds-hostbar .right[b-gtlpfd5sdn] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ds-hostbar .global-search[b-gtlpfd5sdn] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    padding: 0 10px;
    height: 24px;
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    width: 280px;
    cursor: pointer;
}

.ds-hostbar .global-search:hover[b-gtlpfd5sdn] {
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .8);
}

.ds-hostbar .global-search .kbd[b-gtlpfd5sdn] {
    margin-left: auto;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 3px;
    padding: 0 5px;
    font-family: var(--ss-font-mono);
    font-size: 10px;
}

.ds-hostbar .icon-btn[b-gtlpfd5sdn] {
    width: 24px;
    height: 24px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .7);
    border-radius: 5px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.ds-hostbar .icon-btn:hover[b-gtlpfd5sdn] {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.ds-hostbar .presence[b-gtlpfd5sdn] {
    display: flex;
    align-items: center;
}

.ds-hostbar .presence .avatar[b-gtlpfd5sdn] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    border: 2px solid var(--ss-ink);
    margin-left: -6px;
    cursor: default;
}

.ds-hostbar .presence .avatar:first-child[b-gtlpfd5sdn] { margin-left: 0; }

.ds-hostbar .share-btn[b-gtlpfd5sdn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ss-primary);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 4px 12px;
    height: 24px;
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
}

.ds-hostbar .share-btn:hover[b-gtlpfd5sdn] { background: var(--ss-primary-deep); }
/* /Components/Pages/SuperSheet/Shell/MenuBar.razor.rz.scp.css */
/* Estilos propios de MenuBar — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/supersheet/menu.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* Atrapa-clics del menu: cierra el desplegable al pinchar DENTRO del area de
   contenido. Fuera de ella no llega, y no es cosa de geometria ni de z-index.

   Radzen pone `transform: translateZ(0)` en `.rz-layout .rz-body`
   (material-base.css). Eso hace dos cosas a la vez: convierte a `.rz-body` en
   bloque contenedor de todo `position: fixed` que cuelgue de el, Y crea un
   contexto de apilado. Lo primero se puede sortear con insets negativos; lo
   segundo no: el `z-index: 49` solo compite DENTRO de `.rz-body`, asi que este
   overlay no puede pintar por encima de la cabecera ni del carril del portal
   por mucho que se estire. Medido con `elementFromPoint`: un clic en la
   cabecera sigue llegando a la cabecera.

   Por eso los clics de fuera del contenido los cierra un escuchador a nivel de
   documento (`js/outside-click.js`), que no depende del apilado. Este overlay
   se queda para lo que si cubre y para bloquear la interaccion debajo. */
.ds-overlay[b-ptkiui2oml] {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: transparent;
    cursor: default;
}


/* ══ De wwwroot/css/supersheet/shell.css (tanda 2 de la migración) ══ */

/* ── Menu bar (File/Edit/View/etc.) ────────────────────── */
.ds-menubar[b-ptkiui2oml] {
    background: var(--ss-surface);
    border-bottom: 1px solid var(--ss-border);
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 0;
    min-width: 0;
}

.ds-menubar .menu-slot[b-ptkiui2oml] { position: relative; }

.ds-menubar .item[b-ptkiui2oml] {
    height: 24px;
    padding: 0 10px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--ss-ink-3);
    font-size: 12.5px;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.ds-menubar .item:hover[b-ptkiui2oml] { background: var(--ss-surface-2); }

.ds-menubar .item.open[b-ptkiui2oml] {
    background: var(--ss-primary-soft);
    color: var(--ss-primary);
}

.ds-menubar .auto-save[b-ptkiui2oml] {
    margin-left: auto;
    font-size: 11px;
    color: var(--ss-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-right: 8px;
    white-space: nowrap;
}

/* ─── Movil ───
   Los menus (Archivo, Editar, Ver…) mas la etiqueta de guardado suman mas de
   los 346 px que quedan en un telefono, y la tira empujaba el shell entero de
   lado. Ahora la tira se recorre deslizando —no se pierde ninguna entrada— y
   la etiqueta deja de empujarse al extremo para ir detras de los menus. */
@media (max-width: 1024px) {
    .ds-menubar[b-ptkiui2oml] {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ds-menubar[b-ptkiui2oml]::-webkit-scrollbar {
        display: none;
    }

    .ds-menubar .menu-slot[b-ptkiui2oml],
    .ds-menubar .item[b-ptkiui2oml] {
        flex: 0 0 auto;
    }

    .ds-menubar .auto-save[b-ptkiui2oml] {
        margin-left: 12px;
        flex: 0 0 auto;
    }
}

.ds-menubar .auto-save .dot[b-ptkiui2oml] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ss-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
}
/* /Components/Pages/SuperSheet/Shell/MenuDropdown.razor.rz.scp.css */
/* Estilos propios de MenuDropdown — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/supersheet/menu.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   SUPERSHEET REDESIGN — MENU DROPDOWNS
   Reusable popover used by MenuBar (Archivo/Editar/Ver/Insertar/...) and by
   any other dropdown that wants the same look (column header dropdown reuses
   most of these classes via header-filter.css).
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-dropdown[b-ro3oz7tgub] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    background: var(--ss-surface);
    border: 1px solid var(--ss-border-strong);
    border-radius: 8px;
    box-shadow: var(--ss-shadow-pop);
    padding: 4px;
    min-width: 240px;
    z-index: 50;
    font-size: 12.5px;
    font-family: var(--ss-font-ui);
    color: var(--ss-ink-2);
}

.ds-dropdown .group + .group[b-ro3oz7tgub] {
    border-top: 1px solid var(--ss-border-soft);
    margin-top: 4px;
    padding-top: 4px;
}

.ds-dropdown .section-label[b-ro3oz7tgub] {
    padding: 6px 10px 4px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ss-muted-2);
}

.ds-dropdown .mi[b-ro3oz7tgub] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 4px;
    color: var(--ss-ink-2);
    cursor: pointer;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: start;
    font: inherit;
}

.ds-dropdown .mi:hover[b-ro3oz7tgub] {
    background: var(--ss-primary-soft);
    color: var(--ss-primary);
}

.ds-dropdown .mi:focus-visible[b-ro3oz7tgub] {
    outline: 2px solid var(--ss-primary);
    outline-offset: -2px;
}

.ds-dropdown .mi.disabled[b-ro3oz7tgub],
.ds-dropdown .mi:disabled[b-ro3oz7tgub] {
    color: var(--ss-muted-2);
    cursor: not-allowed;
    pointer-events: none;
}

.ds-dropdown .mi.disabled:hover[b-ro3oz7tgub] {
    background: transparent;
    color: var(--ss-muted-2);
}

.ds-dropdown .mi .ico[b-ro3oz7tgub] {
    color: var(--ss-muted);
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ds-dropdown .mi:hover .ico[b-ro3oz7tgub] { color: var(--ss-primary); }

.ds-dropdown .mi .label[b-ro3oz7tgub] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-dropdown .mi .kbd[b-ro3oz7tgub] {
    font-family: var(--ss-font-mono);
    font-size: 10.5px;
    color: var(--ss-muted);
    background: var(--ss-surface-2);
    border: 1px solid var(--ss-border);
    border-radius: 3px;
    padding: 1px 5px;
    flex-shrink: 0;
}

.ds-dropdown .mi.danger[b-ro3oz7tgub] { color: var(--ss-danger); }

.ds-dropdown .mi.danger:hover[b-ro3oz7tgub] {
    background: rgba(239, 68, 68, .08);
    color: var(--ss-danger);
}

.ds-dropdown .mi.danger .ico[b-ro3oz7tgub] { color: var(--ss-danger); }

.ds-dropdown .submenu-arrow[b-ro3oz7tgub] {
    color: var(--ss-muted);
    margin-left: auto;
}
/* /Components/Pages/SuperSheet/Shell/QuickToolbar.razor.rz.scp.css */
/* Estilos propios de QuickToolbar — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/supersheet/shell.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Quick toolbar (B/I/U, font, sizes, formulas, filter, IA, share) ── */
.ds-qtoolbar[b-8vd3ndurk5] {
    background: var(--ss-surface);
    border-bottom: 1px solid var(--ss-border);
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.ds-qtoolbar[b-8vd3ndurk5]::-webkit-scrollbar { height: 4px; }

.ds-qtoolbar[b-8vd3ndurk5]::-webkit-scrollbar-thumb {
    background: var(--ss-border);
    border-radius: 2px;
}

.ds-qtoolbar .pill-group[b-8vd3ndurk5] {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    background: var(--ss-surface-alt);
    border: 1px solid var(--ss-border-soft);
    border-radius: 8px;
    gap: 0;
    height: 32px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
    flex-shrink: 0;
}

.ds-qtoolbar .pill-group .hairline[b-8vd3ndurk5] {
    width: 1px;
    height: 16px;
    background: var(--ss-border);
    margin: 0 4px;
    flex-shrink: 0;
}

.ds-qtoolbar .btn[b-8vd3ndurk5] {
    height: 26px;
    min-width: 26px;
    padding: 0 7px;
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: var(--ss-ink-3);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: relative;
    transition: background .12s, color .12s, transform .08s;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.ds-qtoolbar .btn:hover[b-8vd3ndurk5] {
    background: var(--ss-surface-2);
    color: var(--ss-ink);
}

.ds-qtoolbar .btn:active[b-8vd3ndurk5] { transform: translateY(0.5px); }

.ds-qtoolbar .btn[data-active="true"][b-8vd3ndurk5] {
    background: var(--ss-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(79, 70, 229, .25);
}

.ds-qtoolbar .btn[data-active="true"]:hover[b-8vd3ndurk5] { background: var(--ss-primary-deep); }

.ds-qtoolbar .btn.split[b-8vd3ndurk5] { padding-right: 4px; }

.ds-qtoolbar .btn.split .caret[b-8vd3ndurk5] { color: var(--ss-muted-2); }

.ds-qtoolbar .btn[data-active="true"].split .caret[b-8vd3ndurk5] { color: rgba(255, 255, 255, .75); }

.ds-qtoolbar .btn .lbl[b-8vd3ndurk5] {
    font-size: 12px;
    font-weight: 500;
}

.ds-qtoolbar .btn:disabled[b-8vd3ndurk5] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ds-qtoolbar .btn .count-mini[b-8vd3ndurk5] {
    font-family: var(--ss-font-mono);
    font-size: 10px;
    font-weight: 600;
    background: var(--ss-primary);
    color: #fff;
    border-radius: 999px;
    padding: 0 5px;
    height: 14px;
    display: inline-flex;
    align-items: center;
}

.ds-qtoolbar .btn[data-active="true"] .count-mini[b-8vd3ndurk5] {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

.ds-qtoolbar .mono-mini[b-8vd3ndurk5] {
    font-family: var(--ss-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: -0.4px;
}

.ds-qtoolbar select[b-8vd3ndurk5] {
    -webkit-appearance: none;
    appearance: none;
    height: 26px;
    background: transparent;
    border: 0;
    border-radius: 5px;
    padding: 0 22px 0 8px;
    font: inherit;
    font-size: 12px;
    color: var(--ss-ink);
    outline: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    cursor: pointer;
}

.ds-qtoolbar select:hover[b-8vd3ndurk5] { background-color: var(--ss-surface-2); }

/* Color swatch buttons (text color / background color) */
.ds-qtoolbar .swatch-btn[b-8vd3ndurk5] { position: relative; }

.ds-qtoolbar .swatch-btn[b-8vd3ndurk5]::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 6px;
    right: 16px;
    height: 2.5px;
    border-radius: 1.5px;
    background: var(--ss-swatch-color, transparent);
    pointer-events: none;
}

.ds-qtoolbar .right-actions[b-8vd3ndurk5] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding-left: 8px;
}

.ds-qtoolbar .ctx-chip[b-8vd3ndurk5] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 12px;
    background: var(--ss-primary-soft);
    border: 1px solid var(--ss-primary-border);
    border-radius: 999px;
    color: var(--ss-primary);
    font-size: 11.5px;
    font-weight: 500;
    margin-right: 4px;
}

.ds-qtoolbar .ctx-chip b[b-8vd3ndurk5] {
    font-family: var(--ss-font-mono);
    font-size: 11px;
    font-weight: 600;
}

.ds-qtoolbar .ctx-chip .sep[b-8vd3ndurk5] {
    width: 1px;
    height: 12px;
    background: var(--ss-primary-border);
}

.ds-qtoolbar .icon-only[b-8vd3ndurk5] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    padding: 0;
    justify-content: center;
    background: transparent;
    color: var(--ss-ink-3);
    border: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.ds-qtoolbar .icon-only:hover[b-8vd3ndurk5] {
    background: var(--ss-surface-2);
    color: var(--ss-ink);
}

.ds-qtoolbar .icon-only .badge-dot[b-8vd3ndurk5] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ss-danger);
    border: 2px solid var(--ss-surface);
}

.ds-qtoolbar .ai-pill[b-8vd3ndurk5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px;
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
    border: 0;
    border-radius: 7px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 2px rgba(79, 70, 229, .25), 0 4px 12px -3px rgba(139, 92, 246, .4);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: filter .12s, transform .08s;
    font-family: inherit;
}

.ds-qtoolbar .ai-pill[b-8vd3ndurk5]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
    pointer-events: none;
}

.ds-qtoolbar .ai-pill:hover[b-8vd3ndurk5] {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.ds-qtoolbar .ai-pill:active[b-8vd3ndurk5] { transform: translateY(0); }

.ds-qtoolbar .share-btn-primary[b-8vd3ndurk5] {
    height: 30px;
    padding: 0 14px;
    background: var(--ss-primary);
    color: #fff;
    border: 0;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(79, 70, 229, .2);
    cursor: pointer;
    transition: background .12s;
    font-family: inherit;
}

.ds-qtoolbar .share-btn-primary:hover[b-8vd3ndurk5] { background: var(--ss-primary-deep); }
/* /Components/Pages/SuperSheet/Shell/StatusBar.razor.rz.scp.css */
/* Estilos propios de StatusBar — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/supersheet/shell.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Status bar (bottom, dark, 24px) ───────────────────── */
.ds-statusbar[b-pe39gpbcei] {
    background: var(--ss-ink);
    color: rgba(255, 255, 255, .6);
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 14px;
    font-size: 11px;
    font-family: var(--ss-font-mono);
    min-width: 0;
    overflow: hidden;
}

.ds-statusbar b[b-pe39gpbcei] {
    color: #fff;
    font-weight: 500;
}

.ds-statusbar .live[b-pe39gpbcei] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .85);
}

.ds-statusbar .live .dot[b-pe39gpbcei] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ss-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .2);
}

.ds-statusbar .live.off .dot[b-pe39gpbcei] {
    background: var(--ss-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .2);
}

.ds-statusbar .right[b-pe39gpbcei] {
    margin-left: auto;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-shrink: 0;
}

.ds-statusbar .sep[b-pe39gpbcei] { color: rgba(255, 255, 255, .18); }

.ds-statusbar .zoom[b-pe39gpbcei] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ds-statusbar .zoom button[b-pe39gpbcei] {
    width: 18px;
    height: 18px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .6);
    border-radius: 3px;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-family: inherit;
}

.ds-statusbar .zoom button:hover[b-pe39gpbcei] {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}
/* /Components/Pages/SuperSheet/Shell/ViewTabs.razor.rz.scp.css */
/* Estilos propios de ViewTabs — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/supersheet/shell.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── View tabs (38px between toolbar and grid) ─────────── */
.ds-viewtabs[b-w9fv70odjp] {
    background: var(--ss-surface);
    border-bottom: 1px solid var(--ss-border);
    display: flex;
    align-items: stretch;
    padding: 0 8px;
    height: 38px;
    flex-shrink: 0;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.ds-viewtabs[b-w9fv70odjp]::-webkit-scrollbar { height: 4px; }

.ds-viewtabs[b-w9fv70odjp]::-webkit-scrollbar-thumb {
    background: var(--ss-border);
    border-radius: 2px;
}

.ds-viewtabs .tab-wrap[b-w9fv70odjp] {
    display: inline-flex;
    align-items: stretch;
    height: 100%;
}

.ds-viewtabs .tab-star[b-w9fv70odjp] {
    background: transparent;
    border: 0;
    padding: 0 6px;
    color: var(--ss-muted-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.ds-viewtabs .tab-wrap-active .tab-star[b-w9fv70odjp] {
    border-bottom-color: var(--ss-primary);
}

.ds-viewtabs .tab-star:hover[b-w9fv70odjp] { color: var(--ss-warning-bright); }

.ds-viewtabs .tab-star.is-default[b-w9fv70odjp] { color: var(--ss-warning-bright); }

.ds-viewtabs .tab-star-static[b-w9fv70odjp] {
    color: var(--ss-warning-bright);
    font-size: 12px;
    align-self: center;
    padding-right: 6px;
}

.ds-viewtabs .tab[b-w9fv70odjp] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 100%;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--ss-muted);
    font-size: 12.5px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    position: relative;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.ds-viewtabs .tab:hover[b-w9fv70odjp] { color: var(--ss-ink-2); }

.ds-viewtabs .tab[aria-selected="true"][b-w9fv70odjp] {
    color: var(--ss-primary);
    border-bottom-color: var(--ss-primary);
}

.ds-viewtabs .tab .type-ico[b-w9fv70odjp] { color: var(--ss-muted); }

.ds-viewtabs .tab[aria-selected="true"] .type-ico[b-w9fv70odjp] { color: var(--ss-primary); }

.ds-viewtabs .tab .badge[b-w9fv70odjp] {
    font-family: var(--ss-font-mono);
    font-size: 9.5px;
    background: var(--ss-warning-bright);
    color: #fff;
    border-radius: 999px;
    padding: 0 5px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}

.ds-viewtabs .add[b-w9fv70odjp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    color: var(--ss-muted);
    font-size: 12.5px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.ds-viewtabs .add:hover[b-w9fv70odjp] { color: var(--ss-primary); }

.ds-viewtabs .view-actions[b-w9fv70odjp] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 4px;
    padding-left: 8px;
    flex-shrink: 0;
}

.ds-viewtabs .va-btn[b-w9fv70odjp] {
    height: 26px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    border-radius: 5px;
    color: var(--ss-ink-3);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.ds-viewtabs .va-btn:hover[b-w9fv70odjp] { background: var(--ss-surface-2); }

.ds-viewtabs .va-btn[data-active="true"][b-w9fv70odjp] {
    background: var(--ss-primary-soft);
    color: var(--ss-primary);
}

.ds-viewtabs .va-btn .count[b-w9fv70odjp] {
    font-family: var(--ss-font-mono);
    font-size: 10px;
    background: var(--ss-primary);
    color: #fff;
    border-radius: 999px;
    padding: 0 5px;
    height: 14px;
    display: inline-flex;
    align-items: center;
}

.ds-viewtabs .va-btn[data-active="false"] .count[b-w9fv70odjp] {
    background: var(--ss-surface-3);
    color: var(--ss-muted);
}
/* /Components/Pages/Whistleblower/CaseDrawer.razor.rz.scp.css */
/* Estilos propios de CaseDrawer — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/whistleblower.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

[b-tsszcdku90] .wb-drawer { padding-bottom: 24px; }

.wb-h4[b-tsszcdku90] {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.wb-kv[b-tsszcdku90] {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 3px 0;
    font-size: 0.875rem;
}

.wb-kv > span[b-tsszcdku90] {
    min-width: 11rem;
    color: var(--rz-text-tertiary-color);
}

.wb-narrative[b-tsszcdku90] {
    margin: 10px 0 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-300);
    white-space: pre-wrap;
    font-size: 0.9rem;
    line-height: 1.55;
}

.wb-muted[b-tsszcdku90] {
    margin: 0;
    color: var(--rz-text-tertiary-color);
    font-size: 0.875rem;
}

.wb-thread[b-tsszcdku90] {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wb-thread li[b-tsszcdku90] {
    max-width: 88%;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--rz-base-300);
}

.wb-thread .wb-in[b-tsszcdku90] {
    align-self: flex-start;
    background: var(--rz-base-background-color);
}

.wb-thread .wb-out[b-tsszcdku90] {
    align-self: flex-end;
    background: var(--rz-primary-lighter);
}

.wb-msg-meta[b-tsszcdku90] {
    margin: 0 0 4px;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.wb-msg-body[b-tsszcdku90] {
    margin: 0;
    white-space: pre-wrap;
    font-size: 0.875rem;
}

.wb-trail[b-tsszcdku90] {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
}

.wb-trail li[b-tsszcdku90] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px dashed var(--rz-base-300);
}

.wb-trail li:last-child[b-tsszcdku90] { border-bottom: none; }

.wb-trail-seq[b-tsszcdku90] {
    min-width: 3rem;
    color: var(--rz-text-tertiary-color);
    font-variant-numeric: tabular-nums;
}

.wb-trail-when[b-tsszcdku90] {
    min-width: 9rem;
    color: var(--rz-text-tertiary-color);
    font-variant-numeric: tabular-nums;
}

.wb-trail-kind[b-tsszcdku90] { font-weight: 600; }

.wb-trail-actor[b-tsszcdku90] { color: var(--rz-text-tertiary-color); }

@media (max-width: 900px) {
.wb-kv[b-tsszcdku90] { flex-direction: column; gap: 2px; }

.wb-kv > span[b-tsszcdku90] { min-width: 0; }

.wb-thread li[b-tsszcdku90] { max-width: 100%; }
}
/* /Components/Pages/Whistleblower/OffChannelReportDialog.razor.rz.scp.css */
/* Estilos propios de OffChannelReportDialog — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/whistleblower.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

.wb-kv[b-xwiaebwdg6] {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 3px 0;
    font-size: 0.875rem;
}

.wb-kv > span[b-xwiaebwdg6] {
    min-width: 11rem;
    color: var(--rz-text-tertiary-color);
}

@media (max-width: 900px) {
.wb-kv[b-xwiaebwdg6] { flex-direction: column; gap: 2px; }

.wb-kv > span[b-xwiaebwdg6] { min-width: 0; }
}
/* /Components/Pages/Whistleblower/WhistleblowerAdmin.razor.rz.scp.css */
/* Estilos propios de WhistleblowerAdmin — CSS isolation (tanda 2 de la migración).
   Vienen de wwwroot/css/rrhh/whistleblower.css; cada bloque adicional indica su hoja de
   origen. Declaraciones movidas byte a byte. Los selectores cuyo sujeto
   no recibe el b-{hash} (interiores Radzen .rz-* / .rzi, clases sobre
   componentes Radzen, contenido MarkupString/runtime o clases puestas
   desde C#) van con ::deep — mismo patrón que OrgChart.razor.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────────────────────
   Canal ético — management surface (/admin/canal-etico).
   Blueprint v3 §9.2: no <style> block ever lives in a .razor file.

   This is the INTERNAL surface and it does load the portal theme, so every colour
   comes from a Radzen token. The public /canal-etico pages are the opposite case
   and carry their own self-contained canal-etico.css.
   ──────────────────────────────────────────────────────────────────────────── */
.wb-shell[b-c8x1r4f8e6] {
    margin: 40px auto;
    max-width: 1500px;
}

.wb-title-bar[b-c8x1r4f8e6] {
    width: 4px;
    height: 40px;
    background: linear-gradient(180deg, var(--rz-primary) 0%, var(--rz-secondary) 100%);
    border-radius: 2px;
}

.wb-title[b-c8x1r4f8e6] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rz-text-color);
    letter-spacing: -0.3px;
}

.wb-subtitle[b-c8x1r4f8e6] {
    margin: 4px 0 0 0;
    font-size: 0.8125rem;
    color: var(--rz-text-tertiary-color);
}

/* Permanent legal banner: access to this register is a closed list and the
   Responsable del Sistema acts with independence (§5.1.3). */
.wb-legal[b-c8x1r4f8e6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    border-radius: 8px;
    border-left: 4px solid var(--rz-warning);
    background: var(--rz-warning-lighter);
    color: var(--rz-text-color);
    font-size: 0.8125rem;
}
/* /Components/Shared/AcademyEmptyState.razor.rz.scp.css */
/* Estado vacío / de error de la Academia.

   El espaciado lo pone el layout (`gap`), no un `margin-top` por hijo: era
   justo lo que hacían las veinte copias — 1rem al título, 0.5rem al mensaje,
   1.5rem al botón, repetidos a mano y sin nada que los mantuviera de acuerdo. */

.academy-empty[b-h56xdgqn4r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    /* Ceñido y centrado: el bloque anterior ocupaba TODO el ancho disponible, de
       modo que tres líneas de texto llegaban enmarcadas en un rectángulo
       punteado de 1700px. El mensaje no crece con la pantalla. */
    max-width: 32rem;
    margin-inline: auto;
    padding: 2.5rem 1.75rem;
    border: 1px dashed var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-content-background-color);
}

/* RadzenIcon y RadzenButton son componentes: no reciben el b-{hash}, así que
   se alcanzan con ::deep desde el div, que sí lo tiene. */
.academy-empty[b-h56xdgqn4r]  .academy-empty-icon {
    font-size: 2.5rem;
    color: var(--rz-base-300);
    line-height: 1;
    margin-bottom: 0.25rem;
}

/* Único cambio entre "no hay nada" y "ha fallado": el color del icono. El
   bloque se mantiene idéntico para que no parezcan dos pantallas distintas. */
.academy-empty-warning[b-h56xdgqn4r]  .academy-empty-icon {
    color: var(--rz-warning);
}

.academy-empty-title[b-h56xdgqn4r] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--rz-text-color);
    text-wrap: balance;
}

.academy-empty-message[b-h56xdgqn4r] {
    margin: 0;
    max-width: 46ch;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--rz-text-secondary-color);
}

.academy-empty[b-h56xdgqn4r]  .academy-empty-action {
    margin-top: 0.75rem;
}
/* /Components/Shared/CommandPalette/CommandPalette.razor.rz.scp.css */
/* Estilos propios de CommandPalette — CSS isolation.
   Vienen de wwwroot/css/command-palette.css. Verificado: ningun otro componente depende de
   estas clases sin declararlas en su propia hoja.
   ───────────────────────────────────────────────────────────────────────── */

/* Global Ctrl+K command palette. */
.cmd-palette-overlay[b-cryvni1ceg] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 20vh;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.cmd-palette-modal[b-cryvni1ceg] {
    width: min(640px, 92%);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--rz-panel-background-color);
    color: var(--rz-text-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.cmd-palette-search[b-cryvni1ceg] {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.1rem;
    font-size: 1rem;
    border: none;
    border-bottom: 1px solid var(--rz-base-200);
    background: transparent;
    color: var(--rz-text-color);
    outline: none;
}

.cmd-palette-list[b-cryvni1ceg] {
    flex: 1;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.cmd-palette-category[b-cryvni1ceg] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-tertiary-color);
    padding: 0.6rem 1rem 0.3rem;
    font-weight: 600;
}

.cmd-palette-item[b-cryvni1ceg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.cmd-palette-item.active[b-cryvni1ceg],
.cmd-palette-item:hover[b-cryvni1ceg] {
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
}

.cmd-palette-item-icon[b-cryvni1ceg] {
    width: 24px;
    display: flex;
    justify-content: center;
    color: var(--rz-text-secondary-color);
}

.cmd-palette-item.active .cmd-palette-item-icon[b-cryvni1ceg] {
    color: var(--rz-primary);
}

.cmd-palette-item-label[b-cryvni1ceg] {
    font-weight: 500;
    font-size: 0.9rem;
}

.cmd-palette-item-desc[b-cryvni1ceg] {
    color: var(--rz-text-secondary-color);
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

.cmd-palette-item-shortcut[b-cryvni1ceg] {
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.cmd-palette-empty[b-cryvni1ceg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    color: var(--rz-text-secondary-color);
    font-size: 0.85rem;
}

.cmd-palette-hint[b-cryvni1ceg] {
    border-top: 1px solid var(--rz-base-200);
    padding: 0.5rem 1rem;
    color: var(--rz-text-tertiary-color);
    font-size: 0.72rem;
    text-align: right;
}
/* /Components/Shared/Comments/RichCommentEditor.razor.rz.scp.css */
/* Estilos propios de RichCommentEditor — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/editor/rich-comment-editor.css.

   El envoltorio (`rich-comment-editor`, `--sending`, `__counter`) va sobre <div>s
   de este marcado y se acota solo. Todo lo que empieza por `.rz-` no: lo pinta
   RadzenHtmlEditor, asi que el `b-{hash}` no llega y esas reglas salen por
   `::deep`.

   Ojo al tocarlas: el combinador de cada una es una decision, no un descuido.
   Las que usan `>` acotan a hijo DIRECTO para no alcanzar los popups de Radzen,
   que se portan a <body>; la de los desplegables del toolbar usa descendiente a
   proposito porque el marcado anida dos envoltorios de por medio. `::deep` no
   cambia eso: deja intacto lo que va detras.
   ───────────────────────────────────────────────────────────────────────────── */

/* Rich comment editor — thin wrapper around RadzenHtmlEditor used by
   TicketDetailDialog and TaskDetailDialog. We deliberately do not override
   toolbar button backgrounds / icon colors so the editor inherits whatever
   theme is active (light / dark / corporate). */

.rich-comment-editor[b-pqopucyfa4] {
    position: relative;
    background: var(--rz-base-background-color);
    border-radius: 8px;
}

.rich-comment-editor--sending[b-pqopucyfa4] {
    opacity: 0.7;
    pointer-events: none;
}

/* Scope every rule to a DIRECT child of the wrapper so Radzen popups that
   are portaled to <body> are never matched, and no other editor on the
   page is accidentally restyled. */
.rich-comment-editor[b-pqopucyfa4]  > .rz-html-editor {
    border-radius: 8px;
    box-shadow: none;
    border: 1px solid var(--rz-base-300);
}

.rich-comment-editor[b-pqopucyfa4]  > .rz-html-editor > .rz-html-editor-toolbar {
    border-bottom: 1px solid var(--rz-base-200);
    border-radius: 8px 8px 0 0;
    padding: 4px 6px;
    gap: 1px;
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--rz-base-200) 35%, transparent);
}

/* Tighter buttons + clearer hover so the bar reads as a single grouped strip
   instead of a scattered row of icons. */
.rich-comment-editor[b-pqopucyfa4]  > .rz-html-editor > .rz-html-editor-toolbar .rz-html-editor-button {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    transition: background 0.12s ease, color 0.12s ease;
}

.rich-comment-editor[b-pqopucyfa4]  > .rz-html-editor > .rz-html-editor-toolbar .rz-html-editor-button:hover {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
}

.rich-comment-editor[b-pqopucyfa4]  > .rz-html-editor > .rz-html-editor-toolbar .rz-html-editor-separator {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: var(--rz-base-300);
    opacity: 0.6;
}

/* Format-block and font-size are RadzenDropDowns whose default widths (120px /
   70px) clip their Spanish labels — they render as "Bloque de…" and "Ta…". The
   toolbar already wraps, so give both room to show the full label.

   NOTE the descendant selector: the editor markup nests the Radzen editor two
   wrappers deep (.rich-comment-editor > __shell > __editor-col > .rz-html-editor),
   so the `>` chain used by the rules above silently stops matching. Scoping to
   .rich-comment-editor is still enough to skip popups, which portal to <body>. */
.rich-comment-editor[b-pqopucyfa4]  .rz-html-editor-toolbar .rz-dropdown {
    /* 150px still clipped "Bloque de formato" by ~5px; 175px leaves margin for the
       longer labels other locales use (eu/pt/gl) without re-measuring per language. */
    min-width: 175px;
}

.rich-comment-editor[b-pqopucyfa4]  > .rz-html-editor > .rz-html-editor-content table {
    border-collapse: collapse;
    max-width: 100%;
}

.rich-comment-editor[b-pqopucyfa4]  > .rz-html-editor > .rz-html-editor-content table td,
.rich-comment-editor[b-pqopucyfa4]  > .rz-html-editor > .rz-html-editor-content table th {
    border: 1px solid var(--rz-base-300);
    padding: 4px 8px;
}

.rich-comment-editor[b-pqopucyfa4]  > .rz-html-editor > .rz-html-editor-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.rich-comment-editor__counter[b-pqopucyfa4] {
    position: absolute;
    right: 8px;
    bottom: 6px;
    font-size: 0.7rem;
    color: var(--rz-text-tertiary-color);
    background: var(--rz-base-background-color);
    padding: 1px 6px;
    border-radius: 4px;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.rich-comment-editor__counter--near[b-pqopucyfa4] {
    color: var(--rz-warning, #b36b00);
}

.rich-comment-editor__counter--over[b-pqopucyfa4] {
    color: var(--rz-danger, #c0392b);
    font-weight: 600;
}
/* /Components/Shared/GlobalSearchBox.razor.rz.scp.css */
/* Estilos propios de GlobalSearchBox — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/shared/global-search.css. Todo el marcado del buscador
   (toggle, .global-search, .global-search-field — un div plano con la clase
   rz-textbox puesta a mano como cosmética, no un componente Radzen —, el
   <input> plano, clear, dropdown completo, hints y kbd) vive en
   GlobalSearchBox.razor → b-{hash} directo, sin ::deep ni envoltorio.

   Los prefijos [data-bs-theme=dark] funcionan bajo isolation porque el
   atributo vive en un ancestro real (<html>) y el hash se aplica al último
   selector. Los pseudo -webkit-autofill van sobre el input propio. .rzi-spin
   y @keyframes global-search-spin viajan tal cual: el duplicado con la
   familia artifact-card es legítimo bajo isolation (cada hoja con su hash).
   Hasta hoy en el buscador ganaba la def de artifact-card.css (1.1s +
   inline-block); recuperar la propia (0.9s) es el cambio esperado.
   ───────────────────────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────────────────────
   Global Search Box (header)
   Mounted in MainLayout next to the header action icons. Uses the header tokens
   (--rz-header-*) so it follows whatever surface the header has, in both themes.
   ──────────────────────────────────────────────────────────────────────────── */

.global-search[b-g0luuyxy81] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 320px;
    min-width: 200px;
    max-width: 420px;
    margin-left: 0.5rem;
    z-index: 1010; /* above the rest of the header so dropdown is not clipped */
}

/* Pastilla suave sobre la banda del header.
   ANTES estaba cableado a blanco (rgba(255,255,255,.85)) porque el header era un
   degradado índigo oscuro. Al pasar el header a la misma superficie que el
   sidebar, ese blanco dejaba el buscador INVISIBLE — texto blanco sobre fondo
   claro, sin ningún error, solo un campo que parecía vacío.
   Todo el color sale ahora de los tokens del header, así que si el header vuelve
   a cambiar de tono el buscador acompaña sin tocar este fichero. */
.global-search .global-search-field.rz-textbox[b-g0luuyxy81],
.global-search .global-search-field[b-g0luuyxy81] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 6px 12px !important;
    height: 36px !important;
    background: var(--rz-header-search-background-color) !important;
    background-color: var(--rz-header-search-background-color) !important;
    color: var(--rz-header-color) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 13px !important;
    transition: background-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out !important;
}

.global-search .global-search-field.rz-textbox:hover[b-g0luuyxy81],
.global-search .global-search-field:hover[b-g0luuyxy81],
.global-search.is-open .global-search-field[b-g0luuyxy81],
.global-search .global-search-field:focus-within[b-g0luuyxy81] {
    background: var(--rz-base-background-color) !important;
    background-color: var(--rz-base-background-color) !important;
    border: none !important;
    box-shadow: 0 0 0 2px var(--rz-primary-lighter), 0 1px 2px rgba(15, 23, 42, 0.06) !important;
    outline: none !important;
}

.global-search-icon[b-g0luuyxy81] {
    font-size: 1.05rem;
    color: var(--rz-text-secondary-color) !important;
    background: transparent !important;
    flex-shrink: 0;
}

.rzi-spin[b-g0luuyxy81] {
    animation: global-search-spin-b-g0luuyxy81 0.9s linear infinite;
}

@keyframes global-search-spin-b-g0luuyxy81 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.global-search .global-search-field input.global-search-input[b-g0luuyxy81],
.global-search .global-search-field input.global-search-input:focus[b-g0luuyxy81],
.global-search .global-search-field input.global-search-input:hover[b-g0luuyxy81],
.global-search .global-search-field input.global-search-input:active[b-g0luuyxy81],
.global-search .global-search-field input.global-search-input[type="text"][b-g0luuyxy81] {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--rz-header-color) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    min-width: 0 !important;
    padding: 0 0.25rem !important;
    height: auto !important;
}

.global-search-input[b-g0luuyxy81]::placeholder {
    color: var(--rz-text-secondary-color) !important;
    opacity: 1;
}

/* Override Chrome / Edge autofill yellow-white that overrides our transparent bg */
.global-search-input:-webkit-autofill[b-g0luuyxy81],
.global-search-input:-webkit-autofill:hover[b-g0luuyxy81],
.global-search-input:-webkit-autofill:focus[b-g0luuyxy81],
.global-search-input:-webkit-autofill:active[b-g0luuyxy81] {
    -webkit-text-fill-color: var(--rz-header-color) !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    transition: background-color 9999s ease-in-out 0s;
    caret-color: var(--rz-header-color);
}

.global-search-clear[b-g0luuyxy81] {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0.15rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: background-color 0.12s ease-in-out, opacity 0.12s ease-in-out;
}

.global-search-clear:hover[b-g0luuyxy81] {
    opacity: 1;
    background: var(--rz-header-hover-background-color);
}

.global-search-clear i[b-g0luuyxy81] {
    font-size: 1rem;
}

/* Mobile-toggle button when the input collapses to an icon */
.global-search-toggle[b-g0luuyxy81] {
    border: none;
    background: transparent;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.12s ease-in-out;
}

.global-search-toggle:hover[b-g0luuyxy81] {
    background: var(--rz-header-hover-background-color);
}

/* ── Dropdown ─────────────────────────────────────────────────────────── */

.global-search-dropdown[b-g0luuyxy81] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: min(520px, 70vh);
    overflow-y: auto;
    background: var(--rz-panel-background-color, #ffffff);
    color: var(--rz-text-color, #0f172a);
    border: 1px solid var(--rz-base-200, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
    padding: 0.25rem 0 0;
    overscroll-behavior: contain;
}

.global-search-empty[b-g0luuyxy81] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 1rem 1.1rem;
    color: var(--rz-text-tertiary-color, #64748b);
    font-size: 0.875rem;
}

.global-search-empty i[b-g0luuyxy81] {
    font-size: 1.1rem;
    opacity: 0.8;
}

.global-search-group[b-g0luuyxy81] {
    padding: 0.15rem 0 0.35rem;
    border-bottom: 1px solid var(--rz-base-100, #f1f5f9);
}

.global-search-group:last-of-type[b-g0luuyxy81] {
    border-bottom: none;
}

.global-search-group-head[b-g0luuyxy81] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rz-text-tertiary-color, #64748b);
}

.global-search-group-head i[b-g0luuyxy81] {
    font-size: 1rem;
    color: var(--rz-primary, #4f46e5);
    opacity: 0.85;
}

.global-search-group-count[b-g0luuyxy81] {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--rz-text-tertiary-color, #94a3b8);
    background: var(--rz-base-100, #f1f5f9);
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
}

.global-search-item[b-g0luuyxy81] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    transition: background-color 0.08s ease-in-out;
}

.global-search-item:hover[b-g0luuyxy81],
.global-search-item.active[b-g0luuyxy81] {
    background: var(--rz-base-100, #f1f5f9);
}

.global-search-item-icon[b-g0luuyxy81] {
    width: 22px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.global-search-item-icon i[b-g0luuyxy81] {
    color: var(--rz-text-tertiary-color, #94a3b8);
    font-size: 1.05rem;
}

.global-search-item-main[b-g0luuyxy81] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.global-search-item-title[b-g0luuyxy81] {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--rz-text-color, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-search-item-sub[b-g0luuyxy81] {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-search-item-badge[b-g0luuyxy81] {
    flex-shrink: 0;
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--rz-base-100, #f1f5f9);
    color: var(--rz-text-secondary-color, #475569);
    border: 1px solid var(--rz-base-200, #e2e8f0);
    text-transform: capitalize;
}

.global-search-hint[b-g0luuyxy81] {
    display: flex;
    gap: 1rem;
    padding: 0.45rem 0.9rem;
    border-top: 1px solid var(--rz-base-100, #f1f5f9);
    font-size: 0.7rem;
    color: var(--rz-text-tertiary-color, #94a3b8);
}

.global-search-hint kbd[b-g0luuyxy81] {
    background: var(--rz-base-100, #f1f5f9);
    border: 1px solid var(--rz-base-200, #e2e8f0);
    border-radius: 4px;
    padding: 0 0.3rem;
    font-family: var(--rz-font-family, inherit);
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color, #475569);
    margin-right: 0.2rem;
}

/* ── Dark mode tweaks ─────────────────────────────────────────────────── */

[data-bs-theme="dark"] .global-search-dropdown[b-g0luuyxy81] {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
}

[data-bs-theme="dark"] .global-search-group[b-g0luuyxy81] {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .global-search-item:hover[b-g0luuyxy81],
[data-bs-theme="dark"] .global-search-item.active[b-g0luuyxy81] {
    background: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .global-search-group-count[b-g0luuyxy81],
[data-bs-theme="dark"] .global-search-hint kbd[b-g0luuyxy81],
[data-bs-theme="dark"] .global-search-item-badge[b-g0luuyxy81] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.78);
}

[data-bs-theme="dark"] .global-search-item-title[b-g0luuyxy81] {
    color: rgba(255, 255, 255, 0.92);
}

[data-bs-theme="dark"] .global-search-item-sub[b-g0luuyxy81],
[data-bs-theme="dark"] .global-search-group-head[b-g0luuyxy81],
[data-bs-theme="dark"] .global-search-hint[b-g0luuyxy81] {
    color: rgba(255, 255, 255, 0.65);
}

[data-bs-theme="dark"] .global-search-empty[b-g0luuyxy81] {
    color: rgba(255, 255, 255, 0.65);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .global-search[b-g0luuyxy81] {
        flex: 0 1 260px;
        min-width: 160px;
    }
}

@media (max-width: 720px) {
    /* Compact mode is driven by the component, but if any branch leaks the
       expanded box on narrow viewports we make it small + non-blocking. */
    .global-search[b-g0luuyxy81] {
        flex: 0 1 220px;
        min-width: 0;
    }

    .global-search-input[b-g0luuyxy81] {
        font-size: 0.8rem;
    }
}
/* /Components/Shared/Markdown/ModelMarkdown.razor.rz.scp.css */
/* Estilos propios de ModelMarkdown — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/chat/ai-media.css (SPLIT). Este componente solo escribe
   TRES divs en su .razor: el root (md-wrapper o md-image-grid, clase dinámica),
   .ai-image-container y el div .model-md — solo ellos reciben el b-{hash}.
   TODO lo demás llega en runtime: MarkupString (_fixedImageHtml y el markdown
   renderizado) y DOM que pinta wwwroot/js/chat/ai-media.js. Al compilador no le
   consta ese marcado, así que sin ::deep esas reglas morirían en silencio.

   Anclajes:
   - Familias ai-* (preview/final/actionbar/video/error): pueden aparecer tanto
     dentro de .ai-image-container como dentro de .model-md, así que van
     ancladas en el ROOT con la pareja `.md-wrapper ::deep …, .md-image-grid
     ::deep …` (el root cubre ambos contenedores; display:contents no afecta al
     matching de descendientes).
   - Tipografía y código de .model-md (h1..h6/p/ul/table/pre/code, codebox,
     code-skin, md-streaming-table-partial): ancladas en `.model-md ::deep`.
   - Los divs propios y sus combinadores directos (.md-image-grid >
     .ai-image-container / > .model-md, :has/:empty sobre ellos) van directos.

   Lo que NO está aquí y no es un olvido:
   - #ai-viewer y body.ai-lock: el lightbox lo crea ai-media.js con
     document.body.appendChild y el sujeto body está FUERA del componente —
     ::deep solo baja. Viven en wwwroot/css/chat/ai-media-lightbox.css.
   - .chat-message .generated-image/.revised-prompt: el sujeto es marcado de
     FloatingChat → FloatingChat.razor.css.
   - .user-text: lo escriben ChatAdminDetail y QueueEditPage → sus .razor.css.
   Los @keyframes viajan tal cual; ai-spin se duplica también en el residuo del
   lightbox (duplicar bloques idénticos por hoja es lo correcto bajo isolation).
   ───────────────────────────────────────────────────────────────────────────── */

/* ============================================
   SHARED BASE STYLES + LAYOUT VARIABLES
   Preview and final share these exact dimensions, which is what guarantees NO
   layout shift when one replaces the other.

   The four --ai-* custom properties used to be declared on :root, which put
   image-generation implementation details in the global namespace of every page
   in the portal. They are read by this one rule and nothing else, so they are
   declared on it: same values, same cascade, no leak.
   ============================================ */
.md-wrapper[b-48e950s82p]  .ai-preview-wrap,
.md-image-grid[b-48e950s82p]  .ai-preview-wrap,
.md-wrapper[b-48e950s82p]  figure.ai-final,
.md-image-grid[b-48e950s82p]  figure.ai-final {
    --ai-img-max: 900px;
    --ai-img-margin: 4px 0;
    --ai-img-radius: 10px;
    --ai-skeleton-bg: linear-gradient(135deg,
        var(--rz-base-200, #1a1a2e) 0%,
        var(--rz-base-300, #16213e) 100%);

    display: block;
    position: relative;
    width: 100%;
    max-width: var(--ai-img-max);
    margin: var(--ai-img-margin);
    border-radius: var(--ai-img-radius);
    box-sizing: border-box;
    aspect-ratio: var(--img-ratio, 3/2);
    background: var(--ai-skeleton-bg);
    overflow: hidden;
}

/* ============================================
   PREVIEW - Hidden by default, shown when .ai-live
   ============================================ */
.md-wrapper[b-48e950s82p]  .ai-preview-wrap,
.md-image-grid[b-48e950s82p]  .ai-preview-wrap {
    display: none;
    z-index: 5;
}

.md-wrapper[b-48e950s82p]  .ai-preview-wrap.ai-live,
.md-image-grid[b-48e950s82p]  .ai-preview-wrap.ai-live {
    display: block !important;
}

/* ai-prune hides completely (after final loaded) */
.md-wrapper[b-48e950s82p]  .ai-preview-wrap.ai-prune,
.md-image-grid[b-48e950s82p]  .ai-preview-wrap.ai-prune,
.md-wrapper[b-48e950s82p]  .ai-prune,
.md-image-grid[b-48e950s82p]  .ai-prune {
    display: none !important;
}

/* Evita parpadeo del <img> efímero */
.md-wrapper[b-48e950s82p]  img.ai-preview,
.md-image-grid[b-48e950s82p]  img.ai-preview {
    display: none !important;
}

/* Scanning animation - elegant sweep effect */
.md-wrapper[b-48e950s82p]  .ai-preview-wrap.scanning::before,
.md-image-grid[b-48e950s82p]  .ai-preview-wrap.scanning::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(99, 102, 241, 0.1) 25%,
        rgba(139, 92, 246, 0.15) 50%,
        rgba(99, 102, 241, 0.1) 75%,
        transparent 100%
    );
    animation: ai-scan-b-48e950s82p 2s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
}

/* Pulsing border glow during generation */
.md-wrapper[b-48e950s82p]  .ai-preview-wrap.scanning::after,
.md-image-grid[b-48e950s82p]  .ai-preview-wrap.scanning::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    background: linear-gradient(45deg,
        rgba(99, 102, 241, 0.4),
        rgba(139, 92, 246, 0.4),
        rgba(236, 72, 153, 0.4),
        rgba(99, 102, 241, 0.4));
    background-size: 300% 300%;
    animation: ai-border-glow-b-48e950s82p 3s ease infinite;
    z-index: -1;
    filter: blur(4px);
}

@keyframes ai-scan-b-48e950s82p {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes ai-border-glow-b-48e950s82p {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Progress bar at bottom */
.md-wrapper[b-48e950s82p]  .ai-preview-wrap .ai-progress,
.md-image-grid[b-48e950s82p]  .ai-preview-wrap .ai-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

/* Status indicator */
.md-wrapper[b-48e950s82p]  .ai-preview-wrap .ai-status,
.md-image-grid[b-48e950s82p]  .ai-preview-wrap .ai-status {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
}

.md-wrapper[b-48e950s82p]  .ai-preview-wrap .ai-status .spinner,
.md-image-grid[b-48e950s82p]  .ai-preview-wrap .ai-status .spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ai-spin-b-48e950s82p 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes ai-spin-b-48e950s82p {
    to { transform: rotate(360deg); }
}

/* Logo/icon in center during generation */
.md-wrapper[b-48e950s82p]  .ai-preview-wrap .ai-logo,
.md-image-grid[b-48e950s82p]  .ai-preview-wrap .ai-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    opacity: 0.7;
    z-index: 3;
    animation: ai-pulse-b-48e950s82p 2s ease-in-out infinite;
}

@keyframes ai-pulse-b-48e950s82p {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.05); }
}

/* Frame images (for streaming preview) */
.md-wrapper[b-48e950s82p]  .ai-preview-wrap > img.ai-frame,
.md-image-grid[b-48e950s82p]  .ai-preview-wrap > img.ai-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.md-wrapper[b-48e950s82p]  .ai-preview-wrap > img.ai-frame.ai-reveal,
.md-image-grid[b-48e950s82p]  .ai-preview-wrap > img.ai-frame.ai-reveal {
    opacity: 1;
}


/* ============================================
   FINAL GENERATED IMAGE/VIDEO
   Base styles are shared with .ai-preview-wrap above.
   These are ONLY the additional/override styles for final.
   ============================================ */

/* Allow actionbar to overflow, ensure relative positioning */
.md-wrapper[b-48e950s82p]  figure.ai-final,
.md-image-grid[b-48e950s82p]  figure.ai-final {
    overflow: visible;
    position: relative;
}

/* When ready: remove skeleton background */
.md-wrapper[b-48e950s82p]  figure.ai-final.ai-ready,
.md-image-grid[b-48e950s82p]  figure.ai-final.ai-ready {
    background: transparent !important;
}

/* Image positioning - absolute when we have aspect-ratio, static otherwise */
.md-wrapper[b-48e950s82p]  figure.ai-final .ai-thumb,
.md-image-grid[b-48e950s82p]  figure.ai-final .ai-thumb {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ai-img-radius, 10px);
    object-fit: contain;
    cursor: pointer;
    /* CRITICAL: Both opacity AND visibility hidden until ready */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* When figure has aspect-ratio (inline style --img-ratio), use absolute positioning */
.md-wrapper[b-48e950s82p]  figure.ai-final[style*="--img-ratio"] .ai-thumb,
.md-image-grid[b-48e950s82p]  figure.ai-final[style*="--img-ratio"] .ai-thumb {
    position: absolute;
    inset: 0;
    height: 100%;
}

/* Show image once figure is ready */
.md-wrapper[b-48e950s82p]  figure.ai-final.ai-ready .ai-thumb,
.md-image-grid[b-48e950s82p]  figure.ai-final.ai-ready .ai-thumb {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.md-wrapper[b-48e950s82p]  figure.ai-final:hover .ai-thumb,
.md-image-grid[b-48e950s82p]  figure.ai-final:hover .ai-thumb {
    transform: scale(1.02);
}

.md-wrapper[b-48e950s82p]  figure.ai-final video.ai-thumb,
.md-image-grid[b-48e950s82p]  figure.ai-final video.ai-thumb {
    cursor: default;
}

.md-wrapper[b-48e950s82p]  figure.ai-final video.ai-thumb:hover,
.md-image-grid[b-48e950s82p]  figure.ai-final video.ai-thumb:hover {
    transform: none;
}
/* Caption below image */
.md-wrapper[b-48e950s82p]  figure.ai-final figcaption,
.md-image-grid[b-48e950s82p]  figure.ai-final figcaption {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--rz-text-secondary-color, #94a3b8);
    font-style: italic;
    text-align: center;
    background: var(--rz-base-100, #0f172a);
}


/* ============================================
   ACTION BAR (Download, Zoom, etc.)
   ============================================ */

.md-wrapper[b-48e950s82p]  .ai-actionbar,
.md-image-grid[b-48e950s82p]  .ai-actionbar {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
    /* Hide completely until image is ready */
    visibility: hidden;
}

/* Only show actionbar on ready figures */
.md-wrapper[b-48e950s82p]  figure.ai-final.ai-ready .ai-actionbar,
.md-image-grid[b-48e950s82p]  figure.ai-final.ai-ready .ai-actionbar {
    visibility: visible;
}

.md-wrapper[b-48e950s82p]  figure.ai-final.ai-ready:hover .ai-actionbar,
.md-image-grid[b-48e950s82p]  figure.ai-final.ai-ready:hover .ai-actionbar {
    opacity: 1;
    transform: translateY(0);
}

.md-wrapper[b-48e950s82p]  .ai-btn,
.md-image-grid[b-48e950s82p]  .ai-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(0,0,0,0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.md-wrapper[b-48e950s82p]  .ai-btn:hover,
.md-image-grid[b-48e950s82p]  .ai-btn:hover {
    background: rgba(99, 102, 241, 0.8);
    transform: scale(1.05);
}

.md-wrapper[b-48e950s82p]  .ai-btn svg,
.md-image-grid[b-48e950s82p]  .ai-btn svg {
    width: 18px;
    height: 18px;
}


/* ============================================
   VIDEO-SPECIFIC STYLES
   ============================================ */

.md-wrapper[b-48e950s82p]  .ai-video-wrap,
.md-image-grid[b-48e950s82p]  .ai-video-wrap {
    --img-ratio: 16/9;
}

.md-wrapper[b-48e950s82p]  .ai-video-wrap.portrait,
.md-image-grid[b-48e950s82p]  .ai-video-wrap.portrait {
    --img-ratio: 9/16;
    max-width: 400px;
}

/* Video controls overlay hint */
.md-wrapper[b-48e950s82p]  figure.ai-final.video::before,
.md-image-grid[b-48e950s82p]  figure.ai-final.video::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 5;
}

.md-wrapper[b-48e950s82p]  figure.ai-final.video::after,
.md-image-grid[b-48e950s82p]  figure.ai-final.video::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateX(2px);
    border: 12px solid transparent;
    border-left: 20px solid white;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 6;
}

.md-wrapper[b-48e950s82p]  figure.ai-final.video:hover::before,
.md-image-grid[b-48e950s82p]  figure.ai-final.video:hover::before,
.md-wrapper[b-48e950s82p]  figure.ai-final.video:hover::after,
.md-image-grid[b-48e950s82p]  figure.ai-final.video:hover::after {
    opacity: 0.8;
}


/* ============================================
   RESPONSIVE ADJUSTMENTS
   (el fragmento #ai-viewer .vbtn de este @media vive en
    wwwroot/css/chat/ai-media-lightbox.css — regla de sujeto externo)
   ============================================ */

@media (max-width: 640px) {
    .md-wrapper[b-48e950s82p]  .ai-preview-wrap,
    .md-image-grid[b-48e950s82p]  .ai-preview-wrap,
    .md-wrapper[b-48e950s82p]  figure.ai-final,
    .md-image-grid[b-48e950s82p]  figure.ai-final {
        border-radius: 8px;
        max-width: 100%;
    }

    .md-wrapper[b-48e950s82p]  .ai-actionbar,
    .md-image-grid[b-48e950s82p]  .ai-actionbar {
        opacity: 1;
        transform: translateY(0);
    }

    .md-wrapper[b-48e950s82p]  .ai-btn,
    .md-image-grid[b-48e950s82p]  .ai-btn {
        width: 32px;
        height: 32px;
    }

    .md-wrapper[b-48e950s82p]  .ai-preview-wrap .ai-status,
    .md-image-grid[b-48e950s82p]  .ai-preview-wrap .ai-status {
        font-size: 12px;
        bottom: 12px;
        left: 12px;
    }

    .md-wrapper[b-48e950s82p]  .ai-video-progress,
    .md-image-grid[b-48e950s82p]  .ai-video-progress {
        max-width: 100%;
    }
}


/* ============================================
   VIDEO GENERATION PROGRESS SKELETON
   ============================================ */

.md-wrapper[b-48e950s82p]  .ai-video-progress,
.md-image-grid[b-48e950s82p]  .ai-video-progress {
    width: 100%;
    max-width: var(--img-max, 800px);
    margin: 4px auto;
    position: relative;
    box-sizing: border-box;
    aspect-ratio: var(--img-ratio, 16/9);
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg,
        var(--rz-base-200, #1a1a2e) 0%,
        var(--rz-base-300, #16213e) 50%,
        var(--rz-base-200, #1a1a2e) 100%);
    background-size: 200% 200%;
    animation: ai-video-bg-pulse-b-48e950s82p 3s ease-in-out infinite;
}

.md-wrapper[b-48e950s82p]  .ai-video-progress.portrait,
.md-image-grid[b-48e950s82p]  .ai-video-progress.portrait {
    max-width: 400px;
}

@keyframes ai-video-bg-pulse-b-48e950s82p {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Pulsing border glow */
.md-wrapper[b-48e950s82p]  .ai-video-progress::before,
.md-image-grid[b-48e950s82p]  .ai-video-progress::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    background: linear-gradient(45deg,
        rgba(99, 102, 241, 0.3),
        rgba(139, 92, 246, 0.3),
        rgba(236, 72, 153, 0.3),
        rgba(99, 102, 241, 0.3));
    background-size: 300% 300%;
    animation: ai-border-glow-b-48e950s82p 3s ease infinite;
    z-index: -1;
    filter: blur(4px);
}

/* Scanning line animation */
.md-wrapper[b-48e950s82p]  .ai-video-progress::after,
.md-image-grid[b-48e950s82p]  .ai-video-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(139, 92, 246, 0.1) 45%,
        rgba(139, 92, 246, 0.2) 50%,
        rgba(139, 92, 246, 0.1) 55%,
        transparent 100%
    );
    animation: ai-video-scan-b-48e950s82p 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ai-video-scan-b-48e950s82p {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.md-wrapper[b-48e950s82p]  .ai-video-skeleton,
.md-image-grid[b-48e950s82p]  .ai-video-skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    padding: 20px;
}

.md-wrapper[b-48e950s82p]  .ai-video-spinner,
.md-image-grid[b-48e950s82p]  .ai-video-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(139, 92, 246, 0.2);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: ai-spin-b-48e950s82p 0.9s linear infinite;
}

.md-wrapper[b-48e950s82p]  .ai-video-status,
.md-image-grid[b-48e950s82p]  .ai-video-status {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.025em;
}

.md-wrapper[b-48e950s82p]  .ai-video-elapsed,
.md-image-grid[b-48e950s82p]  .ai-video-elapsed {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, monospace;
}


/* ============================================
   ERROR STATE
   ============================================ */

.md-wrapper[b-48e950s82p]  .ai-preview-wrap.error,
.md-image-grid[b-48e950s82p]  .ai-preview-wrap.error {
    border: 2px solid rgba(239, 68, 68, 0.5);
}

.md-wrapper[b-48e950s82p]  .ai-preview-wrap.error::before,
.md-image-grid[b-48e950s82p]  .ai-preview-wrap.error::before {
    display: none;
}

.md-wrapper[b-48e950s82p]  .ai-preview-wrap.error .ai-status,
.md-image-grid[b-48e950s82p]  .ai-preview-wrap.error .ai-status {
    color: #fca5a5;
}

.md-wrapper[b-48e950s82p]  .ai-preview-wrap.error .spinner,
.md-image-grid[b-48e950s82p]  .ai-preview-wrap.error .spinner {
    display: none;
}

.md-wrapper[b-48e950s82p]  .ai-preview-wrap.error .ai-status::before,
.md-image-grid[b-48e950s82p]  .ai-preview-wrap.error .ai-status::before {
    content: '⚠️';
    margin-right: 6px;
}


/* ============================================
   PRUNE - Hide skeleton when final arrives
   ============================================ */

.md-wrapper[b-48e950s82p]  .ai-prune,
.md-image-grid[b-48e950s82p]  .ai-prune {
    display: none !important;
    max-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Also remove the hidden containers after generation */
.md-wrapper[b-48e950s82p]  .ai-preview-wrap[style*="display:none"],
.md-image-grid[b-48e950s82p]  .ai-preview-wrap[style*="display:none"],
.md-wrapper[b-48e950s82p]  .ai-preview-wrap[style*="display: none"],
.md-image-grid[b-48e950s82p]  .ai-preview-wrap[style*="display: none"] {
    display: none !important;
}


/* ============================================
   MODEL MARKDOWN CONTAINER
   ============================================ */

/* Default wrapper - normal flow */
.md-wrapper[b-48e950s82p] {
    display: contents; /* No layout impact */
}

/* Grid wrapper - image and preview overlap in same cell */
.md-image-grid[b-48e950s82p] {
    display: grid;
    grid-template-columns: 1fr;
    /* Single row - both elements overlap */
}

/* Both elements go to row 1, column 1 - overlap each other */
.md-image-grid > .ai-image-container[b-48e950s82p] {
    grid-column: 1;
    grid-row: 1;
    z-index: 1; /* Final starts below preview */
}

/* When final is ready, bring it to front */
.md-image-grid > .ai-image-container:has(.ai-ready)[b-48e950s82p] {
    z-index: 3; /* Above preview */
}

.md-image-grid > .model-md[b-48e950s82p] {
    grid-column: 1;
    grid-row: 1;
    z-index: 2; /* Preview on top until final is ready */
    /* Align to top-left so preview matches image position */
    align-self: start;
    justify-self: start;
}

/* Hide empty model-md when it only contains hidden preview */
.md-image-grid > .model-md:empty[b-48e950s82p],
.md-image-grid > .model-md:has(.ai-prune):not(:has(:not(.ai-prune)))[b-48e950s82p] {
    display: none;
}

.model-md[b-48e950s82p] {
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Prevent the parent container (pre-wrap) from exaggerating whitespace */
    white-space: normal;
}

/* Headings: smaller + tighter spacing (corporate, readable) */
.model-md[b-48e950s82p]  h1,
.model-md[b-48e950s82p]  h2,
.model-md[b-48e950s82p]  h3,
.model-md[b-48e950s82p]  h4,
.model-md[b-48e950s82p]  h5,
.model-md[b-48e950s82p]  h6 {
    margin: 0.85em 0 0.35em;
    line-height: 1.25;
    font-weight: 700;
}

.model-md[b-48e950s82p]  h1 { font-size: 1.15em; }
.model-md[b-48e950s82p]  h2 { font-size: 1.08em; }
.model-md[b-48e950s82p]  h3 { font-size: 1.02em; }
.model-md[b-48e950s82p]  h4 { font-size: 1.00em; }
.model-md[b-48e950s82p]  h5 { font-size: 0.96em; }
.model-md[b-48e950s82p]  h6 { font-size: 0.94em; }

.model-md[b-48e950s82p]  > :first-child { margin-top: 0; }

.model-md[b-48e950s82p]  p { margin: 0 0 0.6em; }
.model-md[b-48e950s82p]  p:last-child { margin-bottom: 0; }

.model-md[b-48e950s82p]  ul,
.model-md[b-48e950s82p]  ol {
    margin: 0.35em 0 0.6em;
    padding-left: 1.25em;
}

.model-md[b-48e950s82p]  li { margin: 0.1em 0; }
.model-md[b-48e950s82p]  li:last-child { margin-bottom: 0; }

.model-md[b-48e950s82p]  li p { margin: 0.25em 0; }

/* Tables with proper borders using theme variables */
.model-md[b-48e950s82p]  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75em 0;
    font-size: 0.95em;
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.model-md[b-48e950s82p]  th,
.model-md[b-48e950s82p]  td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid var(--rz-border-color);
}

.model-md[b-48e950s82p]  th {
    background: var(--rz-base-200);
    font-weight: 600;
    color: var(--rz-text-color);
}

.model-md[b-48e950s82p]  td {
    background: transparent;
}

.model-md[b-48e950s82p]  pre,
.model-md[b-48e950s82p]  code,
.model-md[b-48e950s82p]  .codebox {
    max-width: 100%;
    overflow: auto;
}

.model-md[b-48e950s82p]  code:not(.codebox code) {
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}


/* ============================================
   CODEBOX - Code block with toolbar
   ============================================ */

.model-md[b-48e950s82p]  .codebox {
    background: #0b0f14;
    border: 1px solid #1e293b;
    border-radius: 12px;
    overflow: hidden;
    margin: 12px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    --code-accent: #334155;
}

.model-md[b-48e950s82p]  .codebox[data-lang="python"] { --code-accent: #3572A5; }
.model-md[b-48e950s82p]  .codebox[data-lang="sql"] { --code-accent: #b65c00; }
.model-md[b-48e950s82p]  .codebox[data-lang="csharp"] { --code-accent: #178600; }
.model-md[b-48e950s82p]  .codebox[data-lang="cpp"] { --code-accent: #00599C; }
.model-md[b-48e950s82p]  .codebox[data-lang="java"] { --code-accent: #b07219; }
.model-md[b-48e950s82p]  .codebox[data-lang="terraform"] { --code-accent: #623CE4; }
.model-md[b-48e950s82p]  .codebox[data-lang="javascript"] { --code-accent: #f1e05a; }
.model-md[b-48e950s82p]  .codebox[data-lang="typescript"] { --code-accent: #2b7489; }
.model-md[b-48e950s82p]  .codebox[data-lang="yaml"] { --code-accent: #cb171e; }
.model-md[b-48e950s82p]  .codebox[data-lang="json"] { --code-accent: #292929; }
.model-md[b-48e950s82p]  .codebox[data-lang="bash"] { --code-accent: #4EAA25; }
.model-md[b-48e950s82p]  .codebox[data-lang="powershell"] { --code-accent: #012456; }
.model-md[b-48e950s82p]  .codebox[data-lang="html"] { --code-accent: #e34c26; }
.model-md[b-48e950s82p]  .codebox[data-lang="css"] { --code-accent: #563d7c; }
.model-md[b-48e950s82p]  .codebox[data-lang="plaintext"] { --code-accent: #334155; }

.model-md[b-48e950s82p]  .codebox__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: #0f172a;
    border-bottom: 1px solid #1e293b;
    color: #e2e8f0;
    font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    border-left: 4px solid var(--code-accent);
}

.model-md[b-48e950s82p]  .codebox__lang {
    opacity: .75;
    -webkit-user-select: none;
    user-select: none;
}

.model-md[b-48e950s82p]  .codebox__lang::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 8px;
    background: var(--code-accent);
}

.model-md[b-48e950s82p]  .codebox__copy {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #334155;
    background: #111827;
    color: #e5e7eb;
    border-radius: 8px;
    font-size: 12px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.model-md[b-48e950s82p]  .codebox__copy:hover {
    background: #0b1220;
    border-color: var(--code-accent);
}

.model-md[b-48e950s82p]  .codebox__copy:active {
    transform: translateY(1px);
}

.model-md[b-48e950s82p]  .codebox pre {
    background: transparent !important;
    color: #e5e7eb;
    margin: 0;
    padding: 12px 14px;
    overflow: auto;
    font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    tab-size: 2;
}

/* Plain code during streaming (no toolbar) */
.model-md[b-48e950s82p]  .code-skin {
    background: #0b0f14;
    border-radius: 12px;
    border: 1px solid #1e293b;
    margin: 12px 0;
}

.model-md[b-48e950s82p]  .code-skin pre {
    padding: 12px 14px;
    margin: 0;
    overflow: auto;
    font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #e5e7eb;
}

.model-md[b-48e950s82p]  .code-skin code {
    background: transparent !important;
    padding: 0 !important;
}

/* Streaming code block indicator */
.model-md[b-48e950s82p]  .codebox.streaming {
    border: 1px solid var(--code-accent);
}

.model-md[b-48e950s82p]  .codebox__streaming-indicator {
    color: var(--code-accent, #3b82f6);
    animation: streamingPulse-b-48e950s82p 1s ease-in-out infinite;
    font-size: 10px;
    margin-left: auto;
}

@keyframes streamingPulse-b-48e950s82p {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Streaming-table placeholder: while the model is still emitting a markdown
   pipe-table, ModelMarkdown defers parsing and renders the partial rows as a
   monospace block so Markdig does not re-layout the DOM on every cell. */
.model-md[b-48e950s82p]  .md-streaming-table-partial {
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-color-secondary, #6b7280);
    background: transparent;
    border-left: 2px solid var(--code-accent, #3b82f6);
    padding: 4px 8px;
    margin: 4px 0;
    white-space: pre;
    overflow-x: auto;
    opacity: 0.85;
}

/* ── Contribución cross-cluster (de chat/ai-media.css) aplicada por el orquestador ── */
/* Añadir a ModelMarkdown.razor.css — correccion del revisor: el consumidor REAL de
   .user-text es ModelMarkdown.razor.cs:373 (MarkupString, sin hash). Sustituye las
   contribuciones DESCARTADAS a ChatAdminDetail/QueueEditPage (falso positivo de
   frontera: usan chat-user-text / qep-perm-user-text). Corregir tambien el comentario
   de cabecera del fichero (linea 27). */
.md-wrapper[b-48e950s82p]  .user-text,
.md-image-grid[b-48e950s82p]  .user-text {
    margin: 0;
    line-height: 1.5;
}
/* /Components/Shared/Proposals/ProposalContentView.razor.rz.scp.css */
/* Estilos propios de ProposalContentView — CSS isolation.
   ─────────────────────────────────────────────────────────────────────────────
   Vienen de wwwroot/css/pages/proposal-view.css. Este componente compartido
   (lo usan ProposalView en /proposal/{token} y ClientProposalsDrawer) posee el
   marcado del cuerpo de la propuesta: header, descripción, items, totales,
   validez, sección de respuesta y estados aceptado/rechazado — todo HTML plano
   del .razor, así que el b-{hash} llega directo: sin ::deep ni envoltorio.

   Lo que NO está aquí y no es un olvido: .proposal-container y .proposal-card
   (y los estados loading/error/processing scoped bajo .proposal-container) son
   marcado de ProposalView.razor y viven en su propio .razor.css; el drawer de
   propuestas de cliente duplica su .proposal-card en el suyo (duplicar bloques
   idénticos por hoja es lo correcto bajo isolation: cada uno con su hash).
   ───────────────────────────────────────────────────────────────────────────── */

.proposal-header[b-03y3x1hk52] {
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.proposal-header h1[b-03y3x1hk52] {
    margin: 0 0 0.5rem 0;
    color: #333;
}

.project-name[b-03y3x1hk52] {
    color: #666;
    margin: 0.5rem 0;
}

.proposal-description[b-03y3x1hk52] {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.proposal-items[b-03y3x1hk52] {
    margin-bottom: 1.5rem;
}

.proposal-items h3[b-03y3x1hk52] {
    margin-bottom: 1rem;
}

.proposal-totals[b-03y3x1hk52] {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.total-row[b-03y3x1hk52] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.grand-total[b-03y3x1hk52] {
    border-top: 2px solid #333;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    font-weight: bold;
    font-size: 1.2rem;
}

.validity-info[b-03y3x1hk52] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    margin-bottom: 1.5rem;
}

.response-section[b-03y3x1hk52] {
    background: #f0f4ff;
    padding: 1.5rem;
    border-radius: 8px;
}

.response-section h3[b-03y3x1hk52] {
    margin-top: 0;
}

.form-group[b-03y3x1hk52] {
    margin-bottom: 1rem;
}

.button-group[b-03y3x1hk52] {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.accepted-section[b-03y3x1hk52], .rejected-section[b-03y3x1hk52] {
    text-align: center;
    padding: 2rem;
}

/* Documento completo en iframe: el documento manda tambien en ancho. Uno apaisado
   crece hasta su ancho natural (el puente lo comunica) y esta seccion pone el
   scroll horizontal — nunca se recorta a carta/letter. */
.proposal-description--doc[b-03y3x1hk52] {
    overflow-x: auto;
}
/* /Components/Shared/Proposals/ProposalThread.razor.rz.scp.css */
/* Hilo de la oferta. CSS aislado: no sale de este componente. */

.pth[b-w9b7u13tkr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rz-base-300);
}

.pth__head[b-w9b7u13tkr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pth__head h3[b-w9b7u13tkr] {
    margin: 0;
    font-size: 1.05rem;
}

.pth__count[b-w9b7u13tkr] {
    min-width: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--rz-base-200);
    font-size: 0.75rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pth__empty[b-w9b7u13tkr],
.pth__closed[b-w9b7u13tkr] {
    margin: 0;
    color: var(--rz-text-tertiary-color);
    font-size: 0.875rem;
}

.pth__list[b-w9b7u13tkr],
.pth__replies[b-w9b7u13tkr] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* La sangría es la única señal de nivel que necesita un hilo de dos niveles.
   Con más niveles haría falta una línea guía; con dos, sobra. */
.pth__replies[b-w9b7u13tkr] {
    margin: 0.5rem 0 0 1.25rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--rz-base-300);
}

.pth__item[b-w9b7u13tkr] {
    display: flex;
    flex-direction: column;
}

.pth__msg[b-w9b7u13tkr] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    background: var(--rz-base-background-color, #fff);
}

/* El mensaje del cliente se distingue de un vistazo: es el que hay que contestar. */
.pth__item.is-client > .pth__msg[b-w9b7u13tkr] {
    border-color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 4%, var(--rz-base-background-color, #fff));
}

/* La nota interna se marca en ámbar y con etiqueta. El marcado NO es la protección
   —eso lo hace el servidor filtrando en el WHERE— sino la señal para quien escribe. */
.pth__item.is-internal > .pth__msg[b-w9b7u13tkr] {
    border-color: var(--rz-warning, #f59e0b);
    background: color-mix(in srgb, var(--rz-warning, #f59e0b) 6%, var(--rz-base-background-color, #fff));
}

.pth__meta[b-w9b7u13tkr] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

.pth__author[b-w9b7u13tkr] {
    font-weight: 600;
    color: var(--rz-text-color);
}

.pth__tag[b-w9b7u13tkr] {
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--rz-base-200);
}

.pth__tag--client[b-w9b7u13tkr] { background: var(--rz-primary-lighter); color: var(--rz-primary-dark); }
.pth__tag--internal[b-w9b7u13tkr] { background: var(--rz-warning-lighter); color: var(--rz-warning-dark); }
.pth__tag--anchor[b-w9b7u13tkr] { background: var(--rz-info-lighter); color: var(--rz-info-dark); }

.pth__edited[b-w9b7u13tkr] { font-style: italic; }

.pth__body[b-w9b7u13tkr] {
    font-size: 0.9375rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.pth__body[b-w9b7u13tkr]  img {
    max-width: 100%;
    height: auto;
}

/* Una tabla pegada en un mensaje se desplaza dentro de su caja: sin esto empuja el
   ancho del documento y arrastra la página entera al scroll horizontal. */
.pth__body[b-w9b7u13tkr]  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.pth__reply-link[b-w9b7u13tkr] {
    align-self: flex-start;
    margin-top: 0.3rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rz-primary);
    font-size: 0.75rem;
    cursor: pointer;
}

.pth__reply-link:hover[b-w9b7u13tkr] { text-decoration: underline; }

.pth__composer[b-w9b7u13tkr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.pth__identity[b-w9b7u13tkr] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pth__identity[b-w9b7u13tkr]  .rz-textbox { flex: 1 1 200px; }

.pth__anchor-picker[b-w9b7u13tkr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pth__composer-actions[b-w9b7u13tkr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pth__internal-toggle[b-w9b7u13tkr] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
}

@media (max-width: 768px) {
    .pth__replies[b-w9b7u13tkr] { margin-left: 0.5rem; }
    .pth__internal-toggle[b-w9b7u13tkr] { margin-left: 0; }
}
/* /Components/Shared/Proposals/ProposalZoomStage.razor.rz.scp.css */
/* La pastilla es el mismo cristal que la del HUD de secciones: todo sale de
   theme.css, así que el modo oscuro no necesita ni una regla aparte — el
   color-mix sobre --rz-base-background-color da cristal claro u oscuro solo. */

.pz-stage[b-bjhotoe1sa] {
    position: relative;
}

/* Banda de anclaje: sticky al fondo del viewport mientras el documento está a
   la vista, con alto 0 para no alargar el documento ni empujar el pie. Solo la
   pastilla recibe ratón. */
.pz-hud[b-bjhotoe1sa] {
    position: sticky;
    bottom: 0;
    height: 0;
    z-index: 12;
    pointer-events: none;
}

.pz-hud-inner[b-bjhotoe1sa] {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.3rem 0.4rem;
    background: color-mix(in srgb, var(--rz-base-background-color) 72%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: var(--rz-border-normal);
    border-radius: 999px;
    box-shadow: var(--rz-shadow-6);
    /* Discreta pero SIEMPRE presente: el documento vive en un iframe de origen
       opaco y Chromium no propaga el :hover al padre mientras el puntero está
       sobre él — un HUD que solo se asoma al hover del escenario no aparece
       nunca. Tenue en reposo, plena al tocarla (o con foco de teclado). */
    opacity: 0.55;
    transform: translateX(-50%);
    transition: opacity 0.18s ease;
    pointer-events: auto;
}

.pz-hud-inner:hover[b-bjhotoe1sa],
.pz-hud-inner:focus-within[b-bjhotoe1sa] {
    opacity: 1;
}

.pz-hud-btn[b-bjhotoe1sa],
.pz-hud-level[b-bjhotoe1sa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    padding: 0.3rem;
}

.pz-hud-level[b-bjhotoe1sa] {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    min-width: 3.2rem;
    padding: 0.3rem 0.45rem;
}

.pz-hud-btn:hover:not(:disabled)[b-bjhotoe1sa],
.pz-hud-level:hover[b-bjhotoe1sa] {
    background: var(--rz-base-200);
    color: var(--rz-text-color);
}

.pz-hud-btn:disabled[b-bjhotoe1sa] {
    opacity: 0.4;
    cursor: default;
}

.pz-hud-on[b-bjhotoe1sa] {
    background: var(--rz-primary);
    color: var(--rz-on-primary, #fff);
}

.pz-hud-on:hover:not(:disabled)[b-bjhotoe1sa] {
    background: var(--rz-primary);
    color: var(--rz-on-primary, #fff);
}

.pz-hud-sep[b-bjhotoe1sa] {
    width: 1px;
    height: 1.1rem;
    background: var(--rz-border-color, var(--rz-base-300));
    margin: 0 0.15rem;
}

/* Modo manita: el cursor lo anuncia y el contenido deja de recibir punteros
   (mismo trade que en secciones: sin esto, arrastrar seleccionaría texto). */
.pz-stage.pz-panning[b-bjhotoe1sa] {
    cursor: grab;
}

.pz-stage.pz-panning:active[b-bjhotoe1sa] {
    cursor: grabbing;
}

.pz-stage.pz-panning[b-bjhotoe1sa]  .pz-canvas * {
    pointer-events: none;
    user-select: none;
}
/* /Components/Shared/ShortcutsCheatSheet.razor.rz.scp.css */
/* Estilos propios de ShortcutsCheatSheet — CSS isolation.
   Vienen de wwwroot/css/servicedesk/shortcuts-cheatsheet.css. Verificado: ningun otro componente depende de
   estas clases sin declararlas en su propia hoja.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   ServiceDesk · Atajos de teclado — hoja de referencia (FASE 7)
   ───────────────────────────────────────────────────────────────────────────
   Modal global que muestra el listado de atajos disponibles. Lo dispara la
   tecla `?` desde KeyboardShortcutService. Estilos basados en `.kbd` del HTML
   mock de Reporbia Tickets, con scrim y panel de columnas.

   Todos los colores referencian las variables `--rz-*` / `--tk-*` de
   theme.css → light/dark mode automático.
   ─────────────────────────────────────────────────────────────────────────── */

.ksh-overlay[b-htsq60q5cm] {
    position: fixed;
    inset: 0;
    background: var(--portal-dashboard-overlay-bg);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1080;
    display: grid;
    place-items: center;
    animation: ksh-fade-b-htsq60q5cm .15s ease-out;
}

.ksh-modal[b-htsq60q5cm] {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 16px;
    box-shadow: var(--rz-shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ksh-rise-b-htsq60q5cm .2s cubic-bezier(.2, .8, .2, 1);
    color: var(--rz-text-title-color);
    font-family: var(--rz-text-font-family);
}

.ksh-header[b-htsq60q5cm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--rz-base-100);
}

.ksh-title-block[b-htsq60q5cm] { display: flex; flex-direction: column; gap: 2px; }
.ksh-eyebrow[b-htsq60q5cm] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rz-text-secondary-color);
    font-weight: 600;
}
.ksh-title[b-htsq60q5cm] { font-size: 16px; font-weight: 600; line-height: 1.2; }

.ksh-close[b-htsq60q5cm] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    display: grid;
    place-items: center;
    transition: background .12s ease, color .12s ease;
}
.ksh-close:hover[b-htsq60q5cm] {
    background: var(--rz-base-50);
    color: var(--rz-text-title-color);
}

.ksh-body[b-htsq60q5cm] {
    padding: 14px 22px 18px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 32px;
}

@media (max-width: 640px) {
    .ksh-body[b-htsq60q5cm] { grid-template-columns: 1fr; }
}

.ksh-group[b-htsq60q5cm] { display: flex; flex-direction: column; gap: 6px; }
.ksh-group-title[b-htsq60q5cm] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rz-text-secondary-color);
    font-weight: 600;
    margin: 0 0 4px;
}

.ksh-row[b-htsq60q5cm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 4px;
    border-radius: 6px;
}
.ksh-row:hover[b-htsq60q5cm] { background: var(--rz-base-50); }

.ksh-desc[b-htsq60q5cm] {
    font-size: 13px;
    color: var(--rz-text-color);
    line-height: 1.35;
}

.ksh-keys[b-htsq60q5cm] { display: inline-flex; align-items: center; gap: 4px; flex: none; }

/* Single key chip — mirrors `.kbd` from the design mock. */
.ksh-key[b-htsq60q5cm] {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border: 1px solid var(--rz-base-300);
    background: var(--rz-base-background-color);
    border-radius: 5px;
    font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--rz-text-color);
    box-shadow: 0 1px 0 var(--rz-base-300);
}

.ksh-plus[b-htsq60q5cm] {
    color: var(--rz-text-tertiary-color);
    font-size: 11px;
    padding: 0 1px;
}

.ksh-footer[b-htsq60q5cm] {
    border-top: 1px solid var(--rz-base-100);
    padding: 12px 22px;
    font-size: 12px;
    color: var(--rz-text-secondary-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ksh-footer .ksh-key[b-htsq60q5cm] { min-width: 20px; height: 20px; padding: 0 6px; font-size: 10.5px; }

@keyframes ksh-fade-b-htsq60q5cm { from { opacity: 0; } to { opacity: 1; } }
@keyframes ksh-rise-b-htsq60q5cm {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Components/Shared/Skeleton/DataGridSkeleton.razor.rz.scp.css */
/* Maqueta de carga de una rejilla — solo lo que depende del ancho.

   La maqueta declara N columnas de ancho fijo (`Columns` × `ColumnWidth`), y
   quien la usa pide lo que su tabla real necesita: la de incidencias, 9 × 120px
   = 1080 px. En un teléfono eso son casi 700 px de más empujando la aplicación
   entera de lado durante los segundos de carga — y encima empujando hacia una
   tabla que en móvil ni siquiera se pinta, porque esas páginas cambian a lista
   de tarjetas en cuanto termina de cargar. */

.dg-skeleton[b-di4sb4ro7o] {
    width: 100%;
}

@media (max-width: 1024px) {
    /* Red de seguridad: si alguna columna se escapa, la recorta aquí en vez de
       arrastrar `.rz-body`, que es quien tiene el scroll del portal. */
    .dg-skeleton[b-di4sb4ro7o] {
        overflow-x: hidden;
    }

    /* Tres columnas bastan para insinuar una tabla. `!important` porque el ancho
       de la celda va en un `style` en línea que pone el propio componente. */
    .dg-skeleton[b-di4sb4ro7o]  th:nth-child(n + 4),
    .dg-skeleton[b-di4sb4ro7o]  td:nth-child(n + 4) {
        display: none;
    }

    .dg-skeleton[b-di4sb4ro7o]  th {
        width: auto !important;
    }
}
/* /Components/Shared/Skeleton/GanttSkeleton.razor.rz.scp.css */
/* Maqueta de carga del Gantt — solo lo que depende del ancho.

   El resto de la silueta sigue en estilos en línea dentro del componente: son
   docenas de medidas de una sola pieza decorativa, y sacarlas todas aquí sería
   un cambio grande sin nada que ganar. Aquí vive únicamente lo que en un
   teléfono se salía de la pantalla. */

.gantt-skeleton-toolbar[b-3pwdcv4lma] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rz-base-300);
}

.gantt-skeleton-left[b-3pwdcv4lma] {
    width: 46%;
    /* Las cuatro columnas reales (nombre · inicio · fin · estado) no caben en
       menos de esto sin quedar ilegibles. */
    min-width: 380px;
    border-right: 1px solid var(--rz-base-300);
    display: flex;
    flex-direction: column;
}

.gantt-skeleton-timeline[b-3pwdcv4lma] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* ─── Móvil ───
   `min-width: 380px` mas la mitad del calendario sumaban 482 px dentro de una
   maqueta que recorta, asi que durante los segundos de carga se veia media
   pantalla cortada. En un telefono la maqueta se queda con la rejilla de la
   izquierda, que es lo que el Gantt real enseña primero. */
@media (max-width: 1024px) {
    .gantt-skeleton-toolbar[b-3pwdcv4lma] {
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .gantt-skeleton-left[b-3pwdcv4lma] {
        width: 100%;
        min-width: 0;
        border-right: 0;
    }

    .gantt-skeleton-timeline[b-3pwdcv4lma] {
        display: none;
    }
}
/* /Components/Shared/UserAvatar.razor.rz.scp.css */
/* CRÍTICO — crear UserAvatar.razor.css: todos los avatares del portal estan hoy sin estilo.
   ════════════════════════════════════════════════════════════════════════════
   UserAvatar — round profile pill. El componente pone width/height/background
   inline; esta hoja solo posee el chrome invariante entre tamaños.
   ════════════════════════════════════════════════════════════════════════════ */

.ua[b-8dq3yfrebd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex: none;
    box-shadow: 0 0 0 1px var(--rz-base-200);
    object-fit: cover;
    line-height: 1;
}

img.ua[b-8dq3yfrebd] {
    background: var(--rz-base-100);
}

.ua-fallback[b-8dq3yfrebd] {
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-family: var(--tk-font-sans, system-ui, sans-serif);
    font-feature-settings: 'tnum';
    -webkit-user-select: none;
    user-select: none;
}

.ua--stacked + .ua--stacked[b-8dq3yfrebd] {
    margin-left: -6px;
}

[data-bs-theme="dark"] .ua[b-8dq3yfrebd] {
    box-shadow: 0 0 0 1px var(--rz-base-300);
}