/* ═════════════════════════════════════════════════════════════
   AZHUM LUMEN · lienzo de investigación IA (/lumen)
   ═════════════════════════════════════════════════════════════
   Página construida 100% con el design system de la casa (v2.2):
   tokens --az-* (colores/las dos temáticas), acento IA oficial
   --az-ia-* (azhum-tokens.css), escala de radios --az-radius-*,
   espaciado en múltiplos de 4 y tipos Fraunces/Inter/IBM Plex Mono.
   Aquí NO se define ningún token ni paleta propia — solo la
   composición del lienzo. La píldora del switcher vive en
   azhum-layout.css (es chrome del shell, no de esta página). */

@keyframes az-lumen-rise {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes az-lumen-pulse {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}

/* ═════════════════ LAYOUT · canvas + rail ═════════════════
   Full-bleed dentro de .azhum-content: márgenes negativos que
   compensan su padding (32/40 → 24/20 → 16/12 por breakpoint). */
.azhum-lumen {
    display: flex;
    align-items: stretch;
    margin: -32px -40px;
    min-height: calc(100vh - var(--az-topbar-height));
    font-family: var(--az-font-ui);
    /* FASE 4B (V5) · piso de micro-tipografía a 11px SOLO dentro de Lumen (badges .azhum-epi,
       .trace-hint, etc. usan --az-text-xs = 10px): no toca el resto de la app. */
    --az-text-xs: 11px;
}

@media (max-width: 1024px) {
    .azhum-lumen { margin: -24px -20px; }
}

@media (max-width: 640px) {
    .azhum-lumen { margin: -16px -12px; }
}

/* Con la barra de impersonación («Ver como») encima, el lienzo NO puede subirse:
   anula el margen negativo superior (mayor especificidad que los 3 breakpoints). */
.azhum-impersonation-bar + .azhum-lumen { margin-top: 0; }

.azhum-lumen-canvas {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ═════════════════ ESTADO WELCOME ═════════════════
   MISMA anatomía que el resto de páginas de la casa: page-header a la
   izquierda (Fraunces + subtítulo, sin héroe centrado ni ornamentos) y el
   contenido en tarjetas estándar. El acento IA aparece SOLO en detalles. */
.azhum-lumen-welcome {
    max-width: 1160px;
    width: 100%;
    /* Centra la COLUMNA welcome en el canvas (flex-item: los márgenes auto del eje
       transversal reparten el hueco a partes iguales y ganan a align-items). El header
       sigue left-aligned DENTRO de la columna — anatomía de la casa intacta. Mismo idiom
       que .azhum-lumen-thread-inner. Por debajo de 1160 el margin auto vale 0 (no rompe). */
    margin-inline: auto;
    padding: 32px 40px 40px;
}

/* El cuadro de chat del welcome ocupa el MISMO ancho que la fila de tarjetas de abajo:
   se anula el tope de 860 SOLO en welcome (el composer ANCLADO de investigación sigue en
   760, y la base 860 queda como fallback inerte). Al ser hijo bloque directo del welcome,
   rellena su content-box exacto → sus bordes cuadran con .azhum-lumen-cards y desaparece
   el hueco muerto a su derecha en pantallas anchas. */
.azhum-lumen-welcome .azhum-lumen-composer-frame {
    max-width: none;
}

@media (max-width: 1024px) {
    .azhum-lumen-welcome { padding: 24px 20px 32px; }
}

@media (max-width: 640px) {
    .azhum-lumen-welcome { padding: var(--az-space-md) var(--az-space-md) var(--az-space-lg); }
}

/* Cabecera de página de la casa + marca de Lumen (icono de trazo, caja suave) */
.azhum-lumen-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.azhum-lumen-mark {
    /* El logo va SUELTO, sin recuadro/caja tipo botón (feedback founder). */
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    margin-top: 4px;
    color: var(--az-ia-a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.azhum-lumen-mark svg { width: 20px; height: 20px; }

/* ── Composer (principal y anclado comparten chrome) ──
   Tarjeta de la casa (surface + border) con el acento IA solo en el foco. */
.azhum-lumen-composer-frame {
    margin-top: var(--az-space-sm);
    max-width: 860px;
    border-radius: var(--az-radius-xl);
    box-shadow: var(--az-shadow-card);
}

.azhum-lumen-composer {
    border-radius: var(--az-radius-xl);
    background: var(--az-surface);
    border: 1px solid var(--az-border);
    transition: border-color var(--az-transition-fast);
}

.azhum-lumen-composer:focus-within { border-color: var(--az-ia-border); }

/* El TelerikTextArea pierde su chrome: el marco lo pone el composer. */
.azhum-lumen-composer .k-textarea,
.azhum-lumen-composer .k-input {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 100%;
}

/* Más AIRE en el cajón (feedback founder): el texto respira centrado en la caja.
   El textarea interno de Telerik es .k-input-inner (padding de tema 3,5px/7px, con
   selector .k-input-md .k-input-inner que gana a un simple 'textarea') → el padding
   de la casa va con !important, como las reglas de border/bg de arriba, para que el
   cursor NO quede pegado al borde. */
.azhum-lumen-composer textarea,
.azhum-lumen-composer .k-input-inner {
    font-family: var(--az-font-ui);
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--az-text);
    padding: 18px 24px 12px !important;
    resize: none;
}

.azhum-lumen-composer textarea::placeholder { color: var(--az-text-faint); }

.azhum-lumen-composer-row {
    display: flex;
    align-items: center;
    gap: var(--az-space-sm);
    padding: 10px 14px 14px 24px;
}

/* Contexto OPCIONAL: label mono + input compacto de la casa. Vacío = no se usa. */
.azhum-lumen-context {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.azhum-lumen-context .ctx-label {
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    letter-spacing: .08em;
    color: var(--az-text-faint);
}

.azhum-lumen-context .k-input {
    height: 32px;
    border-radius: var(--az-radius-md);
    background: var(--az-surface-2);
}

/* Botón enviar: solo la flecha (estilo frontier model) */
.azhum-lumen-send {
    margin-left: auto;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--az-radius-lg);
    background: var(--az-ia-grad);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px var(--az-ia-ring);
    transition: filter var(--az-transition-fast), opacity var(--az-transition-fast);
}

.azhum-lumen-send svg { width: 19px; height: 19px; }
/* Hover sin filter (capa de compositor extra): el ring del acento se intensifica. */
.azhum-lumen-send:hover:not(:disabled) { box-shadow: 0 8px 24px var(--az-ia-ring); }
.azhum-lumen-send:active:not(:disabled) { transform: translateY(1px); }
.azhum-lumen-send:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.azhum-lumen-send:focus-visible,
.azhum-lumen-chip:focus-visible,
.azhum-lumen-card:focus-visible {
    outline: 2px solid var(--az-blue);
    outline-offset: 2px;
}

/* ── Chips rápidos ── */
.azhum-lumen-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--az-space-sm);
    margin-top: 14px;
}

.azhum-lumen-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: var(--az-radius-full);
    background: var(--az-surface);
    border: 1px solid var(--az-border);
    color: var(--az-text-2);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color var(--az-transition-fast), color var(--az-transition-fast);
}

.azhum-lumen-chip:hover { border-color: var(--az-ia-border); color: var(--az-text); }
.azhum-lumen-chip:disabled { opacity: .5; cursor: not-allowed; }

.azhum-lumen-chip .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--az-ia-a);
    flex: 0 0 auto;
}

.azhum-lumen-chip .dot--violet { background: var(--az-blue); }
.azhum-lumen-chip .dot--cyan { background: var(--az-cyan); }
.azhum-lumen-chip .dot--amber { background: var(--az-amber); }
.azhum-lumen-chip .dot--green { background: var(--az-green); }

/* ── Sección "Empieza una investigación" ── */
.azhum-lumen-rule {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: var(--az-space-xl) 0 6px;
}

.azhum-lumen-rule .label {
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--az-text-faint);
    white-space: nowrap;
}

.azhum-lumen-rule .line { flex: 1; height: 1px; background: var(--az-border-subtle); }

.azhum-lumen-rule-sub {
    font-size: 12.5px;
    color: var(--az-text-muted);
    margin: 0 0 var(--az-space-md);
}

.azhum-lumen-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.azhum-lumen-card {
    text-align: left;
    border-radius: var(--az-radius-lg);
    background: var(--az-surface);
    border: 1px solid var(--az-border);
    padding: var(--az-space-md);
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}

.azhum-lumen-card:hover {
    border-color: var(--az-ia-border);
    transform: translateY(-2px);
    box-shadow: var(--az-elev-2);
}

.azhum-lumen-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--az-space-sm);
    gap: var(--az-space-sm);
}

.azhum-lumen-card-title { font-size: 13px; font-weight: 600; color: var(--az-text); }

.azhum-lumen-card-sub {
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    color: var(--az-text-faint);
    margin-top: 1px;
}

.azhum-lumen-card-badge {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: var(--az-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.azhum-lumen-card-badge svg { width: 12px; height: 12px; }
.azhum-lumen-card-badge--red { background: var(--az-red-muted); color: var(--az-ink-red); }
.azhum-lumen-card-badge--amber { background: var(--az-amber-muted); color: var(--az-ink-amber); }
.azhum-lumen-card-badge--green { background: var(--az-green-muted); color: var(--az-ink-green); }
.azhum-lumen-card-badge--violet { background: var(--az-ia-soft); color: var(--az-ink-blue); }

.azhum-lumen-card-figure {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: var(--az-space-xs);
}

.azhum-lumen-card-num {
    font-family: var(--az-font-mono);
    font-variant-numeric: var(--az-numeric);
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--az-text);
    line-height: 1.1;
}

.azhum-lumen-card-num--neg { color: var(--az-ink-red); }
.azhum-lumen-card-num--warn { color: var(--az-ink-amber); }
.azhum-lumen-card-num--pos { color: var(--az-ink-green); }

.azhum-lumen-card-spark { margin-bottom: 2px; min-width: 0; }
.azhum-lumen-card-spark .k-chart { background: transparent; }

.azhum-lumen-card-detail {
    font-family: var(--az-font-mono);
    font-variant-numeric: var(--az-numeric);
    font-size: 11px;
    color: var(--az-text-muted);
}

.azhum-lumen-card-note {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--az-border-subtle);
    font-size: 11.5px;
    color: var(--az-text-2);
    line-height: 1.5;
}

