/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-x1kre1fc35] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-x1kre1fc35] {
    flex: 1;
}

.sidebar[b-x1kre1fc35] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-x1kre1fc35] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-x1kre1fc35]  a, .top-row[b-x1kre1fc35]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-x1kre1fc35]  a:hover, .top-row[b-x1kre1fc35]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-x1kre1fc35]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

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

    .top-row[b-x1kre1fc35]  a, .top-row[b-x1kre1fc35]  .btn-link {
        margin-left: 0;
    }
}

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

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

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

    .top-row.auth[b-x1kre1fc35]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-x1kre1fc35], article[b-x1kre1fc35] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-45dhc4uejo] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-45dhc4uejo] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-45dhc4uejo] {
    font-size: 1.1rem;
}

.bi[b-45dhc4uejo] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

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

.bi-plus-square-fill-nav-menu[b-45dhc4uejo] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-45dhc4uejo] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-45dhc4uejo] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-45dhc4uejo] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-45dhc4uejo] {
        padding-bottom: 1rem;
    }

    .nav-item[b-45dhc4uejo]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-45dhc4uejo]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-45dhc4uejo]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

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

    .collapse[b-45dhc4uejo] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-45dhc4uejo] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Operacion/DbManager/Migracion/MigracionWizard.razor.rz.scp.css */
/* Monitor de migración (paso 5): paneles de pestañas al 100% del área, con scroll propio. */

.mig-panel[b-vljs1agfjr] {
    width: 100%;
    height: 48vh;
    min-height: 260px;
    overflow-y: auto;
    padding: 0.75rem;
}

/* Consola de mensajes: terminal monoespaciada oscura que crece hacia abajo (auto-scroll al final). */
.mig-console[b-vljs1agfjr] {
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.78rem;
    line-height: 1.4;
    background: #0b1020;
    color: #cbd5e1;
    /* NO usar pre-wrap: preservaría los saltos/sangrías del markup Razor y descuadraría cada renglón
       (timestamp y mensaje en líneas separadas). Con normal + overflow-wrap queda compacto y envuelve
       los mensajes largos. */
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Cada entrada de log en UN solo renglón (timestamp + mensaje); colapsa el whitespace del markup. */
.mig-console > div[b-vljs1agfjr] {
    padding: 1px 0;
}

.mig-console-ts[b-vljs1agfjr] {
    opacity: 0.55;
    margin-right: 0.4rem;
    white-space: nowrap;
}

/* Las pestañas del header pegadas al borde del card. */
.mig-monitor .nav-tabs .nav-link[b-vljs1agfjr] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    cursor: pointer;
}
/* /Pages/TwinOfficers/Dashboard/TwinOfficerGlobal.razor.rz.scp.css */
/*  Wero MX - TwinOfficers · F5
    Estilos (scoped) de la VISTA GLOBAL del dashboard de orquestacion. Todo por variables .px-skin
    (dark/light) — SIN hex crudo: el color de marca del cliente entra por la variable inline --to-cliente.
    Grid de salas (izquierda) + panel de actividad (derecha). Dot de estado pulsante verde/rojo/gris. */

.to-dash[b-t9a3ian7un] { display: flex; flex-direction: column; gap: 1rem; }

/* Indicador "en vivo" en el header. */
.to-live[b-t9a3ian7un] { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--text-muted); }
.to-live-dot[b-t9a3ian7un] { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.to-live-dot.on[b-t9a3ian7un] { background: var(--success-light); box-shadow: 0 0 0 0 var(--success-soft); animation: toBeat-b-t9a3ian7un 1.8s ease-out infinite; }
.to-live-dot.off[b-t9a3ian7un] { background: var(--danger-light); }
.to-live-count[b-t9a3ian7un] { color: var(--text-secondary); font-weight: 600; }
.to-live-sep[b-t9a3ian7un] { opacity: .5; }

/* Layout de 2 columnas (grid + panel). En movil se apila. */
.to-layout[b-t9a3ian7un] { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .to-layout[b-t9a3ian7un] { grid-template-columns: 1fr; } }

.to-loading[b-t9a3ian7un] { display: flex; align-items: center; gap: .6rem; color: var(--text-muted); padding: .5rem; }

/* ═══════════ GRID DE SALAS ═══════════ */
.to-grid[b-t9a3ian7un] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }

/* La tarjeta clickable (dentro del DsCard denso). */
.to-sala-inner[b-t9a3ian7un] {
    display: flex; flex-direction: column; gap: .7rem; padding: 1rem;
    cursor: pointer; border-radius: var(--radius-lg, 12px);
    border-left: 3px solid transparent; transition: background .15s ease, transform .12s ease, border-color .15s ease;
}
.to-sala-inner:hover[b-t9a3ian7un] { background: var(--bg-hover); transform: translateY(-2px); }
.to-sala-inner:focus-visible[b-t9a3ian7un] { outline: 2px solid var(--primary); outline-offset: 2px; }
.to-sala-inner.has-activity[b-t9a3ian7un] { border-left-color: var(--success-light); }

