/* ============================================================
   INTELLIGENCE HUB — estilos locales del módulo. Prefijo .intel-
   Cero overrides de .r- ni de .os-, cero valores crudos: todo sale
   de tokens.

   ------------------------------------------------------------
   EL PATRÓN DE COLUMNA — el mismo que `app/lever.css`
   ------------------------------------------------------------
   Estos dos módulos son los más angostos del OS (360/440 y
   400/480) y los dos son lo mismo: una lista de cosas que se
   juzgan, con su procedencia. Si cada uno resolviera la columna a
   su manera el OS se vería armado por dos manos, así que la
   resuelven igual, con tres reglas. Cambiar una aquí es cambiarla
   allá:

   1. MANDA EL PANEL, NO LA VENTANA. La raíz del módulo declara
      `container-type: inline-size` y toda decisión de ancho es
      `@container`. Ni un `@media (max-width)` — dentro de un panel
      la ventana miente: mide 1280 mientras el módulo mide 318.
      Y como el panel se arrastra, la consulta de contenedor
      reacciona en vivo; una de ventana no se enteraría nunca.

   2. LA COLUMNA ES EL ESTADO NORMAL; EL RENGLÓN SE GANA. Antes lo
      apilado era la excepción de móvil (`max-width: 720`). Hoy
      TODO ancho declarado del panel cae del lado angosto, así que
      lo apilado es la base y el renglón de dos columnas aparece
      solo cuando Robbie ensancha el panel a propósito (520 de
      contenedor, el mismo número en los dos archivos).

   3. LA TARJETA NO TIENE SEGUNDO LAYOUT. Título arriba, acciones
      en su propio renglón, siempre. El layout de escritorio
      —acciones al lado del título— servía a una página de 1240 que
      ya no existe; mantener dos formas de la misma tarjeta para un
      ancho que solo se alcanza arrastrando es pagar dos veces.

   ------------------------------------------------------------
   Dos secciones y un solo acento POR SECCIÓN VISIBLE, que es lo
   que la regla pide: solo una está en el DOM visible a la vez.

     · Notas   — la lista de siempre, con el volumen de contexto
                 como métrica.
     · Nubes   — el veredicto, con las que faltan por juzgar.

   Notas ESTUVO sin métrica, con el argumento de que un numeral de
   matriz de puntos ahí competiría con la lista. El argumento se
   cae solo: la sección por omisión del módulo es Notas, así que
   Intelligence era la ÚNICA vista del OS que abría sin acento y
   sin la cifra que manda —los dos son no-negociables de
   `CLAUDE.md`—, y la maqueta aprobada le da su métrica
   (`38 notas`, `.r-lcdrow--lg --mark`). Y competir es justamente
   lo que no pasa: `CLAUDE.md` dice que solo crece la métrica
   principal y nada más compite con ella. El renglón de
   `9 notas · 11 tags · 303 palabras` ya decía la cifra, en 12px
   grises: no se agregó un dato, se le dio su tamaño.

   LÁPIDA: la sección GRAFO. Era una tercera pestaña cuyo contenido
   completo era una disculpa de sesenta palabras —«el design system
   todavía no tiene componente de red»— y una textura de espera.
   En una página de 1240 se toleraba; en el panel más angosto del OS
   se llevaba un tercio de la barra de secciones, permanente, para
   no decir nada. `CLAUDE.md`: si se puede quitar sin perder
   claridad, se quita, y aquí no había nada que perder — ni dato, ni
   estado, ni función; una promesa. Vuelve el día que exista el
   componente, y vuelve barato: un renglón en `SECS` (intel.js).

   La tarjeta de nube hereda el lenguaje de `app/lever.css` a
   propósito: es el mismo gesto —juzgar con la procedencia a la
   vista— sobre otro contenido, y dos lenguajes para el mismo gesto
   es justo lo que rompe la familia. Lo que NO hereda es el alto
   fijo del pie: aquí una tarjeta puede abrir una conversación, y
   eso sí crece. La diferencia es de disparador: lo que se revela
   al hover no mueve nada; lo que se abre con un clic sí puede.
   ============================================================ */

/* ---------- La raíz es el contenedor ----------
   `#intelRoot` es el `.os-page` del módulo, o sea la caja que el
   cuerpo del panel le da. Medirla a ella es medir el panel sin que
   el módulo tenga que saber que está en un panel.

   `container-type: inline-size` trae contención de layout, así que
   esta caja pasa a ser el bloque contenedor de cualquier absoluto
   de adentro. Adentro solo hay absolutos LOCALES (el marcador de
   `.r-seg` y el de `.r-tabs`, cada uno anclado a su propia caja
   relativa), así que no mueve nada. El menú de bloques cuelga de
   `.os-shell`, fuera de aquí; la nota es HERMANA de esta caja, no
   hija — ver abajo. */
.intel-root {
  container-type: inline-size;
  container-name: intel;
}

/* ---------- La vista, con sus dos páginas ----------
   La nota (`#noteSide`) es hermana de `#intelRoot` dentro de la vista, igual
   que la ficha de persona en Relaciones: con la nota abierta la lista no está
   debajo, no está. Es `:has` y no una bandera en el JS a propósito — una sola
   fuente de verdad, el `hidden` del propio panel, y nada que se pueda
   desincronizar.

   La cadena de flex es la que le permite a la nota llenar el panel sin
   posicionarse: `.os-view` ya es item flex con `min-height: 0`, así que su
   alto es el del panel, y de ahí para abajo cada eslabón lo pasa. */
/* `height: 100%` es el eslabón que le dice a la vista cuánto mide, y aquí NO es
   redundante: el cuerpo del panel declara `flex-shrink: 0` en sus hijos cuando
   el módulo tiene alta (`ron.css` § 33d) y con `flex-basis: auto` el tamaño
   hipotético sale de la propiedad `height`. Intelligence SÍ declara alta —el
   `.r-fab` de «Nueva nota»— así que sin esta línea la vista mide su contenido
   en vez del panel, y la lista empuja hacia abajo sin techo. Es la misma línea,
   con el mismo comentario, que `#viewWork` y `#viewLever`; la diferencia es que
   allá es previsión y acá es la causa. Medido antes de escribirla: con la
   semilla a 1440×900 el cuerpo del panel se pasaba **696 px**. */