.azhum-lumen-card-note .k { color: var(--az-text-faint); }

.azhum-lumen-disclaimer {
    text-align: center;
    margin-top: var(--az-space-xl);
    font-size: 11.5px;
    color: var(--az-text-faint);
}

/* ═════════════════ ESTADO INVESTIGATION ═════════════════ */
.azhum-lumen-inv {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--az-topbar-height));
}

.azhum-lumen-inv-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 40px;
    border-bottom: 1px solid var(--az-border-subtle);
    position: sticky;
    /* top:0 — el scrollport del shell (.k-drawer-content) ya EMPIEZA bajo el topbar;
       un offset de 56px dejaría la cabecera flotando 56px por debajo de su sitio. */
    top: 0;
    /* Casi opaco SIN backdrop-filter: el blur en un sticky dentro del scrollport
       provocaba cuelgues intermitentes del compositor de Chromium al capturar. */
    background: color-mix(in srgb, var(--az-bg) 96%, transparent);
    z-index: 20;
}

@media (max-width: 640px) {
    .azhum-lumen-inv-header { padding: 12px var(--az-space-md); }
}

.azhum-lumen-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border-radius: var(--az-radius-md);
    background: var(--az-surface);
    border: 1px solid var(--az-border);
    color: var(--az-text-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--az-transition-fast), color var(--az-transition-fast);
}

.azhum-lumen-new-btn svg { width: 15px; height: 15px; }
.azhum-lumen-new-btn:hover { border-color: var(--az-border-strong); color: var(--az-text); }

.azhum-lumen-inv-title { min-width: 0; }

.azhum-lumen-inv-title .eyebrow {
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--az-text-faint);
}

.azhum-lumen-inv-title .q {
    font-size: 14px;
    font-weight: 600;
    color: var(--az-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.azhum-lumen-inv-pill {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 11px;
    border-radius: var(--az-radius-full);
    background: var(--az-surface);
    border: 1px solid var(--az-border);
    white-space: nowrap;
}

.azhum-lumen-inv-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--az-green);
}

.azhum-lumen-inv-pill .dot--busy { background: var(--az-amber); animation: az-lumen-pulse 1.6s ease-in-out infinite; }

.azhum-lumen-inv-pill span:last-child {
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    color: var(--az-text-2);
}

.azhum-lumen-thread {
    flex: 1;
    padding: 26px 40px 20px;
}

@media (max-width: 640px) {
    .azhum-lumen-thread { padding: 18px var(--az-space-md) 12px; }
}

.azhum-lumen-thread-inner {
    max-width: 760px;
    margin: 0 auto;
}

/* Pregunta del usuario: burbuja a la derecha */
.azhum-lumen-user {
    display: flex;
    justify-content: flex-end;
    margin: 22px 0;
}

.azhum-lumen-user > div {
    max-width: 80%;
    padding: 12px 17px;
    border-radius: var(--az-radius-xl) var(--az-radius-xl) var(--az-radius-xs) var(--az-radius-xl);
    background: var(--az-surface-2);
    border: 1px solid var(--az-border-subtle);
    font-size: 14.5px;
    color: var(--az-text);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Contexto aportado por el usuario: visible en la burbuja (nada viaja oculto). */
.azhum-lumen-user-ctx {
    display: block;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--az-border-subtle);
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    color: var(--az-text-muted);
}

/* Respuesta de Lumen: avatar + contenido */
.azhum-lumen-answer {
    display: flex;
    gap: 14px;
    animation: az-lumen-rise .45s ease both;
}

.azhum-lumen-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: var(--az-radius-md);
    background: var(--az-ia-soft);
    border: 1px solid var(--az-ia-border);
    color: var(--az-ia-a);
    display: flex;
    align-items: center;
    justify-content: center;
}

.azhum-lumen-avatar svg { width: 18px; height: 18px; }

.azhum-lumen-answer-body { flex: 1; min-width: 0; }

.azhum-lumen-answer-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.azhum-lumen-answer-head .who { font-size: 13.5px; font-weight: 700; color: var(--az-text); }

.azhum-lumen-answer-head .when {
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    color: var(--az-text-faint);
}

/* (F2 · el trace-strip superior fue eliminado: el indicador de fase vive ahora INLINE al final del
   hilo, donde el modelo trabaja; el recuento/cuadre migraron a .azhum-lumen-thread-meta.) */

.azhum-lumen-trace-steps {
    display: flex;
    border-top: 1px solid var(--az-border-subtle);
    background: var(--az-bg-2);
}

.azhum-lumen-trace-steps .step {
    flex: 1;
    padding: 8px 13px;
    border-right: 1px solid var(--az-border-subtle);
    opacity: .45;
    transition: opacity var(--az-transition);
}

.azhum-lumen-trace-steps .step:last-child { border-right: 0; }
.azhum-lumen-trace-steps .step.on { opacity: 1; }

.azhum-lumen-trace-steps .step-code {
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    color: var(--az-ia-a);
}

.azhum-lumen-trace-steps .step-desc {
    font-size: 11px;
    color: var(--az-text-muted);
    margin-top: 2px;
}

@media (max-width: 640px) {
    .azhum-lumen-trace-steps { flex-wrap: wrap; }
    .azhum-lumen-trace-steps .step { flex: 1 1 50%; }
}

/* ── Bloques gobernados dentro del lienzo (re-skin de las clases
      existentes: el renderer tipado de la página no cambia) ── */
.azhum-lumen .azhum-ia-narrative {
    margin: 10px 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--az-text-2);
    overflow-wrap: anywhere;
}

.azhum-lumen .azhum-ia-narrative strong { color: var(--az-text); }

/* ── Markdown enriquecido (RenderMdCore emite bloques HTML; sin pre-wrap) ── */
.azhum-lumen .azhum-ia-narrative p,
.azhum-lumen .azhum-lumen-conclusion p { margin: 0 0 10px; }
.azhum-lumen .azhum-ia-narrative p:last-child,
.azhum-lumen .azhum-lumen-conclusion p:last-child { margin-bottom: 0; }
.azhum-lumen .azhum-md-h { color: var(--az-text); font-weight: 650; line-height: 1.35; margin: 18px 0 8px; letter-spacing: -0.01em; }
/* FASE 5 (C1-C3) · jerarquía CLARA de encabezados en la prosa larga (diagnósticos). */
.azhum-lumen .azhum-md-h1 { font-size: 17px; padding-bottom: 5px; border-bottom: 1px solid var(--az-border-subtle); }
.azhum-lumen .azhum-md-h2 { font-size: 15.5px; }
.azhum-lumen .azhum-md-h3 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--az-text-muted); margin: 14px 0 6px; }
/* FASE 5 (R2) · regla horizontal */
.azhum-lumen .azhum-md-hr { border: 0; border-top: 1px solid var(--az-border-subtle); margin: 16px 0; }
/* FASE 5 (R6) · texto de recomendación (bloque, no inline: RenderNarrative emite <p>) */
.azhum-lumen .reco-text { flex: 1; min-width: 0; }
.azhum-lumen .reco-text > p:first-child { margin-top: 0; }
.azhum-lumen .reco-text > p:last-child { margin-bottom: 0; }
/* FASE 5 (C4) · la estructura markdown gobierna: neutraliza el pre-wrap heredado (azhum-theme)
   DENTRO de Lumen — los párrafos fluyen, sin preservar saltos literales. NO afecta a /azhumia. */
.azhum-lumen .azhum-ia-narrative,
.azhum-lumen .azhum-ia-insight__body { white-space: normal; }
.azhum-lumen .azhum-md-ul { list-style: none; margin: 8px 0; padding-left: 4px; }
.azhum-lumen .azhum-md-ul > li { position: relative; padding-left: 18px; margin: 5px 0; }
.azhum-lumen .azhum-md-ul > li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--az-text-faint); }
.azhum-lumen .azhum-md-ol { list-style: decimal; margin: 8px 0; padding-left: 22px; }
.azhum-lumen .azhum-md-ol > li { margin: 5px 0; padding-left: 4px; }
.azhum-lumen .azhum-md-quote { margin: 12px 0; padding: 6px 0 6px 16px; border-left: 3px solid var(--az-border-strong); color: var(--az-text-muted); font-style: italic; }
.azhum-lumen .azhum-md-code { background: var(--az-surface-2); border: 1px solid var(--az-border-subtle); border-radius: var(--az-radius-md); padding: 12px 14px; margin: 12px 0; overflow-x: auto; font-family: var(--az-font-mono, ui-monospace, monospace); font-size: 13px; line-height: 1.55; color: var(--az-text); }
.azhum-lumen .azhum-md-code-inline { background: var(--az-surface-2); border: 1px solid var(--az-border-subtle); border-radius: 5px; padding: 1px 6px; font-family: var(--az-font-mono, ui-monospace, monospace); font-size: 0.9em; color: var(--az-text); }
/* Feedback founder · cifra en la prosa: SUTIL, SIN caja (texto limpio) — solo tabular + leve peso. */
.azhum-lumen .azhum-md-num { font-variant-numeric: tabular-nums slashed-zero; font-weight: 620; white-space: nowrap; }
/* Monto GOBERNADO enlazado a su bloque: hipervínculo SUTIL; click/Enter → abre la trazabilidad
   (que ya dice afirmado/hipótesis/etc.). La magia elegante: sin card rígida, sin ensuciar el markdown. */
.azhum-lumen .azhum-num-link {
    font-variant-numeric: tabular-nums slashed-zero;
    font-weight: 650;
    white-space: nowrap;
    color: inherit;             /* NEUTRO = color de la prosa (ingresos, ratios, conteos): NO se colorea.
                                   Solo PÉRDIDAS (rojo) y BENEFICIOS/márgenes+ (verde) resaltan → sin arcoíris. */
    cursor: pointer;
    text-decoration: none;      /* feedback founder: sin subrayado — el color + el hover son la afordancia */
    border-radius: 3px;
    padding: 0 1px;
    transition: color .12s, background .12s;
}
/* Semántica financiera del monto enlazado (feedback founder): MARGEN positivo = beneficio → verde;
   cifra NEGATIVA (pérdida/desfavorable, margen o no) → rojo; el resto queda neutro (arriba). */