.to-sala-head[b-t9a3ian7un] { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.to-sala-titles[b-t9a3ian7un] { display: flex; flex-direction: column; min-width: 0; }
.to-sala-nombre[b-t9a3ian7un] { font-weight: 700; color: var(--text-primary); font-size: .98rem; line-height: 1.2; }
.to-sala-cliente[b-t9a3ian7un] { font-size: .74rem; color: var(--text-muted); }

.to-sala-badges[b-t9a3ian7un] { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.to-chip-activos[b-t9a3ian7un] {
    font-size: .66rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px;
    background: var(--success-soft); color: var(--success);
}
.to-chip-cliente[b-t9a3ian7un] {
    font-size: .64rem; font-weight: 700; padding: .14rem .5rem; border-radius: 999px;
    background: color-mix(in srgb, var(--to-cliente) 22%, transparent);
    color: var(--to-cliente); border: 1px solid color-mix(in srgb, var(--to-cliente) 45%, transparent);
    text-transform: uppercase; letter-spacing: .02em;
}

/* Agentes con avatar + nombre + dot pulsante. */
.to-agentes[b-t9a3ian7un] { display: flex; flex-direction: column; gap: .35rem; }
.to-agentes-empty[b-t9a3ian7un] { font-size: .76rem; color: var(--text-muted); font-style: italic; }
.to-agente[b-t9a3ian7un] { display: flex; align-items: center; gap: .5rem; }
.to-avatar[b-t9a3ian7un] {
    width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
}
.to-avatar.lider[b-t9a3ian7un] { background: linear-gradient(135deg, var(--warning), var(--warning-light)); }
.to-agente-nombre[b-t9a3ian7un] { flex: 1; min-width: 0; font-size: .82rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Dot de estado pulsante (verde=activo / rojo=warning / gris=idle). */
.to-dot[b-t9a3ian7un] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.to-dot.on[b-t9a3ian7un] { background: var(--success-light); animation: toBeat-b-t9a3ian7un 1.6s ease-out infinite; }
.to-dot.warn[b-t9a3ian7un] { background: var(--danger-light); animation: toBeat-b-t9a3ian7un 1.6s ease-out infinite; }
.to-dot.idle[b-t9a3ian7un] { background: var(--text-muted); opacity: .55; }

.to-sala-foot[b-t9a3ian7un] { display: flex; align-items: center; gap: .7rem; padding-top: .5rem; border-top: 1px solid var(--border-color); font-size: .72rem; color: var(--text-muted); }
.to-sala-metric[b-t9a3ian7un] { display: inline-flex; align-items: center; gap: .25rem; }
.to-sala-metric i[b-t9a3ian7un] { opacity: .7; }
.to-sala-go[b-t9a3ian7un] { margin-left: auto; color: var(--primary); font-weight: 600; white-space: nowrap; }

/* ═══════════ PANEL DE ACTIVIDAD ═══════════ */
.to-actividad[b-t9a3ian7un] {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 12px);
    padding: .9rem; position: sticky; top: 0; max-height: calc(100vh - 160px); overflow: auto;
}
.to-actividad-title[b-t9a3ian7un] { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .82rem; color: var(--text-primary); margin-bottom: .7rem; }
.to-actividad-title i[b-t9a3ian7un] { color: var(--primary); }
.to-actividad-empty[b-t9a3ian7un] { font-size: .8rem; color: var(--text-muted); font-style: italic; }
.to-actividad-lista[b-t9a3ian7un] { display: flex; flex-direction: column; gap: .55rem; }

.to-act-row[b-t9a3ian7un] { display: flex; gap: .55rem; align-items: flex-start; }
.to-act-icon[b-t9a3ian7un] { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; font-size: .72rem; background: var(--primary-soft); color: var(--primary); }
.to-act-icon.tipo-peticion[b-t9a3ian7un] { background: var(--info-soft); color: var(--info); }
.to-act-icon.tipo-invocacion[b-t9a3ian7un] { background: var(--warning-soft); color: var(--warning); }
.to-act-icon.tipo-respuesta_agente[b-t9a3ian7un] { background: var(--success-soft); color: var(--success); }
.to-act-icon.tipo-sintesis[b-t9a3ian7un] { background: var(--primary-soft); color: var(--primary); }
.to-act-icon.tipo-error[b-t9a3ian7un] { background: var(--danger-soft); color: var(--danger); }
.to-act-icon.tipo-nota_sistema[b-t9a3ian7un] { background: var(--bg-hover); color: var(--text-muted); }

.to-act-body[b-t9a3ian7un] { flex: 1; min-width: 0; }
.to-act-meta[b-t9a3ian7un] { display: flex; align-items: center; gap: .4rem; font-size: .7rem; flex-wrap: wrap; }
.to-act-sala[b-t9a3ian7un] { font-weight: 700; color: var(--text-primary); }
.to-act-autor[b-t9a3ian7un] { color: var(--text-secondary); }
.to-act-when[b-t9a3ian7un] { color: var(--text-muted); margin-left: auto; }
.to-act-texto[b-t9a3ian7un] { font-size: .76rem; color: var(--text-secondary); line-height: 1.35; margin-top: .1rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@keyframes toBeat-b-t9a3ian7un {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.35); opacity: .6; }
}
/* /Pages/TwinOfficers/Dashboard/TwinOfficerSalaDetalle.razor.rz.scp.css */
/*  Wero MX - TwinOfficers · F5
    Estilos (scoped) del DETALLE de sala (grafo de orquestacion). Todo por variables .px-skin — SIN hex
    crudo salvo los acentos por agente, que entran por --nc inline (el MISMO color que usa el grafo JS,
    GrafoOrquestacion.ColorDe) y el acento del cliente por --tod-color. Estados: activo=success,
    respondio=info, error=danger, idle=muted.

    LAYOUT 100% DEL AREA DE TRABAJO (como Dev Studio V2): la cadena ds-shell/TabDocs da el alto por flex;
    aqui .tod-root llena la pestana (height:100%), .tod-main es columna flex y CADA vista (arbol / grafos
    JS / timeline) toma flex:1 con su propio scroll. El marco visual de las vistas replica .ds-graph de
    devstudio.css (bg-header + borde + radio) para que Fuerza/Circular/Hibrido se vean IGUAL que en V2. */

.tod-root[b-dox1pfbhwz] { display: flex; flex-direction: column; gap: .8rem; height: 100%; min-height: 0; }

.tod-header[b-dox1pfbhwz] { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; flex: 0 0 auto; }
.tod-title[b-dox1pfbhwz] { margin: 0; font-size: 1.25rem; color: var(--text-primary); border-left: 3px solid var(--tod-color, var(--primary)); padding-left: .6rem; }
.tod-sub[b-dox1pfbhwz] { font-size: .76rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: .35rem; padding-left: .65rem; }
.tod-conn[b-dox1pfbhwz] { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tod-conn.on[b-dox1pfbhwz] { background: var(--success-light); }
.tod-conn.off[b-dox1pfbhwz] { background: var(--danger-light); }
.tod-close[b-dox1pfbhwz] { background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; flex: 0 0 auto; }
.tod-close:hover[b-dox1pfbhwz] { color: var(--danger); border-color: var(--danger); }

/* Grid que LLENA el resto de la pestana; ambas columnas estiran (min-height:0 para poder scrollear). */
.tod-layout[b-dox1pfbhwz] { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: stretch;
    flex: 1 1 auto; min-height: 0; }
@media (max-width: 1000px) { .tod-layout[b-dox1pfbhwz] { grid-template-columns: 1fr; } }

.tod-main[b-dox1pfbhwz] { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

/* ── Sub-tabs ── */
.tod-tabs[b-dox1pfbhwz] { display: flex; gap: .25rem; border-bottom: 1px solid var(--border-color); margin-bottom: .8rem; flex-wrap: wrap; flex: 0 0 auto; }
.tod-tab[b-dox1pfbhwz] { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-weight: 500; font-size: .84rem; padding: .5rem .75rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.tod-tab:hover[b-dox1pfbhwz] { color: var(--text-primary); background: var(--bg-hover); }
.tod-tab.active[b-dox1pfbhwz] { color: var(--text-primary); border-bottom-color: var(--tod-color, var(--primary)); font-weight: 600; }
.tod-tab-count[b-dox1pfbhwz] { font-size: .66rem; background: var(--bg-hover); color: var(--text-muted); border-radius: 999px; padding: 0 .4rem; }

.tod-empty[b-dox1pfbhwz], .tod-graph-hint[b-dox1pfbhwz] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 3rem 1rem; color: var(--text-muted); font-size: .85rem; flex: 1 1 auto; }
.tod-empty i[b-dox1pfbhwz] { font-size: 1.6rem; opacity: .6; }
.tod-graph-hint[b-dox1pfbhwz] { padding: .6rem; flex: 0 0 auto; }

/* ══════════ ARBOL (BFS por niveles) — lienzo premium a pantalla completa ══════════ */
.tod-tree[b-dox1pfbhwz] {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    display: flex; flex-direction: column; align-items: center; gap: 0; padding: 1.6rem 1rem 0.8rem;
    background:
        radial-gradient(ellipse 60% 45% at 50% 0%, color-mix(in srgb, var(--tod-color, var(--primary)) 9%, transparent), transparent 70%),
        radial-gradient(color-mix(in srgb, var(--text-muted) 16%, transparent) 1px, transparent 1px),
        var(--bg-header);
    background-size: auto, 22px 22px, auto;
    border: 1px solid var(--border-color); border-radius: var(--radius-lg, 14px);
}

/* Conector entre niveles: lineas con gradiente + chevron latiendo (sustituye la flecha plana). */
.tod-tree-arrow[b-dox1pfbhwz] { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .35rem 0; color: var(--tod-color, var(--primary)); font-size: .72rem; opacity: .9; }
.tod-tree-link[b-dox1pfbhwz] { width: 2px; height: 14px; border-radius: 2px;
    background: linear-gradient(180deg, transparent, var(--tod-color, var(--primary))); }
.tod-tree-arrow .tod-tree-link:last-child[b-dox1pfbhwz] { background: linear-gradient(180deg, var(--tod-color, var(--primary)), transparent); }
.tod-tree-arrow i[b-dox1pfbhwz] { animation: todFlow-b-dox1pfbhwz 1.8s ease-in-out infinite; }

.tod-tree-level[b-dox1pfbhwz] { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* Tarjeta de agente: glass + acento del PROPIO agente (--nc = color del grafo JS). */
.tod-node[b-dox1pfbhwz] {
    position: relative; width: 158px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: .42rem;
    padding: .9rem .6rem .7rem;
    background: color-mix(in srgb, var(--bg-card) 72%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--nc, var(--primary)) 30%, var(--border-color));
    border-radius: 16px;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--nc, var(--primary)) 10%, transparent);
    transition: transform .18s ease, box-shadow .18s ease;
}
.tod-node[b-dox1pfbhwz]::before { /* filo superior con el color del agente */
    content: ""; position: absolute; inset: 0 18% auto 18%; height: 3px; border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, transparent, var(--nc, var(--primary)), transparent);
}
.tod-node:hover[b-dox1pfbhwz] { transform: translateY(-3px); box-shadow: 0 10px 26px color-mix(in srgb, var(--nc, var(--primary)) 22%, transparent); }