#viewIntel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
#intelRoot { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#viewIntel:has(> .os-side:not([hidden])) > #intelRoot { display: none; }

/* En una columna flex TODO cede por omisión, y lo que cede se estruja sin
   avisar: un contenedor con `overflow` tiene mínimo automático 0 y se aplasta
   hasta desaparecer cuando la lista empuja. Se declara al revés —nada cede, y
   quien crece lo pide por su nombre— igual que en `.lv-root`, `#relRoot` y
   `#gwRoot`. `:where` deja la especificidad en cero para que la regla de cada
   pieza le gane sin pelear. */
:where(#intelRoot) > * { flex: 0 0 auto; }

/* ---------- Las secciones ----------
   Viven las dos en el DOM y solo se voltea `hidden`, como en Growth
   y en Finanzas: cambiar de sección no repinta la lista de notas ni
   tira una conversación a medias. */

.intel-sec[hidden] { display: none; }

/* ---------- LO QUE TIENE QUE CABER ES EL MARCO; LA LISTA SE RECORRE ----------
   La cuarta regla del patrón que este archivo comparte con `app/lever.css`,
   escrita allá completa. Vale palabra por palabra aquí y por la misma
   medición: la lista de notas **no tiene techo por diseño** —las notas se
   acumulan, y encima el OS admite que le suelten un `.md` en `notes/` por
   fuera— así que una lista sin techo dentro de una vista sin scroll es una
   promesa que se rompe el segundo mes. Medido: nueve notas de la semilla ya
   pedían 1,088 px de lista contra 803 de cuerpo visible.

   Así que la sección es **métrica + consulta + barra + etiquetas**, que caben
   siempre, y la lista es su contenido: se recorre en su propia pista. Mismo
   reparto que `.lv-list`, que `.wk-tl__sc` y que las tres segundas páginas del
   OS. La barra de secciones que `CLAUDE.md` pide para esto ya existe: son las
   pestañas Notas / Nubes.

   Solo crece la sección de NOTAS. Nubes se queda midiendo su contenido —es la
   que ya estaba así y no es la que se mide larga— y con el `flex: 0 0 auto` de
   arriba se comporta exactamente como cuando esto era un bloque. */
.intel-sec[data-intel-sec="notas"] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
:where(.intel-sec[data-intel-sec="notas"]) > * { flex: 0 0 auto; }

/* ---------- Cabeza de sección ----------
   Base: la métrica arriba y lo que la sección dice debajo, cada uno
   con el renglón completo. En una columna de 318 la métrica y un
   párrafo de 34ch lado a lado dejaban al numeral de matriz de
   puntos en 30px de ancho —y como el SVG trae `width`/`height` en
   atributos y el reset del sistema le pone `max-width: 100%`, no se
   encogía: se APLASTABA, con la altura intacta y los dígitos en
   vertical—. De ahí el `flex: 0 0 auto` de la métrica: la cifra que
   manda no cede ancho, ni un píxel. */

.intel-head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.intel-metric { margin: 0; flex: 0 0 auto; }
.intel-head > :first-child { min-width: 0; }

/* Cuándo sintetizó: dato de fondo, en voz baja. */
.intel-when { margin: 0; }

/* Cuando la sección NO puede trabajar —sin motor, sin colección en el
   store, sin nada que citar— el renglón habla con palabras completas.
   Es un estado, no clutter: la excepción de la claridad. */
.intel-say {
  margin: 0;
  color: var(--ink-3);
  line-height: var(--lh-snug);
}

/* El renglón se gana. 520 es el ancho de contenedor donde la métrica
   (≈120) y un párrafo de 34ch (≈240) caben lado a lado con aire de
   sobra en vez de justo; más apretado que eso, el párrafo se vuelve
   una tira de cinco renglones al lado de un numeral de dos, que es
   peor que apilarlos. El mismo número está en `app/lever.css`. */
@container intel (min-width: 520px) {
  .intel-head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: var(--s-6);
    margin-bottom: var(--s-8);
  }
  .intel-say {
    justify-self: end;
    max-width: 34ch;
    text-align: right;
  }
  .intel-when { justify-self: end; white-space: nowrap; }
}

/* ---------- Barra de estados ----------
   Envuelve en vez de scrollear: `.r-toolbar` resuelve el desborde con
   `overflow-x: auto` y barra oculta, que en una pantalla ancha es
   discreto y en una columna de 318 es una fila de botones cortada sin
   una sola pista de que siga. Envolver dice la verdad. */