.azhum-lumen .azhum-num-link--pos { color: var(--az-green); }
.azhum-lumen .azhum-num-link--neg { color: var(--az-red); }
/* Hover/foco: fondo tenue del PROPIO color del enlace (currentColor) → el realce respeta verde/rojo/neutro. */
.azhum-lumen .azhum-num-link:hover,
.azhum-lumen .azhum-num-link:focus-visible {
    background: color-mix(in oklab, currentColor 12%, transparent);
    outline: none;
}

.azhum-lumen .azhum-fact-block,
.azhum-lumen .azhum-ia-insight,
.azhum-lumen .azhum-ia-contrast {
    background: var(--az-surface);
    border-radius: var(--az-radius-lg);
    padding: 14px 18px;
    margin: 12px 0;
}

.azhum-lumen .azhum-fact-block { border: 1px solid var(--az-border); }

.azhum-lumen .azhum-ia-analysis {
    border: 1px solid var(--az-border);
    background: var(--az-surface);
    border-radius: var(--az-radius-lg);
    padding: 12px 12px;   /* FASE 4B · insets reducidos → la tabla respira más ancho */
    margin: 12px 0;
}

/* Bloque clicable → traza (el wrapper Razor añade .traceable/.selected) */
.azhum-lumen-block.traceable > .azhum-fact-block,
.azhum-lumen-block.traceable > .azhum-ia-analysis {
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
}

.azhum-lumen-block.traceable:hover > .azhum-fact-block,
.azhum-lumen-block.traceable:hover > .azhum-ia-analysis {
    border-color: var(--az-ia-border);
}

.azhum-lumen-block.selected > .azhum-fact-block,
.azhum-lumen-block.selected > .azhum-ia-analysis {
    border-color: var(--az-ia-border);
    box-shadow: 0 0 0 3px var(--az-ia-ring);
}

.azhum-lumen-block { position: relative; }

/* V5 · afordancia «Ver traza» — pastilla en el PIE-derecho de la card (no en el
   top-right, donde chocaba con el botón Excel y pisaba el borde de la card). El pie
   del bloque es un <details.azhum-lineage> colapsado con el summary a la izquierda:
   su lado derecho está libre. Pastilla sólida con borde para separarse del contenido;
   revela suave en hover/selección. pointer-events:none → el clic lo captura la card. */
.azhum-lumen-block.traceable > .trace-hint {
    position: absolute;
    bottom: 10px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--az-text-muted);
    background: var(--az-surface);
    border: 1px solid var(--az-border);
    border-radius: 999px;
    padding: 2px 9px;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
}

.azhum-lumen-block.traceable:hover > .trace-hint,
.azhum-lumen-block.selected > .trace-hint { opacity: 1; transform: translateY(0); }

/* La card .azhum-ia-analysis aporta su propio margin:12px 0 → el wrapper sobresale 12px bajo la
   card, y la pastilla (anclada al wrapper) colgaría 2px por debajo del borde. Compensar SOLO aquí
   (las demás cards no tienen ese margen): la pastilla queda 10px DENTRO de la card. */
.azhum-lumen-block.traceable:has(> .azhum-ia-analysis) > .trace-hint { bottom: 22px; }

/* Selección: la pastilla adopta el acento del anillo para reforzar «esta es la traza abierta». */
.azhum-lumen-block.selected > .trace-hint {
    color: var(--az-blue);
    border-color: var(--az-ia-border);
}

.azhum-lumen .azhum-ia-analysis__table th,
.azhum-lumen .azhum-ia-analysis__table td { padding: 7px 12px 7px 0; }

/* Código del valor junto a su nombre («Fríos del Norte · C012»): mono, discreto. */
.azhum-lumen-dimcode {
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    color: var(--az-text-faint);
    white-space: nowrap;
}

/* ── Follow-ups ── */
.azhum-lumen-followups {
    display: flex;
    align-items: center;
    gap: var(--az-space-sm);
    flex-wrap: wrap;
    margin-top: var(--az-space-md);
}

.azhum-lumen-followups .label {
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--az-text-faint);
    margin-right: 2px;
}

/* ── Composer anclado (investigation) ── */
.azhum-lumen-docked {
    position: sticky;
    bottom: 0;
    padding: 14px 40px 20px;
    background: linear-gradient(180deg, transparent, var(--az-bg) 34%);
}

@media (max-width: 640px) {
    .azhum-lumen-docked { padding: 10px var(--az-space-md) 14px; }
}

.azhum-lumen-docked .azhum-lumen-composer-frame {
    max-width: 760px;
    margin: 0 auto;
    box-shadow: var(--az-elev-2);
}

.azhum-lumen-docked .azhum-lumen-composer textarea,
.azhum-lumen-docked .azhum-lumen-composer .k-input-inner {
    font-size: 14.5px;
    padding: 14px 20px 8px !important;
}

.azhum-lumen-docked .azhum-lumen-composer-row { padding: 8px 12px 12px 18px; }

.azhum-lumen-docked .azhum-lumen-send {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
}

/* ═════════════════ RAIL DERECHO ═════════════════ */
.azhum-lumen-rail {
    width: 340px;
    flex: 0 0 340px;
    border-left: 1px solid var(--az-border);
    background: var(--az-bg-2);
    padding: 20px 18px 28px;
    position: sticky;
    /* top:0 (scrollport bajo el topbar) — con el max-height siguiente el rail ocupa
       EXACTAMENTE el alto visible; con top:56 sus últimos 56px caían bajo el pliegue. */
    top: 0;
    max-height: calc(100vh - var(--az-topbar-height));
    overflow-y: auto;
    align-self: flex-start;
}

.azhum-lumen-rail-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 6px;
}

.azhum-lumen-rail-title svg { width: 16px; height: 16px; color: var(--az-cyan); flex: 0 0 auto; }
.azhum-lumen-rail-title span { font-size: 14px; font-weight: 700; color: var(--az-text); }

.azhum-lumen-rail-sub {
    font-size: 11.5px;
    color: var(--az-text-muted);
    margin: 0 0 var(--az-space-md);
    line-height: 1.6;
}

.azhum-lumen-rail-label {
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--az-text-faint);
    padding: var(--az-space-md) 4px var(--az-space-sm);
}

.azhum-lumen-source-card {
    border-radius: var(--az-radius-lg);
    background: var(--az-surface);
    border: 1px solid var(--az-border);
    padding: 14px;
    margin-bottom: 10px;
}

.azhum-lumen-source-card .row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.azhum-lumen-source-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: var(--az-radius-md);
    background: var(--az-ia-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.azhum-lumen-source-icon svg { width: 16px; height: 16px; color: var(--az-cyan); }

.azhum-lumen-source-card .name { font-size: 12.5px; font-weight: 600; color: var(--az-text); }

.azhum-lumen-source-card .kind {
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    color: var(--az-text-faint);
}

.azhum-lumen-source-card .check { margin-left: auto; }
.azhum-lumen-source-card .check svg { width: 15px; height: 15px; color: var(--az-ink-green); }

/* ── Leyenda de metodología (rail · welcome): cómo leer la traza.
      Contenido REAL del método AD/AC/AI/AR + umbrales de ITD — no promesas. ── */
.azhum-lumen-method {
    border-radius: var(--az-radius-lg);
    background: var(--az-surface);
    border: 1px solid var(--az-border);
    padding: 14px;
}

.azhum-lumen-method .row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
}

.azhum-lumen-method .code {
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    font-weight: 600;
    flex: 0 0 22px;
}

.azhum-lumen-method .code--ad { color: var(--az-ink-green); }
.azhum-lumen-method .code--ac { color: var(--az-ink-blue); }
.azhum-lumen-method .code--ai { color: var(--az-ink-amber); }
.azhum-lumen-method .code--ar { color: var(--az-text-muted); }

.azhum-lumen-method .desc {
    font-size: 11.5px;
    color: var(--az-text-2);
    line-height: 1.5;
}

.azhum-lumen-method .itd-note {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--az-border-subtle);
    font-size: 11px;
    color: var(--az-text-muted);
    line-height: 1.55;
}

/* ── Panel de trazabilidad (rail · investigation) ── */
.azhum-lumen-trace-panel { animation: az-lumen-rise .3s ease both; }

.azhum-lumen-trace-card {
    border-radius: var(--az-radius-lg);
    background: var(--az-surface);
    border: 1px solid var(--az-border);
    padding: var(--az-space-md);
    margin-bottom: 12px;
}

.azhum-lumen-trace-card .eyebrow {
    font-family: var(--az-font-mono);
    font-size: var(--az-text-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--az-text-faint);
}

.azhum-lumen-trace-card .title {
    font-size: 14px;
    font-weight: 600;
    color: var(--az-text);
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.azhum-lumen-ring-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}

.azhum-lumen-ring {
    position: relative;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
}

.azhum-lumen-ring svg { transform: rotate(-90deg); display: block; }

.azhum-lumen-ring .val {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--az-font-mono);
    font-variant-numeric: var(--az-numeric);
    font-size: 15px;
    font-weight: 600;
    color: var(--az-text);
}

.azhum-lumen-ring-meta .grade { font-size: var(--az-text-sm); font-weight: 600; }
.azhum-lumen-ring-meta .grade--high { color: var(--az-ink-green); }
.azhum-lumen-ring-meta .grade--good { color: var(--az-ink-cyan); }
.azhum-lumen-ring-meta .grade--mid { color: var(--az-ink-amber); }
.azhum-lumen-ring-meta .grade--low { color: var(--az-ink-red); }

.azhum-lumen-ring-meta .desc {
    font-size: 11px;
    color: var(--az-text-muted);
    line-height: 1.5;
    margin-top: 2px;
}

/* Mezcla AD/AC/AI/AR: reutiliza .azhum-trace-bar de la casa, en fino */
.azhum-lumen-trace-card .azhum-trace-bar {
    height: 8px;
    border-radius: var(--az-radius-full);
    margin-top: var(--az-space-md);
}

