/* ─────────────────────────────────────────────────────────────
   azhum-layout.css
   Estilos del layout shell de Azhum (topbar + sidebar + content).
   Compartido por Azhum.Web (MainLayout) y Azhum.Admin (AdminLayout).
   Originalmente en Azhum.Web/Shared/MainLayout.razor.css como scoped;
   movido aqui para que ambos hosts lo reutilicen.
   ───────────────────────────────────────────────────────────── */

.azhum-app {
    height: 100vh;
    width: 100vw;
    background: var(--az-bg);
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
}

/* ── Topbar con glassmorphism ─────────────────────────────── */
.azhum-topbar {
    height: var(--az-topbar-height);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 20px 0 0;
    gap: 0;
    background: var(--az-topbar-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--az-border-subtle);
    position: relative;
    z-index: 20;
    box-shadow: var(--az-inset-hi);
    color: var(--az-topbar-text);
}

.azhum-topbar-rail {
    width: var(--az-rail-width);
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--az-border-subtle);
}

.azhum-topbar-rail .azhum-topbar-toggle {
    color: var(--az-topbar-text);
}

.azhum-topbar-brand-zone {
    width: calc(var(--az-sidebar-width) - var(--az-rail-width));
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-left: 18px;
    box-sizing: border-box;
    border-right: 1px solid var(--az-border-subtle);
}

.azhum-topbar-brand {
    display: flex;
    align-items: center;
    height: 30px;
    color: var(--az-topbar-text);
    text-decoration: none;
    transition: opacity var(--az-transition-fast);
}

.azhum-topbar-brand:hover {
    opacity: 0.85;
}

.azhum-topbar-brand svg {
    height: 28px;
    width: auto;
    display: block;
}

.azhum-topbar-tenant {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    margin-left: 18px;
}

.azhum-topbar-tenant .tenant-name {
    font-weight: 600;
    color: var(--az-text);
    font-size: 14px;
    letter-spacing: -0.005em;
}

.azhum-topbar-tenant .tenant-meta {
    font-size: 11px;
    color: var(--az-text-muted);
    font-family: var(--az-font-mono);
    letter-spacing: 0.01em;
}

.azhum-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Retorno permanente al sitio principal (demo): enlace discreto en las acciones del topbar. */
.azhum-topbar-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--az-border-subtle);
    border-radius: var(--az-radius-full);
    color: var(--az-text-muted);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
}
.azhum-topbar-back:hover {
    color: var(--az-text);
    border-color: var(--az-blue);
    background: var(--az-surface-2);
}
.azhum-topbar-back svg { flex: 0 0 auto; }
/* En pantallas estrechas, conservar solo la flecha (el texto ocupa demasiado). */
@media (max-width: 1100px) {
    .azhum-topbar-back span { display: none; }
    .azhum-topbar-back { padding: 5px 8px; }
}

.azhum-freshness {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.azhum-freshness .muted {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--az-text-muted);
    font-weight: 500;
}

.azhum-freshness .value {
    font-size: 12px;
    color: var(--az-text);
    font-family: var(--az-font-mono);
}

.user-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--az-surface-2);
    color: var(--az-text);
    font-weight: 700;
    font-size: 11px;
    font-family: var(--az-font-mono);
    border: 1px solid var(--az-border);
    cursor: default;
    user-select: none;
    box-shadow: var(--az-inset-hi), var(--az-elev-1);
}

/* ── Theme toggle button (Bloque L · L.4) ─────────────────── */
.azhum-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--az-surface-2);
    color: var(--az-text-muted);
    border: 1px solid var(--az-border);
    cursor: pointer;
    padding: 0;
    transition: color var(--az-transition-fast),
                background var(--az-transition-fast),
                border-color var(--az-transition-fast);
}

.azhum-theme-toggle:hover {
    color: var(--az-cyan);
    border-color: var(--az-cyan);
}

.azhum-theme-toggle:focus-visible {
    outline: 2px solid var(--az-blue);
    outline-offset: 2px;
}