.intel-bar {
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
/* LÁPIDA: `.intel-bar__grow`, el separador elástico entre el segmentado y el
   botón de sintetizar. Con la barra envolviendo, el que se iba al segundo
   renglón era ÉL, y se llevaba el botón al canto derecho de un renglón por lo
   demás vacío. La barra tiene dos piezas y las dos son de la misma lista: no
   había nada que separar. El de la barra de NOTAS se queda (`__grow`, abajo)
   porque allá sí separa —lo que se consulta de lo que se crea— y allá nunca
   provoca el envolvimiento. */

/* ---------- La síntesis en vuelo ----------
   Canto punteado a la izquierda: lo que pasa aquí todavía no es dato. */

.intel-live {
  margin-bottom: var(--s-6);
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  border-left: var(--stroke-2) dashed var(--hairline-strong);
  display: grid;
  gap: var(--s-2);
  animation: os-slide-in var(--d-base) var(--ease-out) both;
}
.intel-live__h { display: flex; align-items: center; gap: var(--s-2); margin: 0; }

/* Cola del texto que va llegando: seña de vida, no lectura. */
.intel-live__raw {
  margin: 0;
  min-height: var(--s-5);
  max-height: var(--s-10);
  overflow: hidden;
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

/* ---------- Error de motor ---------- */

.intel-err {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: 0 0 var(--s-6);
  color: var(--ink-2);
}
.intel-err .r-status { flex: 0 0 auto; align-self: center; }

/* ---------- Vacío ----------
   Sin `max-width` ni `margin-inline: auto`: el ancho lo da el panel y
   centrar dentro de una columna que ya es angosta no centra nada, solo
   deja al texto sin dónde caer. */

.intel-blank {
  padding: var(--s-10) var(--s-2);
  text-align: center;
  display: grid;
  gap: var(--s-3);
  justify-items: center;
}

/* ============================================================
   NOTAS — la lista, y por qué vive aquí
   ============================================================
   Esta sección se estilaba en `app/os.css` con prefijo `.os-`
   (`.os-notes`, `.os-note*`, `.os-tagrow`, `.os-intel__*`), de
   cuando Intelligence era una página de 1240 y su lista era chrome
   del OS. Hoy es la lista de un módulo dentro de un panel de 318 a
   400, y para que quepa hay que rehacerle la retícula — que es
   exactamente lo que `CLAUDE.md` prohíbe hacerle a una clase de
   otro archivo desde aquí.

   Así que la lista se mudó de prefijo, no de dueño: `intel.js`
   renombra los nodos al anclarlos (`renombra()`), y el estilo vive
   donde vive el módulo. Las reglas `.os-note*` de `os.css` quedaron
   sin consumidor y hay que enterrarlas; está reportado, no es mío
   ese archivo.
   ============================================================ */

/* El volumen de contexto: tres cifras en un renglón, sin tarjetas ni
   métricas grandes. Se consulta, no se opera. */
.intel-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin: 0 0 var(--s-3);
}

/* El renglón de Notas: filtro · preguntar · lupa que abre el campo.
   Nada a todo el ancho. La lupa vive en la esquina; el campo nace
   colapsado y crece hacia adentro. */
.intel-tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
}
.intel-tools__on { color: var(--accent); }
.intel-find {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  gap: var(--s-1);
}
.intel-find .intel-q {
  width: 0;
  min-width: 0;
  height: 32px;
  margin: 0;
  padding: 0;
  border-width: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition:
    width var(--d-base) var(--ease),
    opacity var(--d-fast) var(--ease),
    padding var(--d-fast) var(--ease);
}
.intel-find[data-open] .intel-q {
  flex: 1 1 auto;
  width: auto;
  min-width: 8rem;
  padding: 0 var(--s-3);
  border-width: var(--stroke);
  opacity: 1;
  pointer-events: auto;
}

/* Filtros y alta: popovers del módulo, papel sólido porque flotan
   sobre contenido arbitrario.

   EL `display` VA EN `:popover-open`, NO AQUÍ. Es la trampa documentada
   en ron.css § 22 / agentes.css: `display: grid` le gana al
   `display: none` del popover nativo (misma especificidad) y el panel
   CERRADO se queda en el flujo del `<body>` — en Casa, abajo del
   companion, como una barra de Todas / Notas / Minutas. Eso estira la
   ventana y en WKWebView revienta. Cerrado no pinta. */
.intel-filt,
.intel-alta {
  /* Reset de las UA styles de [popover]: inset:0 + margin:auto lo
     convertían en una hoja enorme centrada — el «select» raro del +. */
  position: fixed;
  inset: auto;
  margin: 0;
  width: max-content;
  max-width: min(260px, calc(100vw - var(--s-6)));
  background: var(--theme-surface);
  color: var(--theme-ink);
  border: var(--stroke) solid var(--theme-hairline);
  border-radius: var(--r-md);
  box-shadow: var(--e-3);
}
.intel-filt:not(:popover-open),
.intel-alta:not(:popover-open) { display: none; }
.intel-filt:popover-open,
.intel-alta:popover-open { display: grid; }

.intel-filt {
  padding: var(--s-3);
  gap: var(--s-3);
  min-width: 220px;
}
.intel-filt .r-seg { width: 100%; }
.intel-filt__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
}
.intel-filt__tags:empty { display: none; }

/* El + de Intel: Nueva nota · Minuta. Misma caja que Workspace
   (`.wk-alta`): compacta, anclada al FAB, no es hoja. */
.intel-alta {
  padding: var(--s-1);
  gap: var(--s-1);
  min-width: 0;
}
.intel-alta button[data-alta] {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s-1) var(--s-3);
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-body-sm);
  line-height: var(--lh-snug);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.intel-alta button[data-alta]:hover { background: var(--surface-2); }

.intel-minuta__t {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--t-h3);
  letter-spacing: var(--tr-tight);
}
.intel-minuta__s {
  margin: 0 0 var(--s-4);
  font-size: var(--t-body);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.intel-minuta__tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}
.intel-minuta__task {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--t-body-sm);
  cursor: pointer;
}
.intel-minuta__task.is-done { color: var(--ink-3); text-decoration: line-through; }

/* LÁPIDA de `.intel-nbar` / `.intel-nbar__grow`. El alta es el `.r-fab`
   y los filtros viven en el icono. */

/* ---------- Etiquetas (dentro del desplegable de filtros) ----------
   Trece etiquetas a 398px son tres renglones de chips antes de ver
   una sola nota. Se muestran las más usadas y el resto se revela con
   `+N`. Las que están filtrando se muestran siempre. */
.intel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.intel-tags:empty { display: none; }
.intel-tags button {
  /* La manita se queda AQUÍ a propósito, contra la regla general de que un
     control de macOS usa flecha. La regla vale cuando hay otra señal de que
     algo se pica —un hover, un borde, un fondo—; esto no la tiene, y era su
     única. Quitarla dejó un elemento clicable indistinguible de un rótulo.
     El arreglo de fondo es darle hover y entonces sí volver a la flecha. */
  cursor: pointer;
}

/* ---------- La lista ---------- */