.azhum-lumen-mix-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: var(--az-space-sm);
}

.azhum-lumen-mix-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--az-text-muted);
}

.azhum-lumen-mix-legend i {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.azhum-lumen-mix-legend .sw-ad { background: var(--az-green); }
.azhum-lumen-mix-legend .sw-ac { background: var(--az-blue); }
.azhum-lumen-mix-legend .sw-ai { background: var(--kendo-color-warning, var(--az-amber)); }
.azhum-lumen-mix-legend .sw-ar { background: var(--az-red); }

.azhum-lumen-trace-kv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    border-radius: var(--az-radius-md);
    background: var(--az-surface);
    border: 1px solid var(--az-border-subtle);
    margin-bottom: var(--az-space-sm);
}

.azhum-lumen-trace-kv .k { font-size: var(--az-text-sm); color: var(--az-text-2); }

.azhum-lumen-trace-kv .v {
    font-family: var(--az-font-mono);
    font-variant-numeric: var(--az-numeric);
    font-size: 11px;
    color: var(--az-text-muted);
    text-align: right;
}

.azhum-lumen-trace-note {
    margin-top: 12px;
    padding: 13px 15px;
    border-radius: var(--az-radius-lg);
    background: var(--az-ia-soft);
    border: 1px solid var(--az-ia-border);
    font-size: 11.5px;
    color: var(--az-text-2);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.azhum-lumen-trace-note strong { color: var(--az-text); }

.azhum-lumen-trace-drill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--az-space-sm);
    width: 100%;
    margin-top: 14px;
    height: 40px;
    border-radius: var(--az-radius-md);
    background: var(--az-surface-2);
    border: 1px solid var(--az-border);
    color: var(--az-text-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: border-color var(--az-transition-fast), color var(--az-transition-fast);
}

.azhum-lumen-trace-drill svg { width: 14px; height: 14px; }
.azhum-lumen-trace-drill:hover { border-color: var(--az-border-strong); color: var(--az-text); }

.azhum-lumen-trace-hint {
    font-size: 11px;
    color: var(--az-text-muted);
    line-height: 1.55;
    margin: 0 0 var(--az-space-md);
}

/* ── Rail responsive: <1280px se convierte en panel deslizante ── */
.azhum-lumen-rail-toggle { display: none; }
.azhum-lumen-rail-backdrop { display: none; }

@media (max-width: 1279px) {
    .azhum-lumen-rail {
        position: fixed;
        top: var(--az-topbar-height);
        right: 0;
        bottom: 0;
        max-height: none;
        transform: translateX(100%);
        /* SIN transition en el estado cerrado (a propósito): al CRUZAR 1280 (in-flow → drawer)
           el transform salta de none a translateX(100%); con transition aquí ese salto se
           ANIMABA y barría el rail por encima del chat (y a veces quedaba clavado en
           translateX(0) = solape). El drawer cerrado se fija fuera de pantalla al instante. */
        z-index: 40;
        box-shadow: var(--az-elev-4);
    }

    /* La transición vive SOLO en .open: es el after-change style de ABRIR → anima el slide-in
       del toggle. CERRAR y el cruce de breakpoint aterrizan en el estado base (sin transition)
       → snap instantáneo, nunca barrido (el backdrop también desaparece de golpe, es coherente). */
    .azhum-lumen-rail.open {
        transform: translateX(0);
        transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* En investigación NO hay botón flotante (pisaría el composer anclado en 700–900px):
       la traza se abre tocando cualquier bloque gobernado. El flotante queda para el
       welcome (Fuentes), donde no hay composer anclado. */
    .azhum-lumen:has(.azhum-lumen-inv) .azhum-lumen-rail-toggle { display: none; }

    .azhum-lumen-rail-toggle {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        position: fixed;
        right: 18px;
        bottom: 92px;
        z-index: 39;
        height: 38px;
        padding: 0 14px;
        border-radius: var(--az-radius-full);
        background: var(--az-surface);
        border: 1px solid var(--az-border);
        color: var(--az-text-2);
        font-family: inherit;
        font-size: var(--az-text-sm);
        font-weight: 600;
        cursor: pointer;
        box-shadow: var(--az-elev-2);
    }

    .azhum-lumen-rail-toggle svg { width: 14px; height: 14px; color: var(--az-cyan); }

    .azhum-lumen-rail-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        top: var(--az-topbar-height);
        background: var(--az-overlay);
        z-index: 39;
    }
}

/* ── Skeleton de las tarjetas welcome (mini) ── */
.azhum-lumen-cards .azhum-lumen-card-loading {
    border-radius: var(--az-radius-lg);
    border: 1px solid var(--az-border-subtle);
    background: var(--az-surface);
    min-height: 148px;
}

/* ═══ F1 · Composición tipada + proceso colapsable + etapas dinámicas ═══
   La respuesta abre con la CONCLUSIÓN; el proceso (bloques + narrativa intermedia)
   queda plegado en un <details>. Reglas duras heredadas: sin backdrop-filter y sin
   filter en hover (congelaban el compositor CDP) — solo background/box-shadow. */

/* Timeline de etapas reales (Progress chunks) */
.azhum-lumen-stages {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px 10px;
}

.azhum-lumen-stages .stage {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    border-radius: var(--az-radius-md);
    color: var(--az-text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.azhum-lumen-stages .stage .tick {
    width: 18px;
    height: 18px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--az-green);
}

.azhum-lumen-stages .stage .tick svg { width: 13px; height: 13px; }

.azhum-lumen-stages .stage.live {
    color: var(--az-text-2);
    background: var(--az-ia-soft);
}

.azhum-lumen-stages .stage.live .tick { color: var(--az-ia-a); }

.azhum-lumen-stages .spin {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid color-mix(in oklab, var(--az-ia-a) 28%, transparent);
    border-top-color: var(--az-ia-a);
    animation: azhum-lumen-spin .8s linear infinite;
}

@keyframes azhum-lumen-spin { to { transform: rotate(360deg); } }

/* ── N1 · renglón COLAPSADO de un bloque de dato (patrón Claude) ─────────────
   Cerrado: solo el texto de lo que hizo la consulta. Abierto: la tabla debajo. */
.azhum-lumen-datablock { margin: 6px 0; }
.azhum-lumen-datarow {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 11px;
    background: transparent;
    border: 1px solid var(--az-border-subtle);
    border-radius: 9px;
    text-align: left;
    cursor: pointer;
    font-size: 13.5px;
    transition: background .15s, border-color .15s;
}
.azhum-lumen-datarow:hover { background: var(--az-surface-2); border-color: var(--az-border); }
.azhum-lumen-datarow:focus-visible { outline: none; border-color: var(--az-ia-a); }
.azhum-lumen-datarow.is-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.azhum-lumen-datarow .tick {
    display: inline-flex; flex: 0 0 auto; width: 16px; height: 16px;
    align-items: center; justify-content: center; color: var(--az-ink-green);
}
.azhum-lumen-datarow .tick svg { width: 13px; height: 13px; }
.azhum-lumen-datarow .txt {
    flex: 1; min-width: 0; font-weight: 600; color: var(--az-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.azhum-lumen-datarow .meta { flex: 0 0 auto; color: var(--az-text-faint); font-size: 12px; }
.azhum-lumen-datarow .chev { flex: 0 0 auto; display: inline-flex; color: var(--az-text-faint); transition: transform .18s; }
.azhum-lumen-datarow .chev svg { width: 15px; height: 15px; }
.azhum-lumen-datarow.is-open .chev { transform: rotate(180deg); }
/* F3 · la fase ACTIVA usa la MISMA forma que un renglón de dato (para que se lea «⟳ se convierte en
   ✓» cuando su bloque llega en su lugar): spinner en vez de check, sin chevron, sin hover ni cursor. */
.azhum-lumen-datarow--live { cursor: default; }
.azhum-lumen-datarow--live:hover { background: transparent; border-color: var(--az-border-subtle); }
.azhum-lumen-datarow--live .tick { color: var(--az-ia-a); }
.azhum-lumen-datarow--live .spin {
    display: inline-block; width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid color-mix(in oklab, var(--az-ia-a) 28%, transparent);
    border-top-color: var(--az-ia-a);
    animation: azhum-lumen-spin .8s linear infinite;
}
/* La tabla desplegada se pega al renglón (sin margen superior, esquinas superiores rectas). */
.azhum-lumen-datablock.is-open .azhum-lumen-block { margin-top: 0; }
.azhum-lumen-datablock.is-open .azhum-ia-analysis,
.azhum-lumen-datablock.is-open .azhum-ia-web {
    margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
}

/* Narrativa intermedia en vivo: discreta, el detalle vive en el proceso */
.azhum-lumen-live-note {
    color: var(--az-text-muted);
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    margin: 2px 2px 0;
}

/* Respuesta compuesta */
.azhum-lumen-composed { display: flex; flex-direction: column; gap: 12px; }

.azhum-lumen-conclusion {
    font-size: 15px;
    line-height: 1.68;
    color: var(--az-text);
}

/* F5 · tarjetas KPI · jerarquía título→valor→meta. Rejilla acotada (minmax 170–230) para que las
   tarjetas no se estiren a todo el ancho ni queden pinchadas — legibles y comparables entre sí. */
.azhum-lumen-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 230px));
    gap: 10px;
}

.azhum-lumen-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--az-border);
    background: var(--az-surface-2);
    border-radius: var(--az-radius-lg);
    padding: 12px 14px;
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.azhum-lumen-kpi:hover,
.azhum-lumen-kpi:focus-visible { border-color: var(--az-ia-a); box-shadow: var(--az-elev-2); outline: none; }

.azhum-lumen-kpi.selected { border-color: var(--az-ia-a); box-shadow: 0 0 0 1px var(--az-ia-a) inset; }

/* TÍTULO = protagonista: primero, legible en color pleno (no un rótulo diminuto y apagado como
   antes) — se identifica QUÉ es la tarjeta en <1s. Envuelve hasta 2 líneas sin romper la caja. */
.azhum-lumen-kpi-title {
    font-size: 12.5px;
    font-weight: 640;
    color: var(--az-text);
    line-height: 1.3;
    letter-spacing: .01em;
}