.azhum-theme-toggle svg {
    display: block;
}

/* ── Drawer (altura explicita = viewport − topbar) ────────── */
.azhum-app .azhum-drawer {
    height: calc(100vh - 56px);
    width: 100%;
    background: var(--az-bg);
}

.azhum-app .azhum-drawer .k-drawer-wrapper {
    background: var(--az-sidebar-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--az-border-subtle);
    /* Telerik NO estira el wrapper por defecto (queda a la altura del contenido) →
       lo forzamos a altura completa + flex-column para que el shell crezca hasta
       abajo y la Configuración quede anclada al fondo (margin-top:auto). */
    height: 100%;
    display: flex;
    flex-direction: column;
}
.azhum-app .azhum-drawer .k-drawer.k-drawer-start {
    height: 100%;
}

.azhum-app .k-drawer-content {
    background: transparent;
    color: var(--az-text);
    overflow: auto;
    height: 100%;
}

/* Shell flex-column del sidebar: la cabecera + navegación arriba, la Configuración
   SIEMPRE anclada al fondo del viewport. min-height:0 (no 100%) para que el shell NO
   crezca con la lista de conversaciones: se queda a la altura del wrapper (viewport) y
   deja que la nav scrollee POR DENTRO — así la Configuración jamás se va fuera de pantalla
   (feedback founder). */
.azhum-sidebar-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}
.azhum-sidebar-footer {
    flex: 0 0 auto;      /* fijo abajo, nunca se encoge ni se va del viewport */
    margin-top: auto;
    padding: 8px;
    border-top: 1px solid var(--az-border-subtle);
}

/* ── Configuración · desplegable del footer (abre hacia arriba) ─────────────
   Cuida el contraste: el menú se ELEVA sobre el sidebar (surface-2 + borde +
   sombra) para distinguirse del fondo, según la regla de calidad visual. */
.azhum-config-trigger .azhum-config-chevron {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    color: var(--az-text-faint);
    transition: transform .16s ease, color .16s ease;
}
/* Cerrado → chevron hacia ARRIBA (invita a abrir hacia arriba); abierto → hacia abajo. */
.azhum-config-trigger:not(.open) .azhum-config-chevron {
    transform: rotate(180deg);
}
.azhum-config-trigger:hover .azhum-config-chevron,
.azhum-config-trigger.open .azhum-config-chevron {
    color: var(--az-text);
}
.azhum-config-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
    padding: 5px;
    background: var(--az-surface-2);
    border: 1px solid var(--az-border);
    border-radius: 10px;
    box-shadow: 0 -8px 26px rgba(3, 6, 12, .42);
    animation: azhum-config-rise .16s ease;
}
@keyframes azhum-config-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.azhum-config-subitem {
    padding: 9px 10px;
}
.azhum-config-subitem .azhum-drawer-icon {
    color: var(--az-text-faint);
    transition: color .14s ease;
}
.azhum-config-subitem:hover .azhum-drawer-icon,
.azhum-config-subitem.selected .azhum-drawer-icon {
    color: var(--az-blue);
}

/* ── Sidebar items (en el Template) ───────────────────────── */
/* La nav es la región CENTRAL que crece y SCROLLEA por dentro (flex:1 + min-height:0 +
   overflow-y:auto): con muchas conversaciones scrollea aquí en vez de empujar la
   Configuración fuera del viewport. La cabecera de contexto (arriba) y el footer de
   Configuración (abajo) quedan fijos. */
.azhum-drawer-list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;   /* nav vertical: jamás se desea scroll horizontal (evita barra en mini-mode) */
    padding: 14px 8px;
    gap: 3px;
}

/* Botón «Ver todas / Ver menos» del historial: discreto, tipo enlace, centrado.
   Aparece cuando hay más de 10 conversaciones (el resto se despliega con scroll). */