/* Estados: halo/glow. Activo late; error alerta; done sereno; idle atenuado. */
.tod-node.st-active[b-dox1pfbhwz] { border-color: color-mix(in srgb, var(--success) 55%, var(--border-color)); animation: todHalo-b-dox1pfbhwz 1.8s ease-out infinite; }
.tod-node.st-error[b-dox1pfbhwz]  { border-color: color-mix(in srgb, var(--danger) 60%, var(--border-color)); box-shadow: 0 0 0 3px var(--danger-soft), 0 6px 18px color-mix(in srgb, var(--danger) 18%, transparent); }
.tod-node.st-idle[b-dox1pfbhwz]   { opacity: .72; filter: saturate(.75); }

/* Dot de estado en la esquina. */
.tod-node-status[b-dox1pfbhwz] { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); opacity: .55; }
.tod-node.st-active .tod-node-status[b-dox1pfbhwz] { background: var(--success-light); opacity: 1; animation: todPulse-b-dox1pfbhwz 1.6s ease-out infinite; }
.tod-node.st-done   .tod-node-status[b-dox1pfbhwz] { background: var(--info-light); opacity: 1; }
.tod-node.st-error  .tod-node-status[b-dox1pfbhwz] { background: var(--danger-light); opacity: 1; }

/* Avatar CHIBI (el mismo generador que Dev Studio V2) dentro de un anillo conico que gira en activo.
   El circulo recorta al chibi; el fondo tintado con el color del agente se asoma por las zonas
   transparentes del SVG, igual que en el grafo JS. */