/* VALOR = ancla numérica, debajo del título. Rojo solo si es negativo (D6). */
.azhum-lumen-kpi-value {
    font-size: 20px;
    font-weight: 680;
    color: var(--az-text);
    font-variant-numeric: tabular-nums slashed-zero;
    line-height: 1.15;
}
.azhum-lumen-kpi-value.is-neg { color: var(--az-red); }

/* META = período · estado epistémico (SIEMPRE) · trazabilidad (ITD), en badges compactos. */
.azhum-lumen-kpi-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.azhum-lumen-kpi-period {
    font-size: 11.5px;
    color: var(--az-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── FASE 4 (A2) · chips inline de cifra afirmada (menos tarjetas) ───────── */
.azhum-lumen-factchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0; }
.azhum-lumen-factchip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px;
    border: 1px solid var(--az-border);
    border-radius: 999px;
    background: var(--az-surface);
    cursor: pointer;
    font-size: 13.5px;
    transition: border-color .15s, box-shadow .15s;
}
.azhum-lumen-factchip:hover,
.azhum-lumen-factchip:focus-visible { border-color: var(--az-ia-a); box-shadow: var(--az-elev-1); outline: none; }
.azhum-lumen-factchip.selected { border-color: var(--az-ia-a); box-shadow: 0 0 0 1px var(--az-ia-a) inset; }
.azhum-lumen-factchip .amt {
    font-weight: 650;
    color: var(--az-text);
    font-variant-numeric: tabular-nums slashed-zero;
}
.azhum-lumen-factchip .q { font-size: 10.5px; }   /* el color lo pone .azhum-q-badge--* (misma escala) */
/* Tooltip CSS-only (vistazo); el detalle completo es el click → traza en el rail. */
.azhum-lumen-factchip-tip {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 30;
    min-width: 190px;
    max-width: 320px;
    display: none;
    flex-direction: column;
    gap: 3px;
    padding: 9px 11px;
    border: 1px solid var(--az-border);
    border-radius: 10px;
    background: var(--az-surface);
    box-shadow: var(--az-elev-3);
    font-size: 12px;
    color: var(--az-text-2);
    text-align: left;
    white-space: normal;
    pointer-events: none;
}
.azhum-lumen-factchip:hover .azhum-lumen-factchip-tip,
.azhum-lumen-factchip:focus-visible .azhum-lumen-factchip-tip { display: flex; }
.azhum-lumen-factchip-tip .t { font-weight: 650; color: var(--az-text); margin-bottom: 2px; }
.azhum-lumen-factchip-tip .kv { color: var(--az-text-muted); }
.azhum-lumen-factchip-tip .kv b { color: var(--az-text-2); font-weight: 600; margin-right: 4px; }
.azhum-lumen-factchip-tip .hint { color: var(--az-text-faint); margin-top: 3px; font-size: 11px; }

.azhum-lumen-sec-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--az-text-muted);
    margin: 6px 2px 0;
}

.azhum-lumen-recos { display: flex; flex-direction: column; gap: 6px; }

.azhum-lumen-recos .reco {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--az-border-subtle);
    background: var(--az-surface);
    border-radius: var(--az-radius-md);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--az-text-2);
}

.azhum-lumen-recos .reco svg {
    width: 14px;
    height: 14px;
    flex: none;
    margin-top: 2px;
    color: var(--az-green);
}

.azhum-lumen-caveats {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--az-text-2);
    background: var(--az-amber-muted);
    border-left: 2px solid var(--az-amber);
    border-radius: 0 var(--az-radius-md) var(--az-radius-md) 0;
    padding: 8px 12px;
}

/* F2 · EL HILO de la investigación: árbol único append-only, SIN apariencia de card. Se contrae
   MANUALMENTE con una transición de ALTURA (grid-template-rows 1fr↔0fr) que NO quita nodos del DOM
   — el contenido leído queda estable, sin saltos ni recreación de charts. Supersede la card
   «Proceso de investigación» y su auto-plegado (founder 2026-07-16). */
/* Colapso por grid-rows 1fr↔0fr (preserva los nodos: el contenido NO se destruye ni recrea, solo
   se oculta — clave para que scroll/lectura no salten). F6 · SIN transición: animar entre unidades
   `fr` se ATASCA en el valor inicial en este Chromium (verificado: tras colapsar, el expand se queda
   a 46px; el toggle estático 1fr↔0fr es 100% fiable). El colapso lo inicia el usuario → instantáneo
   es UX correcta (como un <details>); mejor fiable que una animación que deja el hilo a medias. */
.azhum-lumen-thread {
    display: grid;
    grid-template-rows: 1fr;
}
.azhum-lumen-thread.is-collapsed { grid-template-rows: 0fr; }
.azhum-lumen-thread-inner {
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Línea meta discreta al PIE del hilo (recuento · cuadre · control de colapso). NO es card. */
.azhum-lumen-thread-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 8px 0 14px;
    font-size: var(--az-text-sm);
    color: var(--az-text-muted);
}
.azhum-lumen-thread-meta .m { color: var(--az-text-muted); }
.azhum-lumen-thread-meta .azhum-lumen-cuadre { margin-left: 0; }   /* el auto va al toggle, no al badge */
.azhum-lumen-thread-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 3px 9px;
    font-family: inherit;
    font-size: 12px;
    color: var(--az-text-faint);
    background: transparent;
    border: 0;
    border-radius: var(--az-radius-md);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.azhum-lumen-thread-toggle:hover { background: var(--az-surface-2); color: var(--az-text-muted); }
/* F7 · id de diagnóstico del turno: MUY sutil (mono, tenue) — presente para el investigador, invisible
   para el resto. No empuja el layout (el margin-auto ya lo puso el toggle). */
.azhum-lumen-thread-diagid {
    font-family: var(--az-font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    letter-spacing: .02em;
    color: var(--az-text-faint);
    background: transparent;
    border: 0;
    padding: 3px 6px;
    border-radius: var(--az-radius-md);
    cursor: copy;
    /* sin opacity: el CorrelationId existe para LEERSE y citarse; --az-text-faint ya es el nivel tenue */
    transition: opacity .15s, background .15s;
}
.azhum-lumen-thread-diagid:hover { color: var(--az-text-2); background: var(--az-surface-2); }
.azhum-lumen-thread-chevron { display: inline-flex; transition: transform .18s ease; }
.azhum-lumen-thread-chevron svg { width: 14px; height: 14px; }
/* Contraído (aria-expanded=false): chevron ▶ (rotado). Expandido: ▼ (natural). */
.azhum-lumen-thread-meta [aria-expanded="false"] .azhum-lumen-thread-chevron { transform: rotate(-90deg); }

/* Separador «Conclusión»: cierra el proceso y abre la voz protagonista (la explicación,
   el gráfico, los hallazgos). Acento IA + una regla superior para el corte visual. */
.azhum-lumen-concl-eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--az-border-subtle);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--az-ia-a);
}

.azhum-lumen-concl-eyebrow svg { width: 14px; height: 14px; flex: none; }

.azhum-lumen-cuadre {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 2px 9px;
    border-radius: var(--az-radius-full);
    background: var(--az-green-muted);
    color: var(--az-green);
    font-size: 11px;
    font-weight: 650;
}

.azhum-lumen-cuadre svg { width: 11px; height: 11px; }

/* F3 · renombrar conversación (cabecera de investigación) */
.azhum-lumen-inv-title .eyebrow { display: flex; align-items: center; gap: 6px; }

.azhum-lumen-rename {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    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;
}

.azhum-lumen-rename svg { width: 12px; height: 12px; }

.azhum-lumen-inv-title:hover .azhum-lumen-rename,
.azhum-lumen-rename:focus-visible { opacity: 1; }

.azhum-lumen-rename:hover { color: var(--az-ia-a); }

.azhum-lumen-rename-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }

.azhum-lumen-rename-save {
    height: 30px;
    padding: 0 12px;
    border-radius: var(--az-radius-md);
    border: 1px solid var(--az-border);
    background: var(--az-surface-2);
    color: var(--az-text-2);
    font-family: inherit;
    font-size: var(--az-text-sm);
    font-weight: 600;
    cursor: pointer;
}

.azhum-lumen-rename-save:hover { border-color: var(--az-ia-a); color: var(--az-text); }

/* ÍTEM 5(b) · botón Reintentar bajo el banner de error (re-emite la pregunta del turno fallido) */
.azhum-lumen-retry-btn {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--az-text);
    background: var(--az-surface-2);
    border: 1px solid var(--az-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.azhum-lumen-retry-btn:hover { border-color: var(--az-ia-a); background: var(--az-surface); }
.azhum-lumen-retry-btn:focus-visible { outline: 2px solid var(--az-ia-a); outline-offset: 2px; }

/* F5a · herramientas del bloque analítico (copiar/descargar PNG + Excel), agrupadas a la derecha */
.azhum-ia-analysis__tools { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }

.azhum-export-btn--sm {
    height: 26px;
    padding: 0 10px;
    font-size: 11.5px;
    gap: 5px;
}

.azhum-export-btn--sm svg { width: 13px; height: 13px; }

/* Feedback de «copiado/descargado» del gráfico (flash breve, lo pone/quita el JS). */
.azhum-lumen-chart-img.is-done { color: var(--az-green); border-color: var(--az-green); }
.azhum-lumen-chart-img.is-fail { color: var(--az-red); border-color: var(--az-red); }

/* ═══ F5b · Adjuntos del composer (clip + chip del documento extraído) ═══ */
.azhum-lumen-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--az-border);
    border-radius: var(--az-radius-md);
    background: var(--az-surface-2);
    color: var(--az-text-muted);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color .15s ease, border-color .15s ease;
}

.azhum-lumen-attach:hover { color: var(--az-ia-a); border-color: var(--az-ia-a); }

.azhum-lumen-attach svg { width: 15px; height: 15px; }

/* InputFile nativo invisible DENTRO del label (patrón AzhumDropZone) */
.azhum-lumen-attach input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.azhum-lumen-attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid color-mix(in oklab, var(--az-ia-a) 35%, var(--az-border));
    border-radius: var(--az-radius-full);
    background: var(--az-ia-soft);
    color: var(--az-text-2);
    font-size: var(--az-text-sm);
}