/* La única pista que se recorre de la sección (ver «lo que tiene que caber es
   el marco», arriba). `contain` corta el encadenamiento: llegar al final de la
   lista no arrastra al panel ni a la conversación de atrás. Sin `tabindex` —las
   filas ya son enfocables, así que recorrer con el teclado es tabular y el
   navegador trae la enfocada a la vista solo—. El hairline se queda: ahora es
   además el canto donde empieza la pista. */
.intel-notes {
  border-top: var(--stroke) solid var(--hairline);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  /* El relleno del cuerpo del panel queda FUERA de esta pista, así que el
     último renglón se metería debajo del `.r-fab` y el clic se lo comería
     el alta. Encontrado por `pruebas/ui/test_traslape.py` el 2026-08-27.
     Ver `ron.css § 33d bis`. */
  padding-bottom: var(--fab-reserve);
}

/* Con la lista quedándose el alto que sobra, el vacío tiene por fin dónde
   centrarse — antes colgaba del hairline con media columna muerta debajo,
   porque la lista medía su contenido. Es `:has` y no una clase que ponga el JS
   por la razón de siempre en este archivo: una sola fuente de verdad. */
.intel-notes:has(> .intel-blank) { display: grid; align-content: center; }

/* Una columna, siempre. La retícula vieja era `1fr auto` con la
   metadata pegada al canto derecho; a 300px de columna esa segunda
   pista se llevaba la mitad del renglón para decir «hace 2 d · 210p»
   —y se la llevaba INVISIBLE, porque solo se revela al hover—. */
.intel-n {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-2);
  border-bottom: var(--stroke) solid var(--hairline);
  transition: background var(--d-fast) var(--ease);
  animation: os-slide-in var(--d-base) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
.intel-n:hover { background: var(--surface-2); }
.intel-n[aria-current="true"] { background: var(--surface-2); }
.intel-n:focus-visible {
  outline: var(--stroke) solid var(--ink-4);
  outline-offset: calc(var(--stroke) * -1);
}

/* El título baja de `--t-h3` a `--t-body`, que es el tamaño de
   `.intel-c__t` y de `.lv-o__t`. No es ahorro de píxeles: son tres
   listas en dos módulos hermanos, y una de ellas gritando 18px
   mientras las otras dos hablan en 15 es la familia rota. En 300px,
   además, 18px eran dos renglones por título. */
.intel-n__t {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  letter-spacing: var(--tr-tight);
  font-size: var(--t-body);
  line-height: var(--lh-snug);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.intel-n__t .r-ico { flex: 0 0 auto; }

/* Dos renglones, no uno recortado. En la página de 1240 el fragmento
   tenía ~100 caracteres en una línea; en 300px una línea son 42 y la
   nota deja de reconocerse por su fragmento. Dos renglones devuelven
   la paridad de información que el ancho se llevó. */
.intel-n__s {
  margin: 0;
  font-size: var(--t-body-sm);
  color: var(--ink-3);
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.intel-n__s mark { background: var(--accent-soft); color: var(--fixed-ink); border-radius: var(--r-xs); }

/* Etiquetas y metadata: renglón propio, alineadas a la izquierda con
   el resto, y reveladas al hover o al foco. Opacidad y no `display`,
   como siempre: la fila mide lo mismo con el cursor encima y la lista
   no se recorre sola. */
.intel-n__r {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
  min-height: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-fast) var(--ease);
}
.intel-n:hover .intel-n__r,
.intel-n:focus-visible .intel-n__r,
.intel-n:focus-within .intel-n__r,
.intel-n[aria-current="true"] .intel-n__r { opacity: 1; pointer-events: auto; }
.intel-n__tags { display: flex; gap: var(--s-1); flex-wrap: wrap; min-width: 0; }
.intel-n__who {
  font: inherit;
  cursor: pointer;
}
.intel-n__d {
  margin-left: auto;
  font-size: var(--t-micro);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============================================================
   NUBES — el veredicto
   ============================================================ */

.intel-list { border-top: var(--stroke) solid var(--hairline); }

.intel-c {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-2) var(--s-3);
  border-bottom: var(--stroke) solid var(--hairline);
  transition: background var(--d-fast) var(--ease);
  animation: os-slide-in var(--d-base) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
.intel-c:hover, .intel-c:focus-visible, .intel-c:focus-within { background: var(--surface-2); }
.intel-c:focus-visible {
  outline: var(--stroke) solid var(--ink-4);
  outline-offset: calc(var(--stroke) * -1);
}

/* Una negada sigue estando: es memoria, no papelera. Se lee más
   callada, sin tacharla — no es un error, es un veredicto. */
.intel-c--negada .intel-c__t { color: var(--ink-3); }
.intel-c--negada .intel-c__w { color: var(--ink-4); }

/* Renglón de título con rejilla explícita, y sin variante ancha (regla
   3 del patrón): arriba punto · texto · contador, abajo las acciones
   con el renglón completo. Con flex y `wrap` el punto se quedaba solo
   en la primera línea y el contador en una tercera — y con las
   acciones en el mismo renglón, el texto de la nube caía en una
   columna de 40px, porque `.intel-c__ops` reserva su ancho aunque esté
   invisible. */
.intel-c__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--s-3);
  row-gap: var(--s-2);
  align-items: baseline;
  min-width: 0;
}
.intel-c__top > .r-status { grid-area: 1 / 1; align-self: center; }
.intel-c__t { grid-area: 1 / 2; }
.intel-c__c { grid-area: 1 / 3; align-self: center; }
.intel-c__ops { grid-area: 2 / 1 / 3 / 4; }