.tod-node-avatar[b-dox1pfbhwz] { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; }
.tod-node-avatar[b-dox1pfbhwz]::before { content: ""; position: absolute; inset: -3px; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--nc, var(--primary)), transparent 55%, var(--nc, var(--primary)));
    opacity: .55; }
.tod-node.st-active .tod-node-avatar[b-dox1pfbhwz]::before { animation: todSpin-b-dox1pfbhwz 2.4s linear infinite; opacity: .95; }
.tod-node-chibi[b-dox1pfbhwz] { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%;
    overflow: hidden; display: block;
    background: radial-gradient(circle at 50% 28%,
        color-mix(in srgb, var(--nc, var(--primary)) 55%, transparent),
        color-mix(in srgb, var(--nc, var(--primary)) 88%, #000 10%));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
.tod-node-chibi[b-dox1pfbhwz]  svg { display: block; width: 100%; height: 100%; }

.tod-node-label[b-dox1pfbhwz] { font-size: .8rem; font-weight: 700; color: var(--text-primary); line-height: 1.18; }

/* Chips de metricas (modelo / tokens / costo). */
.tod-node-chips[b-dox1pfbhwz] { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
.tod-node-chip[b-dox1pfbhwz] { font-size: .6rem; font-weight: 600; border-radius: 999px; padding: .12rem .42rem;
    background: color-mix(in srgb, var(--nc, var(--primary)) 14%, transparent);
    color: var(--text-secondary); border: 1px solid color-mix(in srgb, var(--nc, var(--primary)) 22%, transparent);
    display: inline-flex; align-items: center; gap: .22rem; font-variant-numeric: tabular-nums; }
.tod-node-chip i[b-dox1pfbhwz] { font-size: .55rem; opacity: .8; }
.tod-node-chip.cost[b-dox1pfbhwz] { color: var(--success); }

.tod-node-tool[b-dox1pfbhwz] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .62rem; color: var(--warning); }

.tod-legend[b-dox1pfbhwz] { display: flex; gap: 1rem; justify-content: center; font-size: .72rem; color: var(--text-muted); padding: .8rem .5rem .3rem; flex-wrap: wrap; margin-top: auto; }
.tod-legend span[b-dox1pfbhwz] { display: inline-flex; align-items: center; gap: .3rem; }
.tod-lg[b-dox1pfbhwz] { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tod-lg.st-active[b-dox1pfbhwz] { background: var(--success-light); }
.tod-lg.st-done[b-dox1pfbhwz] { background: var(--info-light); }
.tod-lg.st-error[b-dox1pfbhwz] { background: var(--danger-light); }
.tod-lg.st-idle[b-dox1pfbhwz] { background: var(--text-muted); }

/* ══════════ GRAFO ANIMADO (JS) — mismo marco que .ds-graph de Dev Studio V2 ══════════ */
.tod-graph[b-dox1pfbhwz] { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column;
    background: var(--bg-header); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 14px); overflow: hidden; }
.tod-graph-canvas[b-dox1pfbhwz] { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; position: relative; }
.tod-graph-canvas[b-dox1pfbhwz]  svg, .tod-graph[b-dox1pfbhwz]  svg { display: block; width: 100%; height: 100%; }

/* ══════════ TIMELINE — misma altura completa con scroll propio ══════════ */
.tod-timeline[b-dox1pfbhwz] { flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: .5rem; padding: .8rem;
    background: var(--bg-header); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 14px); }
.tod-ev[b-dox1pfbhwz] { display: flex; gap: .6rem; align-items: flex-start; }
.tod-ev-icon[b-dox1pfbhwz] { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; font-size: .78rem; background: var(--primary-soft); color: var(--primary); }
.tod-ev.tipo-peticion .tod-ev-icon[b-dox1pfbhwz] { background: var(--info-soft); color: var(--info); }
.tod-ev.tipo-invocacion .tod-ev-icon[b-dox1pfbhwz] { background: var(--warning-soft); color: var(--warning); }
.tod-ev.tipo-respuesta_agente .tod-ev-icon[b-dox1pfbhwz] { background: var(--success-soft); color: var(--success); }
.tod-ev.tipo-sintesis .tod-ev-icon[b-dox1pfbhwz] { background: var(--success-soft); color: var(--success); }
.tod-ev.tipo-error .tod-ev-icon[b-dox1pfbhwz] { background: var(--danger-soft); color: var(--danger); }
.tod-ev-body[b-dox1pfbhwz] { flex: 1; min-width: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: .5rem .7rem; }
.tod-ev-head[b-dox1pfbhwz] { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tod-ev-title[b-dox1pfbhwz] { font-weight: 700; font-size: .78rem; color: var(--text-primary); }
.tod-ev-actor[b-dox1pfbhwz] { font-size: .72rem; color: var(--text-secondary); }
.tod-ev-time[b-dox1pfbhwz] { font-size: .68rem; color: var(--text-muted); margin-left: auto; }
.tod-ev-text[b-dox1pfbhwz] { font-size: .78rem; color: var(--text-secondary); line-height: 1.4; margin-top: .2rem; word-break: break-word; }
.tod-ev-meta[b-dox1pfbhwz] { display: flex; gap: .35rem; margin-top: .35rem; flex-wrap: wrap; }
.tod-chip[b-dox1pfbhwz] { font-size: .64rem; background: var(--bg-hover); color: var(--text-muted); border-radius: 999px; padding: .1rem .45rem; }

/* ── Panel derecho: estira y scrollea por si solo ── */
.tod-panel[b-dox1pfbhwz] { display: flex; flex-direction: column; gap: 1rem; min-height: 0; overflow-y: auto; }
.tod-panel-sec[b-dox1pfbhwz] { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: .8rem; flex: 0 0 auto; }
.tod-panel-title[b-dox1pfbhwz] { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .8rem; color: var(--text-primary); margin-bottom: .6rem; }
.tod-panel-title i[b-dox1pfbhwz] { color: var(--tod-color, var(--primary)); }
.tod-panel-empty[b-dox1pfbhwz] { font-size: .78rem; color: var(--text-muted); font-style: italic; }

.tod-agent-list[b-dox1pfbhwz] { display: flex; flex-direction: column; gap: .4rem; }
.tod-agent[b-dox1pfbhwz] { display: flex; align-items: center; gap: .5rem; padding: .35rem; border-radius: 8px; }
.tod-agent.st-active[b-dox1pfbhwz] { background: var(--success-soft); }
.tod-agent.st-error[b-dox1pfbhwz] { background: var(--danger-soft); }
.tod-agent-avatar[b-dox1pfbhwz] { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle at 50% 28%,
        color-mix(in srgb, var(--nc, var(--primary)) 55%, transparent),
        color-mix(in srgb, var(--nc, var(--primary)) 88%, #000 10%));
    border: 1.5px solid color-mix(in srgb, var(--nc, var(--primary)) 55%, transparent); }
.tod-agent-avatar[b-dox1pfbhwz]  svg { display: block; width: 100%; height: 100%; }
.tod-agent-info[b-dox1pfbhwz] { flex: 1; min-width: 0; }
.tod-agent-name[b-dox1pfbhwz] { font-size: .8rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tod-agent-metrics[b-dox1pfbhwz] { display: flex; gap: .4rem; font-size: .66rem; color: var(--text-muted); }
.tod-agent-dot[b-dox1pfbhwz] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.tod-agent-dot.st-active[b-dox1pfbhwz] { background: var(--success-light); animation: todPulse-b-dox1pfbhwz 1.6s ease-out infinite; }
.tod-agent-dot.st-done[b-dox1pfbhwz] { background: var(--info-light); }
.tod-agent-dot.st-error[b-dox1pfbhwz] { background: var(--danger-light); }
.tod-agent-dot.st-idle[b-dox1pfbhwz] { background: var(--text-muted); opacity: .55; }

.tod-summary[b-dox1pfbhwz] { display: flex; flex-direction: column; gap: .3rem; }
.tod-sum-row[b-dox1pfbhwz] { display: flex; justify-content: space-between; font-size: .76rem; color: var(--text-secondary); padding: .2rem 0; border-bottom: 1px solid var(--border-color); }
.tod-sum-row span:last-child[b-dox1pfbhwz] { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

@keyframes todPulse-b-dox1pfbhwz { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: .65; } }
@keyframes todHalo-b-dox1pfbhwz {
    0%, 100% { box-shadow: 0 0 0 0 var(--success-soft), 0 6px 18px color-mix(in srgb, var(--success) 14%, transparent); }
    50%      { box-shadow: 0 0 0 6px transparent,      0 6px 22px color-mix(in srgb, var(--success) 26%, transparent); }
}
@keyframes todSpin-b-dox1pfbhwz { to { transform: rotate(360deg); } }
@keyframes todFlow-b-dox1pfbhwz { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(4px); opacity: .5; } }

/* ══════════ FOCO DE TRABAJO en el arbol: el que TRABAJA se remarca fuerte ══════════ */
.tod-node.st-active[b-dox1pfbhwz] {
    transform: scale(1.06); z-index: 2;
    border-width: 2px;
    background: color-mix(in srgb, var(--success) 10%, color-mix(in srgb, var(--bg-card) 78%, transparent));
}
.tod-node.st-active[b-dox1pfbhwz]::after {
    content: "● trabajando"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, var(--success), var(--success-light));
    color: #fff; font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    padding: .14rem .55rem; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--success) 45%, transparent);
    animation: todPulse-b-dox1pfbhwz 1.6s ease-out infinite;
}
.tod-node.st-active:hover[b-dox1pfbhwz] { transform: scale(1.08) translateY(-2px); }
/* Halo mas intenso para el activo. */
@keyframes todHalo-b-dox1pfbhwz {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent), 0 8px 24px color-mix(in srgb, var(--success) 25%, transparent); }
    50%      { box-shadow: 0 0 0 10px transparent,      0 8px 30px color-mix(in srgb, var(--success) 45%, transparent); }
}
/* Los que NO trabajan se apagan un poco mas: el ojo va directo al activo. */
.tod-node.st-idle[b-dox1pfbhwz] { opacity: .5; filter: saturate(.55) brightness(.9); }
.tod-node.st-done[b-dox1pfbhwz] { opacity: .88; }
/* /Pages/TwinOfficers/Salas/SalaChat.razor.rz.scp.css */
/*  Wero MX - TwinOfficers
    CSS AISLADO (Blazor CSS isolation) del CHAT en vivo de una sala (SalaChat). Look glass tematizado
    con las variables del skin (.px-skin, dark/light) — SIN hex crudo salvo transparencias sobre
    variables. Se empaqueta en TwinOfficers.Client.styles.css (versionado por build) -> no requiere
    cache-buster en index.html. */

.sala-chat[b-e3na4rifpa] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    height: 100%;
    min-height: 0;
    padding: 1rem 1.25rem;
}

