/* [BRAINMORE EXPERT · IDENTIDAD] Núcleo, «¿Cómo llegué a esto?» y Cerebro SAP.
   Prefijos propios: `bxe-` (núcleo y traza) y `cer-` (Cerebro SAP). Superficies y tinta con los
   tokens de la aplicación (--card, --text, --border, --surface-muted…): el tema oscuro sale de
   `body.theme-dark`, como el resto. Con `prefers-reduced-motion: reduce` nada se mueve. */

:root {
  --bxe-a: #2563EB;          /* núcleo en espera: azul holográfico */
  --bxe-b: #7C3AED;
  --bxe-ok-a: #0EA5A4;       /* encontró respuesta: verde-azul */
  --bxe-ok-b: #2563EB;
  --bxe-duda-a: #D97706;     /* incertidumbre: ámbar */
  --bxe-duda-b: #B45309;
  --bxe-aprende: #7A2C36;    /* aprendiendo: el acento de la marca */
  --bxe-conoce: #4F46E5;     /* buscando conocimiento: índigo */
  --bxe-sap: #0284C7;        /* consultando SAP: celeste de datos */
  --bxe-sql: #9333EA;        /* construyendo SQL: púrpura */
  --bxe-valida: #059669;     /* validando: verde */
  --bxe-escucha: #0891B2;    /* escuchando: cian */
  --bxe-error: #DC2626;      /* error */
  --bxe-escena: radial-gradient(120% 100% at 50% 40%, #EEF2FF 0%, #F8FAFC 55%, #FFFFFF 100%);
  --cer-aprobado: #15803D;
  --cer-validado: #2563EB;
  --cer-candidato: #CA8A04;
  --cer-cuestionado: #DC2626;
  --cer-sin: #9CA3AF;
  --cer-propio: #7A2C36;
}
body.theme-dark {
  --bxe-a: #60A5FA;
  --bxe-b: #A78BFA;
  --bxe-ok-a: #2DD4BF;
  --bxe-ok-b: #60A5FA;
  --bxe-duda-a: #FBBF24;
  --bxe-duda-b: #F59E0B;
  --bxe-aprende: #F472B6;
  --bxe-conoce: #818CF8;
  --bxe-sap: #38BDF8;
  --bxe-sql: #C084FC;
  --bxe-valida: #34D399;
  --bxe-escucha: #22D3EE;
  --bxe-error: #F87171;
  --bxe-escena: radial-gradient(120% 100% at 50% 40%, #1E1B4B 0%, #0F172A 55%, #0B0B0F 100%);
  --cer-aprobado: #34D399;
  --cer-validado: #60A5FA;
  --cer-candidato: #FACC15;
  --cer-cuestionado: #F87171;
  --cer-sin: #6B7280;
  --cer-propio: #F472B6;
}

/* ── Núcleo ─────────────────────────────────────────────────────────────────────────────── */
.bxe {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 12px 0 6px;
  padding: 14px 16px;
  border: 1px solid var(--border, #E5E5E5);
  border-radius: 16px;
  background: var(--card, #FFFFFF);
  color: var(--text, #1A1A1A);
  font-family: var(--bm-font, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  box-shadow: var(--shadow-soft, 0 18px 48px rgba(15, 23, 42, 0.08));
  min-width: 0;
}
.bxe[hidden] { display: none; }
.bxe-escena {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: var(--bxe-escena);
  overflow: hidden;
}
.bxe-lienzo { display: block; width: 100%; height: 100%; }
.bxe-info { min-width: 0; }
.bxe-nombre { margin: 0; font-size: 1.05rem; font-weight: 750; letter-spacing: -0.01em; }
.bxe-sub { margin: 2px 0 8px; font-size: .86rem; color: var(--text-mute, #636A75); }
.bxe-estado { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .92rem; font-weight: 600; min-height: 1.4em; }
.bxe-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--bxe-a); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bxe-a) 22%, transparent); }
.bxe[data-estado="encontro"] .bxe-punto { background: var(--bxe-ok-a); }
.bxe[data-estado="incertidumbre"] .bxe-punto { background: var(--bxe-duda-a); }
.bxe[data-estado="aprendiendo"] .bxe-punto { background: var(--bxe-aprende); }
.bxe[data-estado="pensando"] .bxe-punto, .bxe[data-estado="entendiendo"] .bxe-punto { background: var(--bxe-b); }
.bxe[data-estado="conocimiento"] .bxe-punto { background: var(--bxe-conoce); }
.bxe[data-estado="sap"] .bxe-punto { background: var(--bxe-sap); }
.bxe[data-estado="sql"] .bxe-punto { background: var(--bxe-sql); }
.bxe[data-estado="validando"] .bxe-punto { background: var(--bxe-valida); }
.bxe[data-estado="escuchando"] .bxe-punto { background: var(--bxe-escucha); }
.bxe[data-estado="error"] .bxe-punto { background: var(--bxe-error); }
/* En curso: el punto late (con movimiento reducido, quieto). */
.bxe[data-estado="pensando"] .bxe-punto, .bxe[data-estado="entendiendo"] .bxe-punto, .bxe[data-estado="conocimiento"] .bxe-punto,
.bxe[data-estado="sap"] .bxe-punto, .bxe[data-estado="sql"] .bxe-punto, .bxe[data-estado="validando"] .bxe-punto { animation: bxe-late 1.1s ease-in-out infinite; }
@keyframes bxe-late { 50% { transform: scale(1.35); opacity: .7; } }
.bxe-punto { transition: background-color .4s ease; }
/* «Sin avatar»: el panel conserva el estado, las fases y las barras; se va sólo la escena. */
.bxe.is-sin-avatar { grid-template-columns: minmax(0, 1fr); }
.bxe-escena[hidden] { display: none; }
.bxe-detalle { margin: -4px 0 8px; font-size: .84rem; color: var(--text-soft, #525252); line-height: 1.4; }
.bxe-detalle:empty { display: none; }
.bxe-repaso { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bxe-repaso[hidden] { display: none; }
.bxe-repaso li {
  font-size: .76rem; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border, #E5E5E5);
  color: var(--text-mute, #636A75); opacity: .45; transition: opacity .25s ease, border-color .25s ease, color .25s ease;
}
.bxe-repaso li.is-hecho { opacity: 1; color: var(--text, #1A1A1A); border-color: color-mix(in srgb, var(--bxe-ok-a) 55%, var(--border, #E5E5E5)); }
.bxe-repaso li.is-aviso { opacity: 1; color: var(--text, #1A1A1A); border-color: var(--bxe-duda-a); }
.bxe-repaso li.is-actual { opacity: 1; color: var(--text, #1A1A1A); border-color: var(--bxe-a); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bxe-a) 25%, transparent); }
.bxe-resp-resultado { margin: 0 0 6px; font-weight: 650; font-size: .92rem; }
.bxe-resp-aviso { margin: 0 0 8px; font-size: .84rem; color: var(--bxe-duda-b); }
.bxe-pasos { margin: 0 0 10px; padding-left: 1.3em; font-size: .86rem; line-height: 1.5; }
.bxe-auditoria { margin-top: 12px; border-top: 1px solid var(--border, #E5E5E5); padding-top: 10px; }
.bxe-auditoria summary { cursor: pointer; font-weight: 650; font-size: .86rem; margin-bottom: 8px; }
.bxe-voz.is-minimizado { width: auto; padding: 6px 10px; }
.bxe-voz.is-minimizado .bxe-avatar-slot, .bxe-voz.is-minimizado .bxe-voz-estado { display: none; }
.bxe-repaso-titulo { flex-basis: 100%; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute, #636A75); }
.bxe-repaso .bxe-repaso-titulo { border: 0; padding: 0; opacity: 1; }
.bxe-barras { display: grid; gap: 5px; margin: 6px 0 8px; }
.bxe-barra { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr) 3.4em; gap: 8px; align-items: center; font-size: .8rem; }
.bxe-barra span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft, #525252); }
.bxe-pista { position: relative; height: 6px; border-radius: 999px; background: var(--surface-muted, #F1F5F9); overflow: hidden; }
.bxe-relleno { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--bxe-a), var(--bxe-b)); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.bxe-sin { font-size: .78rem; font-weight: 650; color: var(--text-mute, #636A75); }
.bxe-barra b { text-align: right; font-variant-numeric: tabular-nums; }
/* [4.19.3] una barra que abre su detalle es un botón: se ve igual, se nota que se toca */
button.bxe-barra { width: 100%; border: 0; background: none; padding: 3px 4px; margin: 0 -4px; border-radius: 8px;
  color: inherit; font: inherit; font-size: .8rem; text-align: left; cursor: pointer; }
button.bxe-barra:hover, button.bxe-barra:focus-visible { background: var(--surface-muted, #F3F4F6); outline: none; }
button.bxe-barra:focus-visible { box-shadow: 0 0 0 2px var(--bm-accent, #7A2C36); }
.bxe-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.bxe-boton {
  font: inherit; font-size: .82rem; padding: 5px 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border, #D9DEE7); background: var(--surface-muted, #F7F9FC); color: var(--text, #1A1A1A);
}
.bxe-boton:hover { border-color: var(--bxe-a); }
.bxe-boton:focus-visible, .cer-nodo:focus-visible { outline: 2px solid var(--bxe-a); outline-offset: 2px; }

/* ── «¿Cómo llegué a esto?» ────────────────────────────────────────────────────────────── */
.bxe-traza-boton { margin-top: 10px; }
.bxe-traza { margin-top: 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--border, #E5E5E5); background: var(--surface-muted, #F8FAFC); }
.bxe-traza[hidden] { display: none; }
.bxe-traza h5 { margin: 0 0 2px; font-size: .9rem; }
.bxe-traza-nota { margin: 0 0 12px; font-size: .78rem; color: var(--text-mute, #636A75); }
.bxe-etapas { list-style: none; margin: 0; padding: 0; position: relative; }
.bxe-etapas::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--border, #E5E5E5); }
.bxe-etapa { position: relative; padding: 0 0 14px 34px; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.bxe-etapa.is-visible { opacity: 1; transform: none; }
.bxe-etapa-icono {
  position: absolute; left: 3px; top: 1px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--cer-sin);
}
.bxe-etapa[data-estado="ok"] .bxe-etapa-icono { background: var(--cer-aprobado); }
.bxe-etapa[data-estado="aviso"] .bxe-etapa-icono { background: var(--cer-candidato); }
.bxe-etapa[data-estado="error"] .bxe-etapa-icono { background: var(--cer-cuestionado); }
.bxe-etapa-titulo { margin: 0; font-weight: 650; font-size: .88rem; }
.bxe-etapa-detalle { margin: 2px 0 0; font-size: .82rem; color: var(--text-soft, #525252); line-height: 1.45; overflow-wrap: anywhere; }
.bxe-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bxe-chip { font-size: .74rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border, #E5E5E5); background: var(--card, #fff); overflow-wrap: anywhere; }
.bxe-mini { display: block; width: 100%; max-width: 420px; height: auto; margin-top: 8px; overflow: visible; }
.bxe-mini-arista { stroke: var(--text-mute, #94A3B8); stroke-width: 1.4; fill: none; opacity: .7; }
.bxe-mini-arista.is-aprendida { stroke: var(--cer-validado); stroke-dasharray: 4 3; }
.bxe-mini-nodo circle { fill: var(--card, #fff); stroke: var(--text-mute, #94A3B8); stroke-width: 1.6; }
.bxe-mini-nodo.is-sql circle { stroke: var(--bxe-a); stroke-width: 2.4; }
.bxe-mini-nodo.is-propio circle { fill: color-mix(in srgb, var(--cer-propio) 16%, var(--card, #fff)); stroke: var(--cer-propio); }
.bxe-mini-nodo text { font-size: 10px; font-weight: 700; fill: var(--text, #1A1A1A); text-anchor: middle; dominant-baseline: central; }
.bxe-dibujar { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset .9s ease; }
.bxe-dibujar.is-visible { stroke-dashoffset: 0; }
.bxe-confianza { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: .8rem; border: 1px solid; }
.bxe-confianza[data-nivel="alta"] { color: var(--cer-aprobado); border-color: var(--cer-aprobado); }
.bxe-confianza[data-nivel="media"] { color: var(--cer-validado); border-color: var(--cer-validado); }
.bxe-confianza[data-nivel="baja"] { color: var(--cer-cuestionado); border-color: var(--cer-cuestionado); }
.bxe-costo { margin: 10px 0 0; font-size: .78rem; color: var(--text-mute, #636A75); }

/* ── Cerebro SAP ──────────────────────────────────────────────────────────────────────── */
.cer { font-family: var(--bm-font, 'Inter', sans-serif); color: var(--text, #1A1A1A); min-width: 0; }
.cer-cab { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.cer-cab h2 { margin: 0; font-size: 1.3rem; letter-spacing: -0.01em; }
.cer-cab p { margin: 2px 0 0; color: var(--text-mute, #636A75); font-size: .9rem; max-width: 70ch; }
.cer-miga { display: flex; gap: 6px; align-items: center; font-size: .86rem; margin: 0 0 10px; flex-wrap: wrap; }
.cer-miga button { font: inherit; background: none; border: 0; color: var(--bm-accent, #7A2C36); cursor: pointer; padding: 0; text-decoration: underline; }
.cer-leyenda { display: flex; flex-wrap: wrap; gap: 10px; font-size: .78rem; color: var(--text-soft, #525252); margin: 0; padding: 0; list-style: none; }
.cer-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.cer-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.cer-lamina { position: relative; border: 1px solid var(--border, #E5E5E5); border-radius: 16px; background: var(--card, #fff); overflow: hidden; min-width: 0; }
.cer-svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.cer-arista { stroke: var(--text-mute, #94A3B8); fill: none; opacity: .45; }
.cer-arista.is-aprendida { stroke: var(--cer-validado); stroke-dasharray: 5 4; opacity: .9; }
.cer-arista.is-activa { opacity: 1; stroke: var(--bm-accent, #7A2C36); }
.cer-nodo { cursor: pointer; outline: none; }
.cer-nodo .cer-disco { stroke: var(--card, #fff); stroke-width: 2.5; }
.cer-nodo .cer-disco--area { fill: var(--surface-muted, #F8FAFC); stroke: var(--border, #E5E5E5); stroke-width: 1.5; }
.cer-nodo .cer-dentro { font-size: 11px; font-weight: 800; fill: var(--text, #1A1A1A); }
.cer-nodo .cer-halo { fill: none; stroke: var(--cer-propio); stroke-width: 2.5; stroke-dasharray: 3 3; }
.cer-nodo text { font-size: 12px; font-weight: 700; fill: var(--text, #1A1A1A); text-anchor: middle; pointer-events: none; }
.cer-nodo .cer-sub { font-size: 10px; font-weight: 500; fill: var(--text-mute, #636A75); }
.cer-nodo .cer-arco { fill: none; stroke-width: 5; stroke-linecap: butt; }
.cer-nodo .cer-arco-pista { fill: none; stroke: var(--cer-sin); opacity: .35; stroke-width: 5; }
.cer-nodo.is-sel .cer-disco { stroke: var(--text, #1A1A1A); }
.cer-entra { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.6); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.cer-entra.is-visible { opacity: 1; transform: none; }
.cer-ficha { border: 1px solid var(--border, #E5E5E5); border-radius: 16px; background: var(--card, #fff); padding: 14px; font-size: .86rem; min-width: 0; overflow-wrap: anywhere; }
.cer-ficha h3 { margin: 0 0 4px; font-size: 1rem; }
.cer-ficha dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 10px 0 0; }
.cer-ficha dt { color: var(--text-mute, #636A75); }
.cer-ficha dd { margin: 0; font-variant-numeric: tabular-nums; }
.cer-nota { font-size: .78rem; color: var(--text-mute, #636A75); margin: 10px 0 0; line-height: 1.45; }
.cer-estado { padding: 26px; text-align: center; color: var(--text-mute, #636A75); }
.cer-inicio { margin: 6px 0 22px; padding: 18px; border-radius: 16px; border: 1px solid var(--border, #E5E5E5); background: var(--card, #fff); display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: center; }
.cer-inicio[hidden] { display: none; }
.cer-inicio h2 { margin: 0 0 4px; font-size: 1.1rem; }
.cer-inicio p { margin: 0 0 10px; color: var(--text-mute, #636A75); font-size: .88rem; }
.cer-inicio .bxe-barras { max-width: 460px; }


/* ── Escenario de voz y ranura del avatar ─────────────────────────────────────────────── */
.bxe-voz {
  position: fixed; right: 16px; bottom: 96px; z-index: 60; width: 220px; max-width: calc(100vw - 32px);
  padding: 10px 12px 12px; border-radius: 16px; border: 1px solid var(--border, #E5E5E5);
  background: var(--card, #fff); color: var(--text, #1A1A1A); box-shadow: var(--shadow-soft, 0 18px 48px rgba(15, 23, 42, .12));
  font-family: var(--bm-font, 'Inter', sans-serif);
}
.bxe-voz[hidden] { display: none; }
.bxe-voz-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bxe-voz-nombre { font-weight: 700; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bxe-voz .bxe-boton { font-size: .74rem; padding: 3px 8px; white-space: nowrap; }
.bxe-avatar-slot { position: relative; width: 150px; height: 150px; margin: 8px auto 4px; border-radius: 50%; background: var(--bxe-escena); overflow: hidden; }
.bxe-avatar-slot[hidden] { display: none; }
.bxe-avatar-slot > [data-bxe-avatar-externo] { position: absolute; inset: 0; width: 100%; height: 100%; }
.bxe-voz-estado { margin: 4px 0 0; text-align: center; font-size: .8rem; color: var(--text-mute, #636A75); }
.bxe-voz.is-sin-avatar .bxe-voz-estado { text-align: left; }
/* La onda mínima: la voz se sigue viendo sin avatar. */
.bxe-voz-onda { height: 28px; margin: 8px 0 2px; }
.bxe-voz-onda[hidden] { display: none; }
.bxe-onda-lienzo { display: block; width: 100%; height: 100%; }
.bxe-cfg-nota { color: var(--text-mute, #636A75); font-size: .76rem; margin-left: 4px; }
.bxe-cfg-proximo { opacity: .55; cursor: not-allowed; }
.bxe-cfg-proximo input { cursor: not-allowed; }
.bxe-cfg { border: 0; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.bxe-cfg legend { font-weight: 600; font-size: .86rem; margin-bottom: 4px; width: 100%; }
@media (max-width: 560px) {
  .bxe-voz { right: 8px; left: 8px; width: auto; bottom: 84px; }
  .bxe-avatar-slot { width: 110px; height: 110px; }
}

.cer-vista { display: inline-flex; margin-top: 8px; border: 1px solid var(--border, #E5E5E5); border-radius: 999px; overflow: hidden; }
.cer-vista button { font: inherit; font-size: .82rem; padding: 4px 14px; border: 0; background: none; color: var(--text-soft, #525252); cursor: pointer; }
.cer-vista button[aria-pressed="true"] { background: var(--bm-accent, #7A2C36); color: #fff; }
.cer-nodo.is-consultada .cer-disco, .cer-nodo.is-consultada .cer-disco--area { stroke: var(--bxe-ok-a); stroke-width: 4; }
.cer-lista { display: none; list-style: none; margin: 0; padding: 6px 10px 10px; }
.cer-fila { display: grid; grid-template-columns: 12px minmax(0, 5.5em) minmax(0, 1fr); gap: 8px; align-items: center; width: 100%;
  font: inherit; font-size: .84rem; text-align: left; padding: 8px 4px; border: 0; border-top: 1px solid var(--border, #E5E5E5);
  background: none; color: var(--text, #1A1A1A); cursor: pointer; }
.cer-fila i { width: 10px; height: 10px; border-radius: 50%; }
.cer-fila span { color: var(--text-mute, #636A75); font-size: .78rem; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .cer-cuerpo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .cer-lista { display: block; }
  .cer-fila { grid-template-columns: 12px minmax(0, 8em) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .bxe { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .bxe-escena { width: 96px; height: 96px; }
  .bxe-barra { grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) 3em; font-size: .76rem; }
  .cer-inicio { grid-template-columns: minmax(0, 1fr); }
  .cer-inicio .cer-svg { max-width: 260px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .bxe-relleno, .bxe-etapa, .bxe-dibujar, .cer-entra, .bxe-repaso li, .bxe-punto { transition: none !important; }
  .bxe .bxe-punto { animation: none !important; }
  .bxe-etapa, .cer-entra { opacity: 1; transform: none; }
  .bxe-dibujar { stroke-dashoffset: 0; }
}