.intel-c__t {
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  letter-spacing: var(--tr-tight);
  font-size: var(--t-body);
  line-height: var(--lh-snug);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Cuántas filas del OS la sostienen. Cero no puede existir —una nube
   sin citas no se guarda—, así que este número siempre dice algo. */
.intel-c__c { flex: 0 0 auto; }

.intel-c__w {
  margin: 0;
  color: var(--ink-2);
  line-height: var(--lh-body);
  /* Dos renglones: el porqué es un argumento corto, no un párrafo. El
     texto completo queda en el title. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Con las referencias adentro, la explicación dejó de ser solo un
   argumento: ES la procedencia. Por eso aquí se quita el recorte de dos
   renglones, y no es holgura estética — es corrección.

   Medido a 375 px con un `why` de 208 caracteres: pedía 84 px de alto,
   el recorte dejaba ver 63, y la ÚLTIMA ANCLA caía fuera de la caja.
   Como una cita anclada se resta de la tira de abajo (no se dice dos
   veces), esa referencia no quedaba escondida: quedaba DESAPARECIDA. El
   recorte tenía sentido cuando el porqué era un argumento y las citas
   vivían aparte; con las citas adentro, recortar el párrafo es recortar
   la evidencia.

   No crece sin freno: `PORQUE_MAX` topa el campo en 260 caracteres (300
   en `app/insight.js`), o sea uno o dos renglones en escritorio y cuatro
   o cinco en el peor ancho.

   Una nube VIEJA no entra aquí —no tiene anclas, no lleva la clase— y
   conserva su recorte de dos renglones tal cual: sus citas siguen
   viviendo completas en la tira, así que ahí recortar no pierde nada. */
.intel-c__w--ancla {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* ---------- La referencia anclada en la frase ----------
   La hermana inline de `.intel-ref`, y a propósito NO se le parece: la
   pastilla es evidencia que se enumera, esto es una palabra de la propia
   oración. Un párrafo salpicado de pastillas se lee como barra de
   herramientas y deja de leerse como explicación.

   El subrayado va con `text-decoration` y no con `border-bottom` porque
   la referencia puede partirse entre dos renglones y el borde solo
   subrayaría el último trozo. `--trace` es el token de TRAMA —algo que
   se mira, no que se lee—, que es justo lo que tiene que ser una marca
   que acompaña al texto sin competirle. */
.intel-in {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--trace);
  text-decoration-thickness: var(--stroke);
  text-underline-offset: 0.22em;
  border-radius: var(--r-xs);
  transition: color var(--d-fast) var(--ease),
              background-color var(--d-fast) var(--ease),
              text-decoration-color var(--d-fast) var(--ease);
}

/* Lo secundario se revela, y sin mover el texto: cambian color, fondo y
   punteado; la caja no. Nada de padding ni de sombra a propósito — el
   padding recompondría la frase bajo el cursor, y la sombra la recortaría
   el `overflow: hidden` que el clamp de renglones necesita. */
.intel-in:hover,
.intel-in:focus-visible {
  color: var(--ink);
  background: var(--surface-sunk);
  text-decoration-style: solid;
  text-decoration-color: var(--ink-3);
}
.intel-in:focus-visible { outline: none; }

/* La fila citada ya no está. El nombre guardado se sigue leyendo —eso es
   el punto de guardarlo— y quien dice que es memoria es el trazo, a
   rayas. Una procedencia que miente es peor que una que envejece.

   La tinta es `--ink-3` y NO `--ink-4`, que es lo que usa la pastilla de
   la tira: medido aquí, `--ink-4` deja el nombre en 1.53:1 sobre la
   tarjeta en tema claro, y eso en una pastilla suelta se tolera pero
   dentro de una frase no —es texto que hay que leer, y el propio design
   system separa la TRAMA (`--trace`, algo que se mira) de la TINTA de lo
   secundario (`--ink-3`, algo que se lee)—. El punteado sí se queda en
   `--trace`: ahí la trama es exactamente el trabajo. */
.intel-in--ido {
  color: var(--ink-3);
  text-decoration-style: dashed;
  text-decoration-color: var(--trace);
}
.intel-in--ido:hover,
.intel-in--ido:focus-visible {
  color: var(--ink-2);
  background: none;
  text-decoration-style: dashed;
  text-decoration-color: var(--ink-3);
}

/* Una nota viva se puede abrir; la que no, no finge. */
.intel-in--ir {
  /* La manita se queda AQUÍ a propósito, contra la regla general de que un
     control de macOS usa flecha. La regla vale cuando hay otra señal de que
     algo se pica —un hover, un borde, un fondo—; esto no la tiene, y era su
     única. Quitarla dejó un elemento clicable indistinguible de un rótulo.
     El arreglo de fondo es darle hover y entonces sí volver a la flecha. */
  cursor: pointer;
}

/* Una negada se lee más callada, y sus anclas con ella: si la referencia
   conservara la tinta de una nube viva, el renglón se leería más fuerte
   que la afirmación que lo encabeza. */
.intel-c--negada .intel-in { color: var(--ink-4); }

/* Lo que Robbie dijo al juzgar. Solo existe en una nube ya juzgada, y
   es la mitad conversacional que sobrevive al veredicto. */
.intel-c__note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: 0;
  min-width: 0;
  color: var(--ink-3);
  font-size: var(--t-body-sm);
}
.intel-c__note .r-ico { flex: 0 0 auto; align-self: center; }
/* Dos renglones en vez de una línea recortada, por lo mismo que el
   fragmento de la nota: en 300px una línea no alcanza a decir qué se
   dijo al juzgar. */
.intel-c__nt {
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Lo que se revela ----------
   Mismo velo que LEVER: las acciones (renglón propio, bajo el título)
   y la procedencia (otro renglón). Las dos ocupan su lugar aunque
   estén invisibles, así que la tarjeta mide lo mismo abierta que
   cerrada y la lista no brinca bajo el cursor. */

.intel-veil {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-fast) var(--ease);
}
.intel-c:hover .intel-veil,
.intel-c:focus-within .intel-veil,
.intel-c:focus-visible .intel-veil { opacity: 1; pointer-events: auto; }

/* Con la conversación abierta lo revelado se queda: el cursor va a
   estar dentro del campo, no sobre la tarjeta, y perder de vista los
   botones del veredicto justo cuando se está por decidir es lo
   contrario de lo que la revelación busca. */
.intel-c--abierta .intel-veil { opacity: 1; pointer-events: auto; }

.intel-c__ops {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  min-width: 0;
}

/* ---------- Procedencia: lo que separa un insight de una ocurrencia ----------
   Renglón propio y completo. Mismo tratamiento que `.lv-ref`, y a
   propósito: es la misma evidencia. */

.intel-from {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-1) 0 0;
  min-width: 0;
  min-height: 24px;
}