.azhum-drawer-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--az-text-faint);
    font-family: var(--az-font-ui);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: color .14s ease, background .14s ease;
}
.azhum-drawer-more:hover {
    color: var(--az-text-2);
    background: var(--az-surface-2);
}
.azhum-drawer-more svg {
    width: 14px;
    height: 14px;
    transition: transform .16s ease;
}
.azhum-drawer-more.open svg {
    transform: rotate(180deg);
}

/* ── Sidebar group label (Bloque L · L.5 · sb-group-label canónico) ─ */
.azhum-drawer-group-label {
    font-family: var(--az-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--az-text-faint);
    padding: 14px 12px 6px;
    user-select: none;
}

/* Primer group label sin padding-top extra (ya hay padding del .azhum-drawer-list) */
.azhum-drawer-group-label:first-child {
    padding-top: 4px;
}

/* En mini-mode: ocultar group labels (los items ya están separados visualmente) */
.azhum-app .k-drawer-mini .azhum-drawer-group-label {
    display: none;
}

.azhum-drawer-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 11px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--az-text-muted);
    font-family: var(--az-font-ui);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: background-color var(--az-transition-fast),
                color var(--az-transition-fast),
                border-color var(--az-transition-fast);
}

.azhum-drawer-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--az-text);
}

/* Foco visible por teclado (a11y): mismo trazo azul que los tabs del switcher. */
.azhum-drawer-item:focus-visible,
.azhum-drawer-group-toggle:focus-visible {
    outline: 2px solid var(--az-blue);
    outline-offset: -2px;
    border-radius: 8px;
}

.azhum-drawer-item.selected {
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--az-blue) 12%, transparent),
            color-mix(in oklab, var(--az-blue) 6%, transparent));
    color: var(--az-text);
    border-color: color-mix(in oklab, var(--az-blue) 30%, transparent);
    box-shadow:
        var(--az-inset-hi),
        0 4px 12px -6px color-mix(in oklab, var(--az-blue) 35%, transparent);
}

.azhum-drawer-item.selected::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 2px;
    background: var(--az-blue);
    box-shadow: 0 0 12px color-mix(in oklab, var(--az-blue) 60%, transparent);
}

.azhum-drawer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.azhum-drawer-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bloque O · cabeceras de capa colapsables (acordeón) */
.azhum-drawer-group-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    border-radius: 6px;
    transition: color .12s, background .12s;
}

.azhum-drawer-group-toggle:hover {
    color: var(--az-text);
    background: rgba(255, 255, 255, 0.03);
}

.azhum-drawer-chevron {
    display: inline-block;
    font-size: 9px;
    line-height: 1;
    color: var(--az-text-faint);
    transition: transform .15s ease;
}

.azhum-drawer-group-toggle.open .azhum-drawer-chevron {
    transform: rotate(90deg);
    color: var(--az-blue);
}

.azhum-app .k-drawer-mini .azhum-drawer-group-toggle {
    display: none;
}

/* Mini mode */
.azhum-app .k-drawer-mini .k-drawer-wrapper,
.azhum-app .k-drawer-mini .k-drawer-items-wrapper {
    width: 56px !important;
    min-width: 56px !important;
}

.azhum-app .k-drawer-mini .azhum-drawer-list {
    padding: 14px 0;
}

.azhum-app .k-drawer-mini .azhum-drawer-label {
    display: none;
}

/* Mini: oculta el texto del «Nuevo chat» (span pelado, no .azhum-drawer-label) y el
   «Ver todas» del historial — en el rail de 56px desbordarían (solo quedan sus iconos). */
.azhum-app .k-drawer-mini .azhum-drawer-new-chat > span:not(.azhum-drawer-new-chat-icon),
.azhum-app .k-drawer-mini .azhum-drawer-more {
    display: none;
}

/* Mini · HISTORIAL limpio (feedback founder «se ven muy mal»): cada conversación se reduce
   a su burbuja de chat CENTRADA — fuera el timestamp «hace X h», la ✕ de borrar y la
   etiqueta «CONVERSACIONES». El título vive en el tooltip; clic abre la conversación. */