.azhum-lumen-attach-chip svg { width: 12px; height: 12px; flex: none; color: var(--az-ia-a); }

.azhum-lumen-attach-chip .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
    font-weight: 600;
}

.azhum-lumen-attach-chip .facts { color: var(--az-text-muted); white-space: nowrap; }

.azhum-lumen-attach-chip .remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--az-text-faint);
    border-radius: 50%;
    cursor: pointer;
    flex: none;
}

.azhum-lumen-attach-chip .remove:hover { color: var(--az-red); }

.azhum-lumen-attach-chip .remove svg { width: 10px; height: 10px; color: inherit; }

.azhum-lumen-attach-chip--busy .spin {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid color-mix(in oklab, var(--az-ia-a) 28%, transparent);
    border-top-color: var(--az-ia-a);
    animation: azhum-lumen-spin .8s linear infinite;
}

.azhum-lumen-attach-error {
    font-size: var(--az-text-sm);
    color: var(--az-red);
}

/* Chip del documento en la burbuja del usuario */
.azhum-lumen-user-doc { display: inline-flex; align-items: center; gap: 5px; }

.azhum-lumen-user-doc svg { width: 11px; height: 11px; }

/* ═══ F5c · Bloque de investigación web (Referencia externa + fuentes) ═══ */
.azhum-ia-web { border-left: 3px solid var(--az-cyan); }

.azhum-lumen-web-globe {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--az-cyan);
    flex: none;
}

.azhum-lumen-web-globe svg { width: 100%; height: 100%; }

.azhum-lumen-web-digest { margin-top: 6px; }

.azhum-lumen-web-sources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--az-border-subtle);
}

.azhum-lumen-web-sources .k {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--az-text-faint);
}