/* ───── Cabecera ───── */
.sala-chat-head[b-e3na4rifpa] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface, var(--bg-card));
    backdrop-filter: blur(var(--px-glass-blur, 16px));
}

.sala-chat-title[b-e3na4rifpa] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}

.sala-chat-clave[b-e3na4rifpa] {
    font-size: .72rem;
    padding: .05rem .4rem;
    border-radius: 6px;
    background: var(--primary-soft);
    color: var(--primary);
}

.sala-chat-sub[b-e3na4rifpa] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--text-muted);
}

.sala-chat-cli-dot[b-e3na4rifpa] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.sala-chat-conn[b-e3na4rifpa] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
}

.sala-chat-conn.on[b-e3na4rifpa] { background: var(--success-soft); color: var(--success); }
.sala-chat-conn.off[b-e3na4rifpa] { background: var(--danger-soft); color: var(--danger); }

.sala-chat-conn-dot[b-e3na4rifpa] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.sala-chat-conn.on .sala-chat-conn-dot[b-e3na4rifpa] { animation: sala-pulse-b-e3na4rifpa 1.6s ease-in-out infinite; }

@keyframes sala-pulse-b-e3na4rifpa {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.sala-chat-status[b-e3na4rifpa] { color: var(--text-muted); font-size: .75rem; }

/* ───── Composer ───── */
.sala-chat-composer[b-e3na4rifpa] {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
}

.sala-chat-composer textarea[b-e3na4rifpa] {
    flex: 1;
    resize: vertical;
    min-height: 46px;
}

/* ───── Sub-tabs ───── */
.sala-chat-subtabs[b-e3na4rifpa] {
    display: flex;
    gap: .35rem;
    border-bottom: 1px solid var(--border-color);
}

.sala-chat-subtab[b-e3na4rifpa] {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: .4rem .75rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.sala-chat-subtab:hover[b-e3na4rifpa] { color: var(--text-primary); }
.sala-chat-subtab.is-active[b-e3na4rifpa] { color: var(--primary); border-bottom-color: var(--primary); }

.sala-chat-badge[b-e3na4rifpa] {
    display: inline-block;
    min-width: 18px;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--surface-2, var(--bg-input-group));
    color: var(--text-muted);
    font-size: .68rem;
    text-align: center;
}

/* ───── Cuerpo (scroll) ─────
   Region de scroll PROPIA y acotada: flex:1 + min-height:0 permite que el hijo encoja bajo su
   contenido y sea el UNICO que scrollea (antes min-height:240px impedia encoger -> reflujo/"salto" de
   toda la pestana al llegar un push). overflow-anchor:auto deja al navegador anclar el nodo visible para
   que, al insertar un mensaje arriba mientras el usuario lee, la posicion NO salte. overscroll-behavior
   evita el scroll-chaining al shell. Mas reciente arriba (paridad con el original), sin autoscroll (JS). */
.sala-chat-body[b-e3na4rifpa] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-anchor: auto;
    overscroll-behavior: contain;
    padding: .5rem .25rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.sala-chat-empty[b-e3na4rifpa] {
    margin: auto;
    text-align: center;
    color: var(--text-muted);
}

.sala-chat-empty i[b-e3na4rifpa] { font-size: 2rem; opacity: .5; display: block; margin-bottom: .5rem; }

/* ───── Burbujas ───── */
.sala-row[b-e3na4rifpa] { display: flex; gap: .5rem; align-items: flex-end; }
.sala-row.user[b-e3na4rifpa] { justify-content: flex-end; }
.sala-row.assistant[b-e3na4rifpa] { justify-content: flex-start; }

.sala-avatar[b-e3na4rifpa] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    flex-shrink: 0;
}