.azhum-app .k-drawer-mini .azhum-drawer-recents-label,
.azhum-app .k-drawer-mini .azhum-drawer-recent-body,
.azhum-app .k-drawer-mini .azhum-drawer-recent-remove {
    display: none;
}
.azhum-app .k-drawer-mini .azhum-drawer-recent-row {
    justify-content: center;
}
.azhum-app .k-drawer-mini .azhum-drawer-recent {
    justify-content: center;
    gap: 0;
    padding: 11px 0;
}
.azhum-app .k-drawer-mini .azhum-drawer-new-chat {
    justify-content: center;
    gap: 0;
}

.azhum-app .k-drawer-mini .azhum-drawer-item {
    justify-content: center;
    padding: 11px 0;
    border-radius: 0;
}

.azhum-app .k-drawer-mini .azhum-drawer-item.selected::before {
    left: 0;
    border-radius: 0 2px 2px 0;
}

/* ── Content ──────────────────────────────────────────────── */
.azhum-content {
    padding: 32px 40px;
    box-sizing: border-box;
    min-height: 100%;
    position: relative;
}
/* M8.10 · padding del contenido escalado por breakpoint (recupera ancho útil en tablet/móvil
   para las tablas anchas). Solo afecta <1024px; desktop intacto. */
@media (max-width: 1024px) { .azhum-content { padding: 24px 20px; } }
@media (max-width: 640px)  { .azhum-content { padding: 16px 12px; } }

/* ═════════════════════════════════════════════════════════════
   F2 · Navegación 3 capas — ModuleSwitcher + sidebar contextual
   ═════════════════════════════════════════════════════════════
   Conmutador de bloques en el topbar (entre brand y el grupo derecho) +
   cabecera de contexto del sidebar. Tokens v2.2 --az-* (sin colores nuevos);
   subrayado activo 2px --az-blue como el mockup POC_navegacion_3capas.
   ───────────────────────────────────────────────────────────── */

/* El tenant + acciones flotan a la derecha (como el mockup); el switcher queda
   pegado a la brand zone. El combinador de adyacencia evita doble auto-margin:
   con tenant presente, el hueco va ANTES del tenant; sin tenant, lo absorbe
   .azhum-topbar-actions (regla preexistente). */
.azhum-topbar-tenant {
    margin-left: auto;
}

.azhum-topbar-tenant + .azhum-topbar-actions {
    margin-left: 24px;
}

/* ── Module switcher (conmutador de bloques) ─────────────────── */
.azhum-modtabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 100%;
    padding: 0 6px 0 10px;
    min-width: 0;
}

.azhum-modtab {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--az-text-muted);
    cursor: pointer;
    font-family: var(--az-font-ui);
    white-space: nowrap;
    transition: color var(--az-transition-fast);
}

.azhum-modtab:hover {
    color: var(--az-text-2);
}

.azhum-modtab.active {
    color: var(--az-text);
}

.azhum-modtab-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: var(--az-track-h);
    line-height: 1.2;
}

/* Subrayado activo: 2px --az-blue (como el mockup). */
.azhum-modtab.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--az-blue);
}

.azhum-modtab:focus-visible {
    outline: 2px solid var(--az-blue);
    outline-offset: -3px;
    border-radius: var(--az-radius-sm);
}

/* ── Tab de IA (Azhum Lumen) · mismo peso visual que el resto ──
   Feedback founder: el tab NO resalta — misma tipografía, mismo subrayado
   activo; la única distinción es un icono de TRAZO en el acento IA (tokens
   --az-ia-* de azhum-tokens.css). */
.azhum-modtab--ia .azhum-modtab-spark {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--az-ia-a);
}

/* Con el tab IA presente, los tabs no se clipan: cede el nombre del tenant
   (elipsis) y, en anchos medios, la "última actualización". SCOPED con :has —
   en hosts/tenants sin el módulo IA (Admin, FIN) el topbar no cambia. */
.azhum-modtabs:has(.azhum-modtab--ia) { min-width: max-content; }