.azhum-lumen-web-sources a {
    display: inline-flex;
    align-items: center;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 9px;
    border: 1px solid var(--az-border);
    border-radius: var(--az-radius-full);
    background: var(--az-surface-2);
    color: var(--az-text-2);
    font-size: var(--az-text-sm);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

.azhum-lumen-web-sources a:hover { border-color: var(--az-cyan); color: var(--az-text); }

/* V5 · chip de CALIDAD de la fuente web (oficial / profesional / sin verificar). */
.azhum-lumen-web-cat {
    display: inline-block;
    margin-right: 5px;
    padding: 0 5px;
    border-radius: var(--az-radius-sm, 4px);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: 1px;
}

.azhum-lumen-web-cat--oficial { background: color-mix(in oklch, var(--az-green) 22%, transparent); color: var(--az-green); }
.azhum-lumen-web-cat--profesional { background: color-mix(in oklch, var(--az-cyan) 20%, transparent); color: var(--az-cyan); }
.azhum-lumen-web-cat--noverif { background: color-mix(in oklch, var(--az-amber) 22%, transparent); color: var(--az-amber); }

/* V5 · nota de privacidad/retención bajo el compositor (transparencia discreta). */
.azhum-lumen-privacy {
    margin: 10px 2px 0;
    font-size: 12px;
    color: var(--az-text-faint);
    cursor: help;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ═══ V2 · Árbol de evidencia del turno (procedencia de dos ejes) ═══ */
.azhum-lumen-evtree { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }

.azhum-lumen-evgroup { display: flex; flex-direction: column; gap: 4px; }

.azhum-lumen-evgroup .evgroup-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--az-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 8px;
    border-left: 3px solid var(--az-border);
}

.azhum-lumen-evgroup--internas .evgroup-head { border-left-color: var(--az-green); }
.azhum-lumen-evgroup--contexto .evgroup-head { border-left-color: var(--az-cyan); }
.azhum-lumen-evgroup--externas .evgroup-head { border-left-color: var(--az-blue); }
.azhum-lumen-evgroup--calculos .evgroup-head { border-left-color: var(--az-violet); }
.azhum-lumen-evgroup--limitaciones .evgroup-head { border-left-color: var(--az-amber); }

.azhum-lumen-evgroup .evgroup-head .n {
    font-size: 10px;
    color: var(--az-text-faint);
    background: var(--az-surface-2);
    border-radius: var(--az-radius-full);
    padding: 0 6px;
}

.azhum-lumen-evgroup .evnode {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
    padding: 6px 10px;
    margin-left: 8px;
    border: 1px solid var(--az-border-subtle);
    border-radius: var(--az-radius-md);
    background: var(--az-surface);
    color: var(--az-text-2);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

.azhum-lumen-evgroup .evnode:hover,
.azhum-lumen-evgroup .evnode:focus-visible { border-color: var(--az-ia-a); outline: none; }

.azhum-lumen-evgroup .evnode.selected { border-color: var(--az-ia-a); box-shadow: 0 0 0 1px var(--az-ia-a) inset; }

.azhum-lumen-evgroup .evnode--lim { opacity: .8; }

.azhum-lumen-evgroup .evnode-prov {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--az-text-faint);
}

.azhum-lumen-evgroup .evnode-label {
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--az-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ═══ V3 · Libertad analítica tipada: estimación · escenario · conflicto ═══ */

/* Estimación / proyección: borde violeta (familia «razonamiento»), banda visible. */
.azhum-ia-estimation { border-left: 3px solid var(--az-violet); }

.azhum-lumen-est-central {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-top: 8px;
}

.azhum-lumen-est-value {
    font-family: var(--az-font-mono, ui-monospace, monospace);
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums slashed-zero;
    color: var(--az-text);
}

.azhum-lumen-est-range {
    font-size: var(--az-text-sm);
    color: var(--az-text-muted);
    font-variant-numeric: tabular-nums;
}

.azhum-lumen-est-basis,
.azhum-lumen-est-invalidator {
    margin-top: 6px;
    font-size: var(--az-text-sm);
    color: var(--az-text-faint);
}

.azhum-lumen-est-invalidator { font-style: italic; }

.azhum-lumen-assumptions { margin-top: 10px; }

.azhum-lumen-assumptions .k {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--az-text-faint);
    margin-bottom: 4px;
}

.azhum-lumen-assumptions ul {
    margin: 0;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.azhum-lumen-assumptions li {
    font-size: 13px;
    line-height: 1.4;
    color: var(--az-text-2);
}

.azhum-lumen-assum-src { color: var(--az-text-faint); font-size: 12px; }

/* Escenario: variantes comparadas en columnas. */
.azhum-ia-scenario { border-left: 3px solid var(--az-violet); }

.azhum-lumen-scn-metric {
    margin-top: 4px;
    font-size: var(--az-text-sm);
    color: var(--az-text-muted);
}

.azhum-lumen-scn-variants {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.azhum-lumen-scn-variant {
    border: 1px solid var(--az-border-subtle);
    border-radius: var(--az-radius-md);
    background: var(--az-surface-2);
    padding: 10px 12px;
}

.azhum-lumen-scn-vhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.azhum-lumen-scn-vname { font-weight: 600; font-size: 13.5px; color: var(--az-text); }

.azhum-lumen-scn-vvalue {
    font-family: var(--az-font-mono, ui-monospace, monospace);
    font-weight: 700;
    font-variant-numeric: tabular-nums slashed-zero;
    color: var(--az-text);
}

.azhum-lumen-scn-vrange {
    margin-top: 2px;
    font-size: 12px;
    color: var(--az-text-muted);
    font-variant-numeric: tabular-nums;
}

.azhum-lumen-scn-vassum {
    margin: 8px 0 0;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.azhum-lumen-scn-vassum li { font-size: 12px; line-height: 1.35; color: var(--az-text-2); }

/* Conflicto: dos lados enfrentados, acento rojo. */
.azhum-ia-conflict { border-left: 3px solid var(--az-red); }

.azhum-lumen-conflict-pair {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 10px;
}

.azhum-lumen-conflict-side {
    flex: 1 1 0;
    border: 1px solid var(--az-border-subtle);
    border-radius: var(--az-radius-md);
    background: var(--az-surface-2);
    padding: 10px 12px;
}

.azhum-lumen-conflict-claim { font-size: 13.5px; line-height: 1.4; color: var(--az-text); }

.azhum-lumen-conflict-src {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--az-text-faint);
}

.azhum-lumen-conflict-vs {
    align-self: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--az-red);
    flex: none;
}

.azhum-lumen-conflict-res {
    margin-top: 10px;
    font-size: var(--az-text-sm);
    color: var(--az-text-2);
}

.azhum-lumen-conflict-open { color: var(--az-text-faint); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════
   Lumen · LAYOUT CONVERSACIONAL FRONTIER  (feedback founder · def.)
   Reemplaza el aspecto «burbujas de call-center» del TelerikChat nativo por
   la experiencia de un modelo frontera: una columna central legible, las
   respuestas de Lumen a ANCHO COMPLETO sin caja, y las preguntas del usuario
   en una burbuja sutil a la derecha. La identidad gráfica (tokens --az-*) se
   conserva; lo que cambia es la ESTRUCTURA (sin contenedores rígidos, sin el
   hueco central que separaba pregunta y respuesta).
   ═══════════════════════════════════════════════════════════════════════ */

/* Shell del chat: transparente, sin borde ni fondo propios */
.azhum-lumen-chat.k-chat {
    background: transparent;
    border: none;
    font-family: inherit;
    color: var(--az-text-2);
    /* El chat LLENA el canvas (Height="100%" en el componente): la lista de mensajes
       crece con flex y el composer nativo queda ANCLADO AL FONDO del viewport, en vez
       de flotar arriba dejando hueco muerto (feedback founder). El canvas necesita
       min-height:0 para que el hijo flexible pueda encogerse en vez de desbordar. */
    flex: 1 1 auto;
    min-height: 0;
}

.azhum-lumen-canvas--chat { min-height: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   Lumen · VIEWPORT-LOCK del chat (feedback founder: «el composer debe estar
   SIEMPRE fijo abajo, como los Frontier models»).
   PROBLEMA raíz: sin esto, `.azhum-content` (min-height:100%) CRECE con el
   contenido de la conversación → el chat entero (mensajes + composer) mide
   miles de px y quien scrollea es `.k-drawer-content` (toda la página), así
   que el composer viaja con el scroll y NO queda fijo.
   FIX: en /lumen se bloquea la altura de la página al viewport → la LISTA de
   mensajes scrollea POR DENTRO (overflow propio) y el composer queda anclado
   al fondo. Se usa flex-column en `.azhum-content` para convivir con la barra
   de impersonación («Ver como») si está presente. Scoping por `:has(> .azhum-lumen)`
   → solo afecta a la página de Lumen; el resto de páginas siguen creciendo y
   scrolleando en el drawer como siempre. */
.azhum-content:has(> .azhum-lumen) {
    padding: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.azhum-content:has(> .azhum-lumen) > .azhum-lumen {
    margin: 0;               /* el full-bleed ya lo da el padding:0 del content */
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: hidden;
}
/* La lista de mensajes DEBE poder encogerse (min-height:0) para que su
   overflow:auto propio entre en juego; con min-height:auto (default) crecía a
   la altura del contenido y arrastraba el composer fuera del viewport. */
/* FASE 2 · scroll-behavior:auto — el follow-scroll fija scrollTop por frame; con el
   'smooth' del tema Kendo eso gomearía (rubber-banding). Salto instantáneo. */
/* F1 · overflow-anchor:none → el módulo azhumLumen es el ÚNICO dueño del anclaje; el scroll-anchoring
   nativo del navegador (default auto) ajusta scrollTop por su cuenta y la política de dirección lo leería
   como un gesto. scroll-behavior:auto: el follow fija scrollTop por frame; el 'smooth' del tema gomearía. */
.azhum-lumen-chat .k-message-list { min-height: 0; scroll-behavior: auto; overflow-anchor: none; }

/* La lista de mensajes vive en una COLUMNA CENTRADA legible */
.azhum-lumen-chat .k-message-list-content {
    max-width: 860px;
    width: 100%;
    margin-inline: auto;
    padding-inline: 12px;
    /* feedback founder: margen final SIEMPRE bajo el último bloque → el texto recién generado no queda
       pegado/encima del composer. Entra en scrollHeight, así el pin al fondo lo respeta. */
    padding-bottom: 44px;
}

/* Cada grupo ocupa TODO el ancho de la columna (antes ~60% → hueco central) */
.azhum-lumen-chat .k-message-group,
.azhum-lumen-chat .k-message-group-content {
    max-width: 100%;
    width: 100%;
}
.azhum-lumen-chat .k-message-group { margin-block: 14px; }

/* ── RESPUESTA de Lumen (receiver): ancho completo, SIN burbuja ── */
.azhum-lumen-chat .k-message-group-receiver .k-chat-bubble,
.azhum-lumen-chat .k-message-group-receiver .k-bubble,
.azhum-lumen-chat .k-message-group-receiver .k-bubble-content {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    color: var(--az-text-2);
}
.azhum-lumen-chat .k-message-group-receiver { align-items: stretch; }

/* ── PREGUNTA del usuario (sender): burbuja SUTIL a la derecha, dentro de la columna ── */
.azhum-lumen-chat .k-message-group-sender { align-items: flex-end; }
.azhum-lumen-chat .k-message-group-sender .k-chat-bubble,
.azhum-lumen-chat .k-message-group-sender .k-bubble {
    background: var(--az-surface-2) !important;
    border: 1px solid var(--az-border-subtle) !important;
    color: var(--az-text) !important;
    border-radius: 18px !important;
    padding: 11px 17px !important;
    /* Feedback founder · las preguntas largas quedaban COMPRIMIDAS en una burbuja estrecha
       (aspecto poco profesional): más ancho disponible antes de envolver. */
    max-width: 86% !important;
    width: fit-content !important;
    box-shadow: none !important;
}
.azhum-lumen-chat .k-message-group-sender .k-bubble-content {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: var(--az-text) !important;
    font-size: 14.5px;
    line-height: 1.55;
}

/* Autor / hora: discretos (Lumen no necesita cabecera de caja) */
.azhum-lumen-chat .k-message-author { color: var(--az-text-faint); font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.azhum-lumen-chat .k-message-time,
.azhum-lumen-chat .k-timestamp { color: var(--az-text-faint); font-size: 11px; }
/* La hora del usuario dentro de su burbuja sobra: se oculta para limpieza */
.azhum-lumen-chat .k-message-group-sender .k-message-time,
.azhum-lumen-chat .k-message-group-sender .k-message-author { display: none; }

/* Composer NATIVO centrado a la misma columna que la conversación */
.azhum-lumen-chat .k-message-box-wrapper {
    max-width: 860px;
    margin-inline: auto;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
   Lumen · PULIDO de bloques (feedback founder def.): cards que ajustan al
   contenido, tablas con padding correcto + cabecera, la traza «cómo se
   calculó» estilada (antes pegaba al borde), y el gráfico mejor encajado.
   ═══════════════════════════════════════════════════════════════════════ */

/* KPI cards: se ajustan al CONTENIDO (no estiran a todo el ancho). F5 · minmax alineado con la
   regla base (170–230) — antes 150–210 la pisaba (más específica) y las tarjetas quedaban estrechas
   para la nueva jerarquía título+valor+meta. */
.azhum-lumen .azhum-lumen-kpis {
    grid-template-columns: repeat(auto-fit, minmax(170px, 230px));
    justify-content: start;
}

/* Tablas de análisis y de markdown: scroll propio + padding a AMBOS lados */
.azhum-lumen .azhum-ia-analysis__scroll { position: relative; overflow-x: auto; margin: 10px 0 2px; }
/* Feedback founder · una tabla markdown dentro de la PROSA necesita AIRE arriba y abajo
   (quedaba pegada al texto). Mayor especificidad + posterior → gana al __scroll de arriba. */
.azhum-lumen .azhum-ia-narrative .azhum-md-table,
.azhum-lumen .azhum-lumen-conclusion .azhum-md-table { margin: 16px 0; }
/* Feedback founder · la tabla markdown de la prosa se AJUSTA a su contenido (no estirada a todo el
   ancho, que dispersaba las columnas); la primera columna (texto) envuelve, las numéricas nowrap. */
.azhum-lumen .azhum-md-table > .azhum-ia-analysis__table { width: auto; max-width: 100%; }
.azhum-lumen .azhum-md-table td:first-child { max-width: 300px; white-space: normal; overflow-wrap: anywhere; }
/* FASE 1.4 · nota honesta cuando un análisis (rehidratado) no tiene filas — nunca tabla vacía. */
.azhum-lumen .azhum-ia-analysis__empty { color: var(--az-text-muted); font-size: 13px; padding: 8px 0 2px; }
/* FASE 4B · recuento de filas mostradas (V4) */
.azhum-lumen .azhum-ia-analysis__count { display: block; font-size: 11.5px; color: var(--az-text-faint); margin: 6px 0 0 2px; }
.azhum-lumen .azhum-ia-analysis__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
/* FASE 4B · celdas compactas (V1b): más columnas visibles en el mismo ancho. */
.azhum-lumen .azhum-ia-analysis__table th,
.azhum-lumen .azhum-ia-analysis__table td { padding: 6px 10px; text-align: left; white-space: nowrap; }
.azhum-lumen .azhum-ia-analysis__table th {
    font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
    color: var(--az-text-muted); border-bottom: 1px solid var(--az-border);
}
.azhum-lumen .azhum-ia-analysis__table td { border-bottom: 1px solid var(--az-border-subtle); }
.azhum-lumen .azhum-ia-analysis__table tr:last-child td { border-bottom: 0; }
.azhum-lumen .azhum-ia-analysis__table td.num,
.azhum-lumen .azhum-ia-analysis__table th.num,
.azhum-lumen .azhum-ia-analysis__table .azhum-num-mono { text-align: right; font-variant-numeric: tabular-nums slashed-zero; }
/* FASE 4B · la primera columna (entidad) se ENVUELVE a 2 líneas y queda STICKY al hacer scroll
   horizontal — el usuario nunca pierde de vista a qué fila pertenece cada número. */
.azhum-lumen .azhum-ia-analysis__table td:first-child { white-space: normal; max-width: 260px; line-height: 1.35; }
.azhum-lumen .azhum-ia-analysis__table th:first-child,
.azhum-lumen .azhum-ia-analysis__table td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--az-surface);
}
/* Degradado en el borde derecho cuando la tabla está cortada (JS marca .is-cut). */
.azhum-lumen .azhum-ia-analysis__scroll.is-cut::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 26px; pointer-events: none;
    background: linear-gradient(to left, var(--az-surface), transparent);
}

/* Traza · cómo se calculó — el <details> no tenía CSS (pegaba al borde) */
.azhum-lumen .azhum-lineage { margin: 12px 0 2px; }
.azhum-lumen .azhum-lineage > summary {
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 2px; font-size: 12px; color: var(--az-text-faint);
    list-style: none; user-select: none;
}
.azhum-lumen .azhum-lineage > summary::-webkit-details-marker { display: none; }
.azhum-lumen .azhum-lineage > summary::before { content: "\25B8"; font-size: 10px; transition: transform .15s ease; }
.azhum-lumen .azhum-lineage[open] > summary::before { transform: rotate(90deg); }
.azhum-lumen .azhum-lineage > summary:hover { color: var(--az-text-2); }
.azhum-lumen .azhum-lineage__body {
    margin-top: 6px; padding: 10px 14px; background: var(--az-surface-2);
    border-radius: var(--az-radius-md); font-size: 12.5px; line-height: 1.55;
    color: var(--az-text-2); overflow-wrap: anywhere;
}

/* Gráfico mejor encajado: ocupa el ancho del bloque, sin margen extra */
.azhum-lumen .azhum-ia-analysis .k-chart { width: 100% !important; margin: 4px 0; }

/* ═══════════ Lumen · fixes composer/tablas/proceso (feedback founder 2) ═══════════ */

/* Micrófono (speech-to-text) FUERA: la funcionalidad de voz aún no existe */
.azhum-lumen-chat .k-speech-to-text-button { display: none !important; }

/* Tablas: NO estirar a todo el ancho (con 1-2 columnas se veían fatal); ajustar al contenido */
.azhum-lumen .azhum-ia-analysis__table { width: auto; max-width: 100%; }

/* Composer NUNCA desborda el viewport + centrado a la columna de lectura */
.azhum-lumen-canvas--chat { min-width: 0; }
.azhum-lumen-chat,
.azhum-lumen-chat .k-message-list,
.azhum-lumen-chat .k-message-box-wrapper,
.azhum-lumen-chat .k-prompt-box { max-width: 100%; box-sizing: border-box; }
.azhum-lumen-chat .k-message-box-wrapper { margin-inline: auto; padding-inline: 12px; }

/* ── Composer estilo FRONTIER: anclado al fondo del chat, con un DEGRADADO por encima que
   DIFUMINA el contenido que sube (feedback founder) — el texto se desvanece bajo el composer
   en vez de cortarse en seco y parecer que flota sobre él. Fondo sólido = tapa lo que scrollea
   detrás y = fondo de página (no una tarjeta flotante). ── */
.azhum-lumen-chat .k-message-box-wrapper {
    position: relative;
    /* Alineado a la MISMA columna de lectura que los mensajes (768px) — es el último bloque
       con este selector, así que su max-width gana al 100% de la regla de overflow de arriba. */
    max-width: 860px;
    margin-inline: auto;
    background: var(--az-bg);
    padding-top: 6px;
    padding-bottom: 10px;
}
.azhum-lumen-chat .k-message-box-wrapper::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -54px;
    height: 54px;
    background: linear-gradient(to bottom, transparent, var(--az-bg));
    pointer-events: none;
    z-index: 4;
}

/* ── Botón de acción en modo DETENER (mientras Lumen investiga): el MISMO botón de
   enviar del composer cambia su símbolo a un cuadrado de "stop"; al pulsarlo, el JS
   cancela el turno (StopFromJs) y el botón vuelve a la flecha de enviar al terminar.
   Lenguaje visual del acento IA de Lumen (--az-ia-grad), como el composer heredado. ── */
/* Self-contained y a prueba de balas: NO depende de `.k-message-box-wrapper` (que Telerik puede
   reestructurar) ni de `currentColor`; gana a los estilos disabled/default de Telerik con !important.
   El «punto azul» que se veía era la flecha nativa sin ocultar + sin degradado; esto lo cierra. */
.azhum-lumen-chat button.azhum-lumen-stop-btn.k-button,
.azhum-lumen-chat button.azhum-lumen-stop-btn.k-button.k-disabled {
    cursor: pointer !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    color: #fff !important;
    background: var(--az-ia-grad) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px var(--az-ia-ring);
    transition: filter var(--az-transition-fast);
}
.azhum-lumen-chat button.azhum-lumen-stop-btn.k-button:hover { filter: brightness(1.06); }
.azhum-lumen-chat button.azhum-lumen-stop-btn.k-button:active { transform: translateY(1px); }
/* Oculta la flecha nativa (icono/svg) y dibuja el cuadrado BLANCO de stop en su lugar. */
.azhum-lumen-chat button.azhum-lumen-stop-btn .k-button-icon,
.azhum-lumen-chat button.azhum-lumen-stop-btn .k-icon,
.azhum-lumen-chat button.azhum-lumen-stop-btn .k-svg-icon,
.azhum-lumen-chat button.azhum-lumen-stop-btn svg { display: none !important; }
.azhum-lumen-chat button.azhum-lumen-stop-btn::after {
    content: "" !important;
    display: block !important;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: #fff !important;
}

/* Proceso de investigación ↔ respuesta: aire vertical (estaban muy pegados) */
.azhum-lumen-chat .azhum-lumen-thread { margin-bottom: 4px; }

/* Adjuntar (OCR) flotando en la esquina inferior izquierda del composer nativo */
.azhum-lumen-canvas--chat { position: relative; }
/* FASE 2 · botón "ir al final ↓": aparece si el usuario sube durante un turno en curso; al pulsarlo,
   vuelve al fondo y reengancha el seguimiento. Feedback founder: solo la FLECHA (círculo pequeño) y en la
   esquina inferior DERECHA — ya no una píldora ancha centrada que pisaba el label «Lumen». */
.azhum-lumen-scroll-pill {
    position: absolute;
    bottom: 96px;
    left: 50%;
    transform: translateX(-50%);   /* feedback founder: CENTRADA (no al lado) y más pequeña */
    z-index: 12;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--az-border);
    background: var(--az-surface);
    color: var(--az-text);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    box-shadow: var(--az-elev-2);
    cursor: pointer;
}
.azhum-lumen-scroll-pill:hover { transform: translateX(-50%) scale(1.06); }
.azhum-lumen-scroll-pill:hover { border-color: var(--az-ia-a); color: var(--az-ia-a); }
.azhum-lumen-chat-attach {
    position: absolute;
    bottom: 46px;
    left: max(24px, calc(50% - 360px));
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(70%, 560px);
}
.azhum-lumen-chat-attach .azhum-lumen-attach {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    color: var(--az-text-faint); cursor: pointer;
    transition: color .15s, background .15s;
    position: relative;
}
.azhum-lumen-chat-attach .azhum-lumen-attach:hover { color: var(--az-text-2); background: var(--az-surface-2); }
.azhum-lumen-chat-attach .azhum-lumen-attach svg { width: 18px; height: 18px; }
.azhum-lumen-chat-attach .azhum-lumen-attach input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ═══════════ Lumen · shell reorganizado (feedback founder 3) ═══════════ */

/* Bienvenida CENTRADA en el chat (solo hasta la 1ª pregunta) */
.azhum-lumen-welcome-center {
    position: absolute;
    top: 42%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 6px; z-index: 2; pointer-events: none; width: min(90%, 560px);
}
.azhum-lumen-welcome-center .azhum-lumen-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin-bottom: 6px; color: var(--az-ia-a, var(--az-cyan));
}
.azhum-lumen-welcome-center .azhum-lumen-mark svg { width: 30px; height: 30px; }
.azhum-lumen-welcome-center h1 {
    font-family: var(--az-font-display, inherit); font-size: 26px; font-weight: 600;
    color: var(--az-text); margin: 0; letter-spacing: -0.01em;
}
.azhum-lumen-welcome-center p { font-size: 15px; color: var(--az-text-muted); margin: 0; line-height: 1.5; }

/* Estado del adjunto extraído bajo el composer (chip/lectura/error) — centrado a la columna */
.azhum-lumen-chat-attach-status {
    max-width: 860px; margin: 2px auto 0; padding-inline: 16px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* El botón de adjuntar NATIVO de Telerik hereda el tono discreto del composer */
.azhum-lumen-chat .k-chat-toolbar-button,
.azhum-lumen-chat .k-file-select-button,
.azhum-lumen-chat .k-upload-button { color: var(--az-text-faint); }

/* ── REVISOR · tarjeta de clarificación (preguntar antes de adivinar) ─────────
   Lumen devuelve 1..10 preguntas con opciones; los chips envían la elección como
   el siguiente mensaje. Self-contained (no depende del chrome de Telerik). */
.azhum-lumen-clarify {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--az-border, rgba(148, 163, 184, .25));
    border-left: 3px solid var(--az-accent, #6ea8fe);
    border-radius: 12px;
    background: var(--az-surface-2, rgba(110, 168, 254, .06));
}
.azhum-lumen-clarify__head {
    font-size: .82rem; font-weight: 600; letter-spacing: .02em;
    color: var(--az-text-faint, #9aa4b2);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.azhum-lumen-clarify__q { margin: 10px 0 4px; }
.azhum-lumen-clarify__text { font-weight: 600; margin-bottom: 8px; }
.azhum-lumen-clarify__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.azhum-lumen-clarify__opt {
    appearance: none; cursor: pointer;
    font: inherit; font-size: .9rem;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--az-border, rgba(148, 163, 184, .35));
    background: transparent;
    color: var(--az-text, inherit);
    transition: border-color .15s ease, background .15s ease;
}
.azhum-lumen-clarify__opt:hover { border-color: var(--az-accent, #6ea8fe); }
.azhum-lumen-clarify__opt:focus-visible { outline: 2px solid var(--az-accent, #6ea8fe); outline-offset: 2px; }
.azhum-lumen-clarify__opt.suggested { border-style: dashed; border-color: var(--az-accent, #6ea8fe); }
.azhum-lumen-clarify__opt.selected {
    background: var(--az-accent, #6ea8fe);
    border-color: var(--az-accent, #6ea8fe);
    color: var(--az-on-accent, #0b1220);
    font-weight: 600;
}
/* Enviar en VERDE (feedback founder): contraste claro frente a los chips azules. */
.azhum-lumen-clarify__send {
    appearance: none; cursor: pointer;
    font: inherit; font-size: .9rem; font-weight: 700;
    margin-top: 12px; padding: 8px 20px;
    border-radius: 8px;
    border: 1px solid #1f9d61;
    background: #1f9d61;
    color: #ffffff;
    transition: background .15s ease;
}
.azhum-lumen-clarify__send:hover:not(:disabled) { background: #178a52; border-color: #178a52; }
.azhum-lumen-clarify__send:focus-visible { outline: 2px solid #1f9d61; outline-offset: 2px; }
.azhum-lumen-clarify__send:disabled { background: var(--az-surface-3); border-color: var(--az-border-strong); color: var(--az-text-faint); cursor: not-allowed; }
/* «Otro…» seleccionado → campo de texto libre (feedback founder). */
.azhum-lumen-clarify__other {
    display: block; width: min(480px, 100%);
    margin-top: 8px; padding: 8px 12px;
    font: inherit; font-size: .9rem;
    border-radius: 8px;
    border: 1px solid var(--az-border, rgba(148, 163, 184, .35));
    background: var(--az-surface, transparent);
    color: var(--az-text, inherit);
}
.azhum-lumen-clarify__other:focus-visible { outline: 2px solid var(--az-accent, #6ea8fe); outline-offset: 1px; }
.azhum-lumen-clarify__free, .azhum-lumen-clarify__hint {
    font-size: .82rem; color: var(--az-text-faint, #9aa4b2); margin-top: 8px;
}