.sala-bubble[b-e3na4rifpa] {
    max-width: 72%;
    padding: .55rem .8rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--surface, var(--bg-card));
    color: var(--text-primary);
    font-size: .9rem;
    line-height: 1.4;
}

.sala-bubble.user[b-e3na4rifpa] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.sala-bubble.assistant[b-e3na4rifpa] { border-bottom-left-radius: 4px; }

.sala-bubble-name[b-e3na4rifpa] {
    font-size: .72rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: .15rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}

/* Chip de modelo LLM junto al nombre del agente (assistant). */
.sala-bubble-modelo[b-e3na4rifpa] {
    font-size: .62rem;
    font-weight: 600;
    padding: .02rem .4rem;
    border-radius: 999px;
    background: var(--surface-2, var(--bg-input-group));
    color: var(--text-muted);
}

/* ───── Markdown dentro de la burbuja ─────
   El HTML lo inyecta RenderContenido (MiniMarkdown) como MarkupString: NO recibe el atributo de scope de
   la aislacion CSS, asi que hay que alcanzarlo con ::deep (combinador que perfora el scope hacia los
   descendientes). Cubre encabezados, listas, tablas, citas, reglas y bloques de codigo, tematizado con
   variables del skin. Las tablas/bloques scrollean en su propio contenedor -> el cuerpo nunca scrollea en
   horizontal. Espeja el .chat-md del original. */
.sala-md[b-e3na4rifpa]  p { margin: 0 0 .5rem 0; }
.sala-md[b-e3na4rifpa]  p:last-child { margin-bottom: 0; }
.sala-md[b-e3na4rifpa]  h1, .sala-md[b-e3na4rifpa]  h2, .sala-md[b-e3na4rifpa]  h3,
.sala-md[b-e3na4rifpa]  h4, .sala-md[b-e3na4rifpa]  h5, .sala-md[b-e3na4rifpa]  h6 {
    margin: .7rem 0 .35rem 0;
    font-weight: 600;
    line-height: 1.25;
}
.sala-md[b-e3na4rifpa]  h1 { font-size: 1.2rem; }
.sala-md[b-e3na4rifpa]  h2 { font-size: 1.1rem; }
.sala-md[b-e3na4rifpa]  h3 { font-size: 1rem; }
.sala-md[b-e3na4rifpa]  h4, .sala-md[b-e3na4rifpa]  h5, .sala-md[b-e3na4rifpa]  h6 { font-size: .92rem; }
.sala-md[b-e3na4rifpa]  ul, .sala-md[b-e3na4rifpa]  ol { margin: .25rem 0 .5rem 0; padding-left: 1.4rem; }
.sala-md[b-e3na4rifpa]  li { margin-bottom: .15rem; }
.sala-md[b-e3na4rifpa]  strong { font-weight: 700; }
.sala-md[b-e3na4rifpa]  em { font-style: italic; }
.sala-md[b-e3na4rifpa]  a { color: var(--primary); text-decoration: underline; word-break: break-word; }
.sala-md[b-e3na4rifpa]  hr { border: 0; border-top: 1px solid var(--border-color); margin: .6rem 0; }
.sala-md[b-e3na4rifpa]  blockquote {
    margin: .5rem 0;
    padding: .25rem .75rem;
    border-left: 3px solid var(--primary);
    background: var(--primary-soft);
    color: var(--text-secondary);
}
.sala-md[b-e3na4rifpa]  code {
    background: var(--surface-2, var(--bg-input-group));
    padding: .05rem .3rem;
    border-radius: 5px;
    font-size: .82em;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    word-break: break-word;
}
.sala-md[b-e3na4rifpa]  pre {
    background: var(--surface-2, var(--bg-input-group));
    border: 1px solid var(--border-color);
    padding: .6rem .8rem;
    border-radius: 8px;
    margin: .5rem 0;
    overflow-x: auto;
    font-size: .8rem;
    line-height: 1.5;
}
.sala-md[b-e3na4rifpa]  pre code { background: transparent; padding: 0; font-size: inherit; word-break: normal; }
.sala-md[b-e3na4rifpa]  table {
    border-collapse: collapse;
    margin: .5rem 0;
    font-size: .84rem;
    display: block;
    max-width: 100%;
    overflow-x: auto;
}
.sala-md[b-e3na4rifpa]  th, .sala-md[b-e3na4rifpa]  td {
    border: 1px solid var(--border-color);
    padding: .35rem .6rem;
    text-align: left;
    vertical-align: top;
}
.sala-md[b-e3na4rifpa]  th { background: var(--surface-2, var(--bg-input-group)); font-weight: 600; }