@media (max-width: 1440px) {
    .azhum-topbar:has(.azhum-modtab--ia) .azhum-modtab { padding: 0 11px; }

    .azhum-topbar:has(.azhum-modtab--ia) .azhum-topbar-tenant {
        min-width: 0;
        overflow: hidden;
    }

    .azhum-topbar:has(.azhum-modtab--ia) .azhum-topbar-tenant .tenant-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 1360px) {
    .azhum-topbar:has(.azhum-modtab--ia) .azhum-freshness { display: none; }
}

/* Misma escala, un peldaño más abajo, para la licencia SIN IA. Las dos reglas de arriba solo
   actúan con la pestaña de Lumen presente (`:has(.azhum-modtab--ia)`); sin ella hay una pestaña
   menos y el problema aparece más tarde, pero aparece igual. MEDIDO a 1024 (iPad apaisado, que
   sí queremos que se use): el topbar NECESITA 1.115px y solo tiene 1.024 — el nombre de la
   empresa recibía 101 de los 153 que pide y se partía en dos renglones contra las pestañas.
   Se recorta de donde sobra, sin perder NADA funcional: el rótulo de frescura (su valor exacto
   sigue en el `title`), 50px del sidebar, y aire de los botones. El nombre del cliente NO se
   trunca: en una demo es lo último que debe recortarse. */
@media (max-width: 1200px) {
    :root { --az-sidebar-width: 200px; }
    .azhum-freshness { display: none; }
    .azhum-modtab { padding: 0 11px; }
    /* Especificidad a propósito: la regla base de .azhum-lic-switch button vive MÁS ABAJO en este
       mismo fichero (~:902), así que con igual especificidad ganaría ella por orden. */
    .azhum-topbar .azhum-lic-switch button { padding-left: 8px; padding-right: 8px; letter-spacing: 0; }
}

/* ── Recientes dinámicos del sidebar (ISidebarRecentsSource) ── */
.azhum-drawer-recents-label {
    cursor: default;
    margin-top: 14px;
}

.azhum-drawer-recent { align-items: flex-start; }

.azhum-drawer-recent .azhum-drawer-icon { color: var(--az-text-faint); }

.azhum-drawer-recent-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.azhum-drawer-recent .azhum-drawer-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 168px;
}

.azhum-drawer-recent-meta {
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    color: var(--az-text-faint);
}

/* F3 · fila abrir+borrar: el ✕ aparece al hover (soft-delete de la conversación) */
.azhum-drawer-recent-row {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.azhum-drawer-recent-row .azhum-drawer-recent { flex: 1; min-width: 0; }

.azhum-drawer-recent-remove {
    flex: none;
    width: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--az-text-faint);
    border-radius: var(--az-radius-md);
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease, background .12s ease;
}

.azhum-drawer-recent-remove svg { width: 12px; height: 12px; }

.azhum-drawer-recent-row:hover .azhum-drawer-recent-remove,
.azhum-drawer-recent-remove:focus-visible { opacity: 1; }

.azhum-drawer-recent-remove:hover {
    color: var(--az-red);
    background: color-mix(in oklab, var(--az-red) 10%, transparent);
}

/* ── Engranaje de administración (TelerikDropDownButton flat) ─── */
.azhum-topbar-cog .k-button {
    color: var(--az-text-muted);
}

/* ── Menú de usuario (H2 · TelerikDropDownButton flat: iniciales + nombre/cargo) ─── */
.azhum-topbar-user .k-button {
    color: var(--az-text);
    padding: 4px 14px 4px 4px;        /* más aire entre el avatar y el nombre + a la derecha */
    gap: 11px;
    height: auto;
    border-radius: 999px;             /* píldora: el avatar y el texto se leen como una unidad */
}
.azhum-topbar-user .k-button:hover {
    background: var(--az-surface-2);
}
/* Avatar: fondo acento sutil para que las iniciales resalten (antes era plano y oscuro). */
.azhum-topbar-user .user-chip {
    box-shadow: none;
    width: 32px;
    height: 32px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--az-blue) 30%, var(--az-surface-3)), var(--az-surface-2));
    border: 1px solid color-mix(in srgb, var(--az-blue) 30%, var(--az-border));
    color: var(--az-text);
    letter-spacing: .03em;
}