/* No es un `.r-chip`: un chip dice qué ES algo, y esto es evidencia,
   que tiene que leerse más callada que el texto que sostiene. Alto de
   `.r-index` (24px) para no inventar una cuarta altura de pastilla.

   El techo es `min(34ch, 100%)` y no `34ch` a secas: 34ch de `--t-micro`
   son ~187px, o sea que en una columna de 300 la pastilla se recortaba
   a media evidencia teniendo el renglón entero libre. El `100%` deja
   que use lo que hay; el `34ch` sigue evitando que una sola cita se
   coma un renglón de 900 cuando el panel está arrastrado. */
.intel-ref {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  max-width: min(34ch, 100%);
  min-width: 0;
  height: 24px;
  padding-inline: var(--s-2);
  border: var(--stroke) solid var(--hairline);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
}
.intel-ref .r-ico { flex: 0 0 auto; color: var(--ink-3); }
.intel-ref__t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La fila citada ya no existe en el OS. El label guardado sigue
   legible —eso es el punto de guardarlo— pero el punteado dice que es
   memoria, no un renglón vivo. Una procedencia que miente es peor que
   una que envejece. */
.intel-ref--ido {
  border-style: dashed;
  color: var(--ink-4);
}
.intel-ref--ido .r-ico { color: var(--ink-4); }

/* Una cita que se puede abrir (una nota, una persona) se comporta como
   lo que es. La que no, no finge. */
.intel-ref--ir:hover { border-color: var(--hairline-strong); color: var(--ink); }
.intel-ref--ir:focus-visible {
  outline: var(--stroke) solid var(--ink-4);
  outline-offset: var(--stroke);
}

/* ---------- El veredicto conversacional ----------
   Se abre con un clic, no al hover, así que sí puede crecer: nada se
   mueve bajo el cursor porque el cursor acaba de decidir moverlo.
   Canto punteado a la izquierda, misma familia que la síntesis en
   vuelo: lo de adentro es conversación, no dato guardado. */

.intel-ask {
  margin: var(--s-2) 0 0;
  padding: var(--s-3) 0 0 var(--s-4);
  border-left: var(--stroke-2) dashed var(--hairline-strong);
  display: grid;
  gap: var(--s-3);
  min-width: 0;
  animation: os-slide-in var(--d-base) var(--ease-out) both;
}

.intel-ask__turn { display: grid; gap: var(--s-1); min-width: 0; }

.intel-ask__q {
  margin: 0;
  color: var(--ink);
  font-size: var(--t-body-sm);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.intel-ask__q .r-ico { color: var(--ink-3); margin-inline-end: var(--s-2); }

.intel-ask__a {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Mientras llega, la respuesta se lee igual: no cambia de tipografía a
   media escritura. Lo único que dice que sigue viva es el punto. */
.intel-ask__a:empty { min-height: var(--s-5); }

.intel-ask__form {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
  min-width: 0;
}
/* El campo crece con lo que se escribe, hasta tres renglones. Un
   `input` de una línea obligaba a escribir preguntas de telegrama. */
.intel-ask__in {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  min-height: 34px;
  max-height: calc(var(--s-10) * 2);
  line-height: var(--lh-snug);
  padding-block: var(--s-2);
}
.intel-ask__foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.intel-ask__hint { margin: 0; }

/* ---------- Movimiento reducido ----------
   La animación se apaga completa, no se acorta: el retardo en cascada
   no lo toca la regla global de ron.css y los renglones se quedarían
   invisibles su turno. Con el movimiento apagado lo revelado aparece
   de golpe, que es lo correcto — no se queda escondido. */
@media (prefers-reduced-motion: reduce) {
  .intel-c, .intel-n, .intel-live, .intel-ask { animation: none; }
  .intel-c, .intel-n, .intel-veil, .intel-in, .intel-n__r { transition: none; }
}

/* Sin hover no hay revelación: en táctil lo secundario se queda visible. */
@media (hover: none) {
  .intel-veil, .intel-n__r { opacity: 1; pointer-events: auto; }
}

/* ============================================================
   [[WIKILINKS]] — la marca dentro del texto que se está editando

   Vive en este archivo y no en `app/os.css` por la razón de siempre: el
   editor es de este módulo, y `os.css` es del chasis. El prefijo es
   `.intel-` como todo lo de aquí, aunque el nodo lo escriba
   `app/editor.js`: quien manda es el dueño del estilo, no el del nodo.

   LA REGLA DE ORO DE ESTA PIEZA: NADA DE CAJA. Ni padding, ni border, ni
   font-size distinto, ni display que no sea `inline`. El wikilink vive
   DENTRO de un `contenteditable`, así que cualquier cosa que cambie su
   caja recompone el párrafo mientras se escribe y mueve el caret. Todo lo
   que dice —que es un enlace, que está roto, que se puede abrir— se dice
   con COLOR y con el punteado del subrayado, que no ocupan.

   Es el mismo criterio de `.intel-in` (la referencia inline de una nube),
   y a propósito: son dos marcas de la misma familia —una palabra de la
   oración que además apunta a algo— y dos lenguajes para eso sería el OS
   armado por dos manos. Lo que las distingue es de quién es la marca: la
   de la nube la escribió el motor, ésta la escribió Robbie.
   ============================================================ */
.intel-wl {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--trace);
  text-decoration-thickness: var(--stroke);
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease);
}

/* Los corchetes y el destino de un alias son ANDAMIO, no contenido: siguen
   siendo texto de verdad —el round-trip depende de eso— y se atenúan a
   `--trace`, que es el token de trama. Sin esto, `[[Diseño|el ácido]]` se
   lee con la mitad de los caracteres compitiendo con la frase. */
.intel-wl__b,
.intel-wl__q { color: var(--trace); }