/* Codigo en la burbuja del usuario: legible sobre el fondo primario. */
.sala-bubble.user .sala-md[b-e3na4rifpa]  code,
.sala-bubble.user .sala-md[b-e3na4rifpa]  pre { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.28); }
.sala-bubble.user .sala-md[b-e3na4rifpa]  a { color: #fff; }
.sala-bubble.user .sala-md[b-e3na4rifpa]  blockquote { border-left-color: rgba(255,255,255,.6); background: rgba(255,255,255,.12); color: #fff; }

.sala-bubble-meta[b-e3na4rifpa] {
    margin-top: .25rem;
    font-size: .68rem;
    opacity: .75;
}

.sala-row-system[b-e3na4rifpa] { display: flex; justify-content: center; }

.sala-bubble-system[b-e3na4rifpa] {
    max-width: 80%;
    text-align: center;
    font-size: .78rem;
    color: var(--text-muted);
    background: var(--surface-2, var(--bg-input-group));
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    padding: .35rem .7rem;
}

/* Nota de error del sistema: mismo formato, acento de peligro (paridad con el original). */
.sala-bubble-system.error[b-e3na4rifpa] {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: var(--danger);
}

/* ───── Timeline de Actividad ───── */
.sala-timeline[b-e3na4rifpa] { display: flex; flex-direction: column; gap: .5rem; }

.sala-tl-item[b-e3na4rifpa] {
    display: flex;
    gap: .6rem;
    padding: .5rem .65rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--surface, var(--bg-card));
}

.sala-tl-ico[b-e3na4rifpa] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    flex-shrink: 0;
    font-size: .8rem;
}

.sala-tl-body[b-e3na4rifpa] { flex: 1; min-width: 0; }

.sala-tl-head[b-e3na4rifpa] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
}

.sala-tl-label[b-e3na4rifpa] { font-weight: 600; font-size: .82rem; color: var(--text-primary); }
.sala-tl-actor[b-e3na4rifpa] { font-size: .76rem; color: var(--text-muted); }
.sala-tl-time[b-e3na4rifpa] { font-size: .7rem; color: var(--text-muted); margin-left: auto; }

.sala-tl-text[b-e3na4rifpa] {
    margin-top: .2rem;
    font-size: .82rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.sala-tl-chips[b-e3na4rifpa] { margin-top: .3rem; display: flex; flex-wrap: wrap; gap: .3rem; }

.sala-tl-chip[b-e3na4rifpa] {
    font-size: .68rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--surface-2, var(--bg-input-group));
    color: var(--text-muted);
}

/* ══════════ Banner de actividad EN VIVO (pipeline trabajando) ══════════
   Glass + borde degradado animado; el orbe y el acento cambian por tipo de paso (t-espera/t-tool/
   t-invoca/t-consulta/t-respuesta). La barra inferior es progreso indeterminado. */
.sala-chat .sc-live[b-e3na4rifpa] {
    position: relative; display: flex; align-items: center; gap: .7rem;
    margin: 0 0 .6rem; padding: .55rem .8rem .7rem;
    background: color-mix(in srgb, var(--bg-card) 72%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--sc-acc, var(--primary)) 35%, var(--border-color));
    border-radius: 14px; overflow: hidden; flex: 0 0 auto;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--sc-acc, var(--primary)) 12%, transparent);
    animation: scLiveIn-b-e3na4rifpa .25s ease-out;
}
.sala-chat .sc-live.t-espera[b-e3na4rifpa]    { --sc-acc: var(--primary); }
.sala-chat .sc-live.t-tool[b-e3na4rifpa]      { --sc-acc: var(--warning); }
.sala-chat .sc-live.t-invoca[b-e3na4rifpa]    { --sc-acc: var(--info); }
.sala-chat .sc-live.t-consulta[b-e3na4rifpa]  { --sc-acc: var(--info); }
.sala-chat .sc-live.t-respuesta[b-e3na4rifpa] { --sc-acc: var(--success); }

/* Orbe: doble anillo pulsante con el icono del paso. */
.sala-chat .sc-live-orb[b-e3na4rifpa] {
    position: relative; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%;
    display: grid; place-items: center; color: #fff; font-size: .95rem;
    background: radial-gradient(circle at 32% 28%,
        color-mix(in srgb, var(--sc-acc, var(--primary)) 88%, #fff 10%),
        color-mix(in srgb, var(--sc-acc, var(--primary)) 70%, #000 22%));
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sc-acc, var(--primary)) 45%, transparent);
    animation: scOrb-b-e3na4rifpa 1.8s ease-out infinite;
}
.sala-chat .sc-live-orb i[b-e3na4rifpa] { animation: scOrbIco-b-e3na4rifpa 2.6s ease-in-out infinite; }

.sala-chat .sc-live-info[b-e3na4rifpa] { flex: 1; min-width: 0; }
.sala-chat .sc-live-title[b-e3na4rifpa] {
    font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: color-mix(in srgb, var(--sc-acc, var(--primary)) 70%, var(--text-primary));
    display: flex; align-items: baseline; gap: .15rem;
}
.sala-chat .sc-live-dots span[b-e3na4rifpa] { animation: scDots-b-e3na4rifpa 1.4s ease-in-out infinite; display: inline-block; font-weight: 900; }
.sala-chat .sc-live-dots span:nth-child(2)[b-e3na4rifpa] { animation-delay: .2s; }
.sala-chat .sc-live-dots span:nth-child(3)[b-e3na4rifpa] { animation-delay: .4s; }
.sala-chat .sc-live-text[b-e3na4rifpa] {
    font-size: .84rem; color: var(--text-secondary); margin-top: .1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Barra de progreso indeterminada pegada al borde inferior. */
.sala-chat .sc-live-bar[b-e3na4rifpa] {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: color-mix(in srgb, var(--sc-acc, var(--primary)) 14%, transparent); overflow: hidden;
}
.sala-chat .sc-live-bar span[b-e3na4rifpa] {
    position: absolute; top: 0; bottom: 0; width: 38%; border-radius: 3px;
    background: linear-gradient(90deg, transparent,
        var(--sc-acc, var(--primary)),
        color-mix(in srgb, var(--sc-acc, var(--primary)) 55%, #fff 25%), transparent);
    animation: scBar-b-e3na4rifpa 1.6s cubic-bezier(.4,.1,.6,.9) infinite;
}

@keyframes scLiveIn-b-e3na4rifpa { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes scOrb-b-e3na4rifpa {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sc-acc, var(--primary)) 45%, transparent); }
    55%      { box-shadow: 0 0 0 9px transparent; }
}
@keyframes scOrbIco-b-e3na4rifpa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14) rotate(6deg); } }
@keyframes scDots-b-e3na4rifpa { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes scBar-b-e3na4rifpa { 0% { left: -40%; } 100% { left: 105%; } }

/* Nombre REAL del usuario en su burbuja (quien pregunta tiene nombre). */
.sala-chat .sala-bubble-name.user[b-e3na4rifpa] {
    color: rgba(255, 255, 255, .95); font-size: .72rem; font-weight: 800;
    letter-spacing: .02em; margin-bottom: .2rem; opacity: .95;
}

/* ══════════ Avatares CHIBI en el chat (mismo generador que V2/dashboard) ══════════ */
.sala-chat .sala-avatar.chibi[b-e3na4rifpa] {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle at 50% 28%,
        color-mix(in srgb, var(--nc, var(--primary)) 55%, transparent),
        color-mix(in srgb, var(--nc, var(--primary)) 88%, #000 10%)) !important;
    border: 2px solid color-mix(in srgb, var(--nc, var(--primary)) 60%, transparent);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--nc, var(--primary)) 25%, transparent);
    display: block; padding: 0; font-size: 0;
}
.sala-chat .sala-avatar.chibi[b-e3na4rifpa]  svg { display: block; width: 100%; height: 100%; }
/* La fila del usuario lleva su chibi al final (burbuja a la derecha, avatar junto a ella). */
.sala-chat .sala-row.user[b-e3na4rifpa] { display: flex; justify-content: flex-end; align-items: flex-end; gap: .5rem; }

/* Boton clip de adjuntos: el InputFile es un COMPONENTE HIJO -> su <input> no lleva el atributo de
   CSS aislado y la regla sin ::deep no le llegaba: el control nativo "Elegir archivos" se pintaba
   gigante y aplastaba el textarea. El input vive INVISIBLE dentro del label; el label ES el boton. */
.sala-chat .sala-clip[b-e3na4rifpa] { position: relative; overflow: hidden; display: inline-flex; align-items: center;
    justify-content: center; width: 44px; min-width: 44px; flex: 0 0 auto; height: 46px;
    cursor: pointer; margin: 0; padding: 0; }
.sala-chat .sala-clip[b-e3na4rifpa]  input[type="file"] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; font-size: 0; }
.sala-chat .sala-clip.disabled[b-e3na4rifpa] { pointer-events: none; opacity: .6; }
/* El boton Enviar mantiene su alto alineado al textarea. */
.sala-chat-composer .btn-primary[b-e3na4rifpa] { height: 46px; flex: 0 0 auto; white-space: nowrap; }

/* Burbuja de adjunto (documento_adjunto). */
.sala-chat .sala-bubble.user .sala-md p[b-e3na4rifpa] { margin: 0; }
/* /Pages/TwinOfficers/Salas/SalasLista.razor.rz.scp.css */
/*  Wero MX - TwinOfficers
    CSS AISLADO de SalasLista: solo lo propio de la tarjeta de sala (meta de recepcionista/miembros/
    sesiones y la fila de acciones). El resto reusa las clases globales ds-cli-* / ds-ag-* de ds-suite.
    Tematizado con variables del skin (sin hex crudo). Empaquetado en TwinOfficers.Client.styles.css
    (versionado por build) -> sin cache-buster en index.html. */

.ds-sala-meta[b-81tt1ub63i] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin-top: .5rem;
    font-size: .8rem;
    color: var(--text-muted);
}

.ds-sala-meta span[b-81tt1ub63i] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.ds-sala-meta i[b-81tt1ub63i] { opacity: .8; }

.ds-sala-actions[b-81tt1ub63i] {
    display: flex;
    gap: .4rem;
    margin-top: .75rem;
}