/* Telerik envuelve TODO el contenido del botón en un <span class="k-button-text"> que es
   display:block con line-height propio. Dentro, el avatar y el bloque de nombre/cargo son
   elementos INLINE, así que se alineaban por LÍNEA BASE: medido en la demo, el avatar y el
   texto quedaban descuadrados 5,7px entre sí, el texto descentrado (8,2px arriba / 0,9px
   abajo — casi tocando el filo) y, lo peor, el `gap:11px` del botón NO aplicaba entre ellos
   porque ambos viven dentro de ese span: separación horizontal REAL 0px. De ahí que el chip
   se viera apelmazado. Se hace flex el propio wrapper de Telerik: así el gap es efectivo y
   avatar y texto comparten centro vertical. */
.azhum-topbar-user .k-button-text {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: normal;
}
.user-id {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    gap: 2px;                         /* nombre y cargo se leían PEGADOS: separación medida 0px */
    text-align: left;
    max-width: 160px;
}
.user-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--az-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.user-role {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--az-text-muted);
    font-weight: 500;
}
/* En pantallas estrechas, sólo las iniciales (el nombre/cargo se ocultan). */
@media (max-width: 1100px) {
    .azhum-topbar-user .user-id { display: none; }
}

/* ── Página "Mi cuenta" (H2) ─── */
.azhum-account-saved {
    margin-left: 12px;
    color: var(--az-ink-green);
    font-size: 13px;
    font-weight: 600;
    align-self: center;
}
.azhum-account-note {
    margin-top: 14px;
    max-width: 60ch;
    font-size: 12px;
    color: var(--az-text-muted);
    line-height: 1.5;
    border-left: 2px solid var(--az-border-strong);
    padding-left: 10px;
}

/* ── Cabecera de contexto del sidebar (módulo activo) ────────── */
.azhum-sidebar-context {
    display: flex;
    align-items: center;
    gap: 9px;
    /* Aire ARRIBA: el rótulo del módulo («Azhum Lumen» / «Reporting») estaba pegado a la
       barra de menú superior (feedback founder). +18px de respiro. */
    padding: 18px 12px 12px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--az-border-subtle);
}

/* Logo del módulo en la cabecera (SIN recuadro): MISMO color que la estrella del
   menú superior (--az-ia-a), no cian — para que el logo case exactamente. */
.azhum-sidebar-context-icon {
    display: inline-flex;
    align-items: center;
    color: var(--az-ia-a);
    flex: 0 0 auto;
}
.azhum-sidebar-context-icon .k-svg-icon,
.azhum-sidebar-context-icon svg { width: 19px; height: 19px; }

.azhum-sidebar-context-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: var(--az-track-h);
    color: var(--az-text);
}

/* Botón «+ Nuevo chat» del sidebar (sobre el historial de conversaciones). */
.azhum-drawer-new-chat {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 16px);
    margin: 4px 8px 10px;
    padding: 9px 12px;
    background: var(--az-surface-2);
    border: 1px solid var(--az-border);
    border-radius: var(--az-radius-md);
    color: var(--az-text);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.azhum-drawer-new-chat:hover {
    border-color: var(--az-border-strong);
    background: var(--az-surface-3);
}
.azhum-drawer-new-chat-icon { display: inline-flex; }
.azhum-drawer-new-chat-icon svg { width: 16px; height: 16px; }

/* En mini-mode, oculta la cabecera de contexto (como los group labels). */
.azhum-app .k-drawer-mini .azhum-sidebar-context {
    display: none;
}

/* ── Switch de licencia FIN / FIN+ANA (header · demo-only · Bloque C) ─ */
.azhum-lic-switch {
    display: inline-flex;
    border: 1px solid var(--az-border);
    border-radius: var(--az-radius-full);
    overflow: hidden;
}