/* El que resuelve invita: al acercarse, el punteado se vuelve el acento.
   El acento aparece SOLO al hover y solo en un enlace, así que no compite
   con la métrica de la vista — la nota abierta es la segunda página del
   panel y ahí no hay otra cifra acentuada. */
.intel-wl--ir:hover,
.intel-wl--ir:focus-visible { text-decoration-color: var(--accent-ink); }

/* El roto se dice con el trazo, no con rojo: no es un error, es un enlace
   a una nota que todavía no existe —un caso normal en un vault— y el
   `title` explica que se guarda igual. `--ink-4` y raya en vez de punto es
   la misma lengua que `.intel-ref--ido`: memoria, no fila viva. */
.intel-wl--roto {
  color: var(--ink-3);
  text-decoration-style: dashed;
  text-decoration-color: var(--ink-4);
}

/* ============================================================
   ```html preview — el marco, y por qué el código no se esconde

   El bloque son DOS cosas apiladas: el fence editable y su vista. El
   código arriba porque es el dato; la vista abajo porque es la lectura.
   El hairline entre los dos es el separador de siempre.

   `resize: vertical` en el marco es deliberado y es la única palanca que
   se le da: una tabla de veinte renglones y un badge de 40px no caben en
   el mismo alto, y adivinarlo midiendo el contenido no se puede — el
   documento es de otro origen (sandbox sin `allow-same-origin`), así que
   NO hay forma de leer su alto desde aquí. Es una limitación del sandbox
   que elegimos, y el precio correcto por no dejar correr scripts.
   ============================================================ */
.intel-prev {
  display: flex;
  flex-direction: column;
  border: var(--stroke) solid var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.intel-prev > .os-b--code { border: 0; border-radius: 0; }
.intel-prev__f {
  display: block;
  width: 100%;
  height: calc(var(--s-10) * 3);
  min-height: var(--s-10);
  border: 0;
  border-top: var(--stroke) solid var(--hairline);
  /* PAPEL CLARO FIJO, en los dos temas, y esto se decidió MIRÁNDOLO en
     cockpit: con `--surface` del tema, un HTML sin `color` declarado —o sea
     todo HTML normal, que hereda el negro del navegador— quedaba negro sobre
     un fondo casi negro. Ilegible.

     Es la regla de la tinta fija del sistema, aplicada al revés: ahí dice que
     un componente con fondo claro fijo lleva `--fixed-ink`; aquí la tinta ya
     es fija —la pone el navegador del marco, y no la podemos remapear porque
     el documento es de otro origen— así que lo que se fija es el PAPEL. Un
     HTML arbitrario da por hecho una página clara, y esa suposición es la que
     hay que honrar. */
  background: var(--fixed-surface);
  resize: vertical;
}

/* ============================================================
   VÍNCULOS Y VERSIONES — el pie de la nota

   Arranca INEXISTENTE: sin enlaces, sin menciones y sin versiones el
   bloque se esconde desde el JS. Lo que se ve son rótulos de sección y
   pastillas, o sea las dos piezas que el módulo ya usa para la
   procedencia de una nube: la misma lengua para «de dónde viene esto».
   ============================================================ */
.intel-linked {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: var(--stroke) solid var(--hairline);
}
.intel-linked__g { display: flex; flex-direction: column; gap: var(--s-2); }
.intel-linked__g .r-eyebrow { margin: 0; }

.intel-vers { list-style: none; margin: 0; padding: 0; }
.intel-vers__i {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 28px;
}
.intel-vers__w { min-width: 0; flex: 1 1 auto; }
/* La restauración se revela, como toda acción de fila. Pisa el cuerpo de la
   nota, así que el gesto es el bote del sistema con otro verbo: se expande y
   pregunta con palabras completas antes de proceder. */
.intel-vers__go { opacity: 0; transition: opacity var(--d-fast) var(--ease); }
.intel-vers__i:hover .intel-vers__go,
.intel-vers__i:focus-within .intel-vers__go { opacity: 1; }

/* ============================================================
   EL DIAGRAMA DE IDEAS

   El lienzo NO reserva alto. Es la otra mitad de «no dibuja sin caja»: con
   un `min-height` puesto, el hueco se ve como un diagrama que no cargó, y
   con el `viewBox` derivado del ancho medido cualquier reserva quedaría
   horneada. Mientras no haya ancho, el nodo mide cero y no se ve.
   ============================================================ */
.intel-diag { min-width: 0; }
.intel-diag__svg { display: block; width: 100%; height: auto; overflow: visible; }
.intel-diag__mas { margin: var(--s-2) 0 0; }

/* La protagonista es la única caja con relleno y con el acento en el canto
   —es el dato que manda de esta vista— y eso lo decide el SVG, no una regla:
   `fill` y `stroke` van en el atributo porque salen del plano. Aquí solo va
   lo que es COMPORTAMIENTO: una vecina se puede picar, la protagonista no
   (ya está seleccionada). Las vecinas van huecas y punteadas cuando no
   están confirmadas — referencia, no dato, la misma decisión que el objetivo
   punteado de la telaraña. */
.intel-diag__idea[data-idea] { cursor: pointer; }
.intel-diag__idea[data-idea] rect { transition: stroke var(--d-fast) var(--ease); }
.intel-diag__idea[data-idea]:hover rect { stroke: var(--ink); }

.intel-diag__src--ir { cursor: pointer; }
.intel-diag__src--ir:hover [fill="none"],
.intel-diag__src--ir:focus-visible [fill="none"] { stroke: var(--accent-ink); }

/* La barra del índice NO es una `.r-toolbar`, y se quitó mirándolo: una
   cápsula de 540 px con un «1/3» de 24 px en medio es una barra vacía que
   parece un error de pintado. Son tres piezas angostas y lo único que hace
   falta es centrarlas. */
.intel-bar--diag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

/* ============================================================
   RESEARCH — la compuerta

   Lo que esta sección tiene que resolver visualmente es una cosa y no
   tres: **que se pueda LEER un paper completo antes de aprobarlo, en un
   panel de 360.** Todo lo de abajo sale de ahí.

   Tres decisiones, y las tres son de la misma familia que Nubes porque es
   el mismo gesto —juzgar con la procedencia a la vista— sobre otro
   contenido. Reutiliza `.intel-c`, `.intel-c__t`, `.intel-c__c`,
   `.intel-list`, `.intel-head`, `.intel-bar`, `.intel-live`, `.intel-err`,
   `.intel-say` y `.intel-blank` tal cual: lo único propio es lo que el
   paper agrega, o sea el renglón de hallazgo y la compuerta.

   1 · LA CABEZA DE LA TARJETA ES UN BOTÓN, no un `div` con un `onclick`.
       Abrir el paper es la acción que precede al veredicto, así que tiene
       que llegar por teclado sin que nadie escriba un manejador de teclas:
       un `<button>` ya trae Enter, Espacio y foco. Hereda la rejilla de
       `.intel-c__top` (punto · texto · contador) más una cuarta columna
       para la flecha.

   2 · EL CUERPO ES UNA LISTA DE RENGLONES «CIFRA · DICE · FUENTE», en ese
       orden. La cifra va en `tabular-nums` y NO en numeral de matriz de
       puntos: el numeral de puntos es de la métrica que manda —los papers
       por aprobar, arriba— y siete cifras grandes dentro de una tarjeta
       serían siete protagonistas, o sea ninguno.

   3 · LA COMPUERTA ES DOS `.r-confirm` Y NADA MÁS. Sin fondo, sin caja,
       sin etiqueta: el componente ya dice todo (icono en reposo, pregunta
       con palabras completas al armarse). Lo único que agrega este archivo
       es el aire de arriba y que se apoyen al inicio.

   Y `[data-confiable="no"]` (ron.css § 33e) le pone el canto punteado al
   cuerpo entero, que es la señal de «esto lo escribió alguien más» en todo
   el OS. Aquí NO se le agrega nada: si la marca necesitara un estilo
   propio por sección, dejaría de ser una señal.
   ============================================================ */

/* La cabeza clicable. `text-align: start` y `background: none` porque un
   `<button>` trae los suyos y aquí es un renglón de lista, no un control. */
.intel-rs__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  column-gap: var(--s-3);
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.intel-rs__top:focus-visible {
  outline: var(--stroke) solid var(--ink-4);
  outline-offset: var(--s-1);
  border-radius: var(--r-sm);
}

/* La flecha se revela como todo lo secundario, y se queda puesta cuando la
   tarjeta está abierta: ahí ya no es una pista, es el estado. */
.intel-rs__caret {
  color: var(--ink-4);
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.intel-rs:hover .intel-rs__caret,
.intel-rs__top:focus-visible .intel-rs__caret,
.intel-c--abierta .intel-rs__caret { opacity: 1; }
.intel-rs__top:hover .intel-rs__caret { color: var(--ink-2); }

/* Un descartado se lee más callado y no tachado: no es un error, es un
   veredicto. Misma regla que `.intel-c--negada` en Nubes. */
.intel-rs[data-rs-estado] { min-width: 0; }

.intel-rs__body {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-2);
  animation: os-slide-in var(--d-base) var(--ease-out) both;
}

/* Los hallazgos. Lista sin viñeta: el hairline de arriba ya separa los
   renglones y una viñeta más un número más un host es un renglón con tres
   cosas peleándose el inicio. */
.intel-rs__hs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-2);
}
.intel-rs__h {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1);
  padding-top: var(--s-2);
  border-top: var(--stroke) solid var(--hairline);
}
.intel-rs__h:first-child { border-top: 0; padding-top: 0; }

/* La cifra. `--t-label` y no más: es el dato del renglón, no el de la
   vista, y crecerla aquí competiría con el numeral de arriba. */
.intel-rs__n {
  justify-self: start;
  font-size: var(--t-label);
  font-weight: var(--fw-medium);
  color: var(--accent-ink);
  letter-spacing: var(--tr-tight);
}
.intel-rs__d {
  min-width: 0;
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  color: var(--ink);
  overflow-wrap: anywhere;
}
/* La fuente: el host, chico y atenuado, con la URL completa en el `title`.
   No es un enlace a propósito (ver `rsCuerpo` en intel.js): esto se lee
   para verificar, no para navegar. */
.intel-rs__f {
  justify-self: start;
  max-width: 100%;
  font-size: var(--t-micro);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: var(--stroke) dotted var(--trace);
}

.intel-rs__inc { margin: 0; color: var(--ink-3); }

/* LO QUE SE QUEDÓ FUERA. Con icono y con oraciones completas: es la
   excepción de la claridad, no clutter — un paper del que se cayeron cuatro
   citas se lee con otra cara. Tono `--warn` en el icono y no en el texto:
   los semánticos son señal, y aquí lo que señala es «mira esto», no «esto
   falló». */
.intel-rs__fuera,
.intel-rs__ver,
.intel-rs__no {
  display: flex;
  align-items: start;
  gap: var(--s-2);
  margin: 0;
  color: var(--ink-3);
  line-height: var(--lh-body);
}
.intel-rs__fuera .r-ico { flex: 0 0 auto; color: var(--warn); margin-top: 2px; }
.intel-rs__ver .r-ico { flex: 0 0 auto; color: var(--ink-4); margin-top: 2px; }
.intel-rs__no .r-status { flex: 0 0 auto; align-self: center; }

/* LA COMPUERTA. Los dos botes, apoyados al inicio y con su aire. No lleva
   fondo ni marco: el componente flota su propio panel al armarse
   (`.r-confirm__ask`, con sombra), y una caja debajo lo haría verse como un
   panel dentro de otro. */
.intel-rs__gate {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding-top: var(--s-2);
  border-top: var(--stroke) solid var(--hairline);
}

/* El botón de detener, dentro del renglón vivo. Se empuja al final para que
   el punto y la etiqueta se lean juntos a la izquierda. */
.intel-live__stop { margin-inline-start: auto; }