.azhum-lic-switch button {
    border: 0;
    background: transparent;
    color: var(--az-text-muted);
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    letter-spacing: 0.08em;
    padding: 6px 13px;
    cursor: pointer;
    transition: background var(--az-transition-fast), color var(--az-transition-fast);
}

.azhum-lic-switch button:hover {
    color: var(--az-text);
}

.azhum-lic-switch button.on {
    background: var(--az-blue);
    color: #fff;
}

/* ── Tarjeta upsell de la capa analítica (sidebar Reporting · FIN) ─── */
.azhum-sidebar-upsell {
    margin: 14px 8px 0;
    padding: 12px;
    border: 1px dashed var(--az-border-strong);
    border-radius: var(--az-radius-lg);
    font-size: var(--az-text-sm);
    color: var(--az-text-muted);
    line-height: 1.45;
}

.azhum-sidebar-upsell b {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--az-ink-amber);
    font-size: var(--az-text-sm);
}

.azhum-upsell-lock {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.azhum-sidebar-upsell button {
    display: inline-block;
    margin-top: 8px;
    border: 1px solid var(--az-blue);
    background: transparent;
    color: var(--az-ink-blue);
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    padding: 5px 10px;
    border-radius: var(--az-radius-md);
    cursor: pointer;
    transition: background var(--az-transition-fast);
}

.azhum-sidebar-upsell button:hover {
    background: color-mix(in oklab, var(--az-blue) 12%, transparent);
}

/* En mini-mode, oculta el upsell (no hay espacio). */
.azhum-app .k-drawer-mini .azhum-sidebar-upsell {
    display: none;
}

/* ── Candado del tab gated (visitante) · SVG inline, sutil ────── */
.azhum-modtab-lock {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--az-text-faint);
}

/* ── AccessGate · pantalla de acceso restringido (visitante) ──── */
.azhum-access-gate {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 8vh;
    min-height: 60vh;
}

.azhum-access-gate .agate-card {
    max-width: 560px;
    width: 100%;
    text-align: center;
    padding: 42px 36px;
    background: var(--az-surface);
    border: 1px solid var(--az-border-subtle);
    border-radius: var(--az-radius-lg);
    box-shadow: var(--az-elev-1);
}

.azhum-access-gate .agate-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--az-blue-muted);
    color: var(--az-blue);
}

.azhum-access-gate .agate-icon svg {
    width: 24px;
    height: 24px;
}

.azhum-access-gate .agate-title {
    font-size: var(--az-text-lg);
    font-weight: 600;
    letter-spacing: var(--az-track-h);
    color: var(--az-text);
}

.azhum-access-gate .agate-msg {
    margin: 10px auto 22px;
    max-width: 44ch;
    color: var(--az-text-muted);
    font-size: var(--az-text-md);
    line-height: 1.5;
}

.azhum-access-gate .agate-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.azhum-access-gate .agate-btn {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--az-border);
    background: var(--az-surface-2);
    color: var(--az-text-2);
    border-radius: var(--az-radius-md);
    padding: 9px 16px;
    font-family: var(--az-font-ui);
    font-size: var(--az-text-sm);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: border-color var(--az-transition-fast), background var(--az-transition-fast);
}

.azhum-access-gate .agate-btn:hover {
    border-color: var(--az-border-strong);
}

.azhum-access-gate .agate-btn-primary {
    border-color: var(--az-blue);
    color: var(--az-ink-blue);
    background: transparent;
}

.azhum-access-gate .agate-btn-primary:hover {
    background: color-mix(in oklab, var(--az-blue) 10%, transparent);
}

.azhum-access-gate .agate-foot {
    margin-top: 18px;
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    color: var(--az-text-faint);
}

/* Utilidades de espaciado vertical. Varias páginas (Operativa/Governance) aplican
   Class="mb-3" a TelerikCards apiladas, pero la clase no estaba definida en ningún
   sitio (no-op) → las cards salían pegadas. Definidas aquí como utilidad. */
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }