/* ============================================================
   Relaciones — estilos locales del módulo. Prefijo .rel-
   Cero overrides de .r-, cero valores crudos de color: todo sale de tokens.

   El dibujo de la red NO vive aquí: lo hace `.r-graph` del design system. De
   este lado solo queda la caja que lo contiene y el respaldo en palabras para
   cuando el componente no está.

   ------------------------------------------------------------
   UN PANEL NO ES UNA PÁGINA, y este módulo lo paga tres veces
   ------------------------------------------------------------

   1 · LA FICHA DE UNA PERSONA DEJÓ DE SER UN CAJÓN QUE TAPA LA PANTALLA.
       Era `position: fixed`, 520 de ancho, del canto de arriba al de abajo,
       en el estrato del velo. Medido con el chasis nuevo: una losa de
       520×800 encima de un panel de 480×760, más ancha que el panel que
       tapaba, con sus esquinas fuera de la caja que flota y el velo
       oscureciendo la conversación —que ahora es el piso del OS y no se
       apaga—. Hoy es la SEGUNDA PÁGINA DEL PANEL: la lista o la persona,
       nunca las dos, en la misma caja. Cero `position`, cero `z-index`,
       cero geometría copiada; el panel ya la pone.

   2 · LA FIGURA SE MIDE CONTRA EL ALTO QUE LE SOBRA, no contra la ventana.
       Es el mismo patrón que la telaraña de Growth y está escrito completo
       en la cabecera de `growth.css`. Lo que se fue con él es
       `--rel-red-fuera: 380px`, una constante medida contra el chasis
       viejo (barra superior 60 + aire de página + métrica + cápsula + dock)
       que en el chasis nuevo no describe nada: ni la barra existe, ni el
       aire de página, ni el dock.

   3 · LOS CORTES MIRAN LA COLUMNA. Un `@media (max-width: 720px)` no se
       cumple nunca dentro del panel: la ventana es ancha y la columna mide
       380–480. Los cortes de abajo son `@container` sobre `#viewRelations`.
   ============================================================ */

/* ---------- El piloto del vidrio delgado ----------
   Robbie: «probemos con este módulo ponerle liquid glass. Que sea como
   transparente el lienzo, con un toque mate, no totalmente glass». El GRADO
   —cuánto papel, cuánto velo, qué pasa con los pozos de adentro— es del sistema
   y vive medido en `tokens.css` + `ron.css § 33a`, porque la pieza que adelgaza
   es el panel y por ese panel abren siete módulos. Lo único que es de
   Relaciones es la DECISIÓN de encenderlo, y es esta regla.

   Va sobre `data-flyout-open`, el estado que ron.js ya escribe en el host, y no
   sobre `#viewRelations`: el papel del panel y el velo del campo se pintan en el
   host y en un hermano de la vista, así que desde adentro no se alcanzan. Cero
   overrides de `.r-`: se prenden cuatro tokens del sistema, ninguno se redefine.

   Para llevárselo a otro módulo: este mismo bloque con su id, o —si algún día el
   shell lo escribe— `data-flyout-glass="thin"` en el host y esta regla se borra. */
[data-flyout-open="relations"] {
  --flyout-frost: var(--surface-frost-thin);
  --flyout-veil:  var(--iris-veil-thin);
  --flyout-sunk:  var(--surface-sunk-frost);
  --flyout-raise: var(--surface-raise-frost);
}

/* ---------- El módulo, dentro del panel ----------
   La cadena de flex existe para que `.rel-red` sepa cuánto alto le sobra, y
   para que la ficha de la persona pueda llenar el panel sin posicionarse.
   `.os-view` ya es un item flex con `min-height: 0`, así que su alto es el
   del panel; de ahí para abajo cada eslabón lo pasa.

   El CONTENEDOR va en la vista y no en `#relRoot`, porque la ficha de la
   persona es hermana de `#relRoot`, no hija: con el contenedor una rama más
   abajo, los cortes de la ficha nunca se consultaban. */
#viewRelations {
  display: flex;
  flex-direction: column;
  min-height: 0;
  container-type: inline-size;
  container-name: rel;
}
#relRoot { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* En una columna flex TODO cede por omisión, y lo que cede se estruja sin
   avisar: medido, la barra de herramientas —que es un contenedor con
   `overflow`, o sea con mínimo automático 0— pasó de 56 px a 18 con la lista
   larga empujando. Aquí se declara al revés: nada cede, y quien crece lo pide
   por su nombre. `:where` deja la especificidad en cero para que la regla de
   cada pieza le gane sin pelear. */
:where(#relRoot) > * { flex: 0 0 auto; }
/* Con la ficha 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—. */
#viewRelations:has(> .rel-side:not([hidden])) > #relRoot { display: none; }

.rel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: var(--s-6);
}
/* La métrica es un .r-lcdrow (flex), no un <p>: no trae margen de párrafo que
   corregir, y el --s-2 que separaba el número de su rótulo se fue con el
   rótulo. Se declara en cero para que quede dicho y no por omisión. */
.rel-metric { margin: 0; }
.rel-stats { display: flex; gap: var(--s-4); margin: 0; }

.rel-bar { margin-bottom: var(--s-5); }
.rel-bar__div { width: var(--stroke); height: 18px; margin: 0; flex: 0 0 auto; }
/* LÁPIDA de `.rel-bar__grow`. Empujaba el alta de una persona al canto derecho
   de la barra; el alta se mudó a la esquina del panel (`.r-fab`) y un elástico
   sin nada detrás no separa nada. */
/* La caja de búsqueda dentro de la barra: 38px empujarían el alto de la
   cápsula. Misma talla que `.gw-in` en Growth, que resolvió lo mismo. */
.rel-bar__q { height: 30px; max-width: 300px; }

/* La lista. Cada fila entra en cascada y solo muestra lo que se opera:
   nombre y cuándo fue el último contacto. El resto vive abajo, atenuado.

   LA FILA ADELGAZÓ, y no es estética: en una columna donde la lista ES el
   contenido —no una tarjeta dentro de un tablero— la fila medía 90 px y ocho
   personas pedían 300 px de rueda a 1280×800. Tres cosas la engordaban y las
   tres eran de la época de la página: el relleno de `--s-4`, el nombre en
   tamaño de encabezado (`--t-h3`) y los `--s-6` que la fila reserva para lo
   que se revela al hover. Con `--s-3`, `--t-body` y `--s-5` la fila mide 78 y
   esas ocho pasan a 208. El nombre sigue en la display, que es lo que lo
   distingue de la fecha; lo que se fue es el peso de titular para algo que es
   un renglón de lista. */
.rel-list { border-top: var(--stroke) solid var(--hairline); }
.rel-p {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1);
  align-items: baseline;
  padding: var(--s-3) 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));
}
.rel-p:hover, .rel-p:focus-visible { background: var(--surface-2); }
.rel-p[aria-current="true"] { background: var(--surface-2); }
.rel-p__n {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  letter-spacing: var(--tr-tight);
  font-size: var(--t-body);
  color: var(--ink);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Relación, intereses y los contadores: se revelan al hover y al foco.
   Con opacidad y espacio ya reservado, así que la lista no salta. «Dónde»
   y «última vez» se fueron: no son un dato de la fila. */
.rel-p__s {
  grid-column: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  min-height: var(--s-5);
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease);
}
.rel-p:hover .rel-p__s, .rel-p:focus-within .rel-p__s, .rel-p:focus-visible .rel-p__s { opacity: 1; }
/* Cuántas notas y cuántos vínculos. Icono + cifra, sin palabra: el símbolo lo
   dice y la palabra vive en el title. */
.rel-p__c { display: inline-flex; align-items: center; gap: var(--s-1); }

/* El estado en blanco se centra en lo que le tocó en vez de colgar del techo:
   en una columna alta, un mensaje corto pegado arriba parece contenido que se
   quedó a medio cargar. */
.rel-blank {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--s-8) var(--s-4);
  text-align: center;
  display: grid;
  gap: var(--s-3);
  justify-items: center;
  align-content: center;
}

/* ---------- Vista de red ----------
   `.r-graph` saca su alto de su ancho (--graph-ar) y pide explícitamente que
   el consumidor NO le fije `height`. Así que el alto se gobierna acotando el
   ANCHO, y el ancho tiene que salir del alto que de verdad queda.

   El alto que de verdad queda ya no se estima: se reparte. `.rel-red` es el
   item que se lleva lo que sobra de la columna del módulo y, por ser
   CONTENEDOR DE TAMAÑO, ese alto se puede leer desde adentro con `100cqh`.
   El marco lo multiplica por `--graph-ar` y el componente hace el resto. Es
   el mismo patrón de la telaraña en Growth, escrito completo allá.

   Lo que se fue: `--rel-red-fuera: 380px`, la reserva medida contra un chasis
   que ya no existe. Una constante así no se puede corregir con otro número
   —el panel se arrastra y cambia de ancho en vivo— y por eso el arreglo no es
   ajustarla sino quitarle el trabajo.

   Los dos topes siguen siendo reales y siguen medidos. Arriba, 880: más ancho
   que eso los nodos flotan en un campo vacío y el dibujo pierde densidad
   (comprobado: con el panel arrastrado a 1200, el dibujo se queda en 880×677).
   Abajo, 260 de alto —338 de ancho—: ahí el componente ya manda a un nombre al
   hover y lo dice él mismo (`data-graph-clipped: 1`, con ocho personas). Es el
   punto donde vale más pagar scroll que seguir encogiendo. */
.rel-red {
  flex: 1 1 auto;
  min-height: var(--rel-red-min);
  container-type: size;
  display: grid;
  place-items: center;
  --rel-red-min: 260px;
  --rel-red-max: 880px;
  /* El sistema acota las figuras del panel por ALTO (`--flyout-fig`, 360 por
     omisión) para que ninguna estrene una barra de scroll. Aquí el ancho ya
     lo garantiza, así que la cota se sube a la que corresponde al tope de
     este módulo: si se quedara en 360, el grafo no pasaría de 468 de ancho ni
     con el panel arrastrado, y el tope medido es 880. Se deriva, no se copia. */
  --flyout-fig: calc(var(--rel-red-max) / var(--graph-ar, 1.3));
}
/* El fallback de `--graph-ar` es el mismo que `ron.js` usa al medir sus
   propias variables: sin él, un token ausente invalida el `calc()` entero y
   el dibujo pierde su tope de una vez, sin decir por qué. */
.rel-red__f {
  width: 100%;
  max-width: min(100%, var(--rel-red-max), calc(100cqh * var(--graph-ar, 1.3)));
}
/* Sin componente no hay figura que medir, así que la caja deja de ser caja de
   figura: `contain: size` haría que el texto del respaldo no cuente para el
   alto y se recortaría solo. Lo pone `compruebaRed()` al sustituir el dibujo. */
.rel-red--sin {
  container-type: normal;
  display: block;
  flex: 0 0 auto;
  min-height: 0;
}

/* ---------- La red en palabras ----------
   Cuando el componente no está. No es un estado de error del OS: es una pieza
   que falta, y se dice completa. Los mismos anillos que el dibujo, en chips
   que sí abren a la persona. */
.rel-sin { display: grid; gap: var(--s-5); max-width: 68ch; }
.rel-sin__a { display: grid; gap: var(--s-2); }
.rel-sin__in { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rel-sin__p {
  border: var(--stroke) solid var(--hairline-strong);
  font-family: inherit;
}
.rel-sin__p:hover, .rel-sin__p:focus-visible { background: var(--surface-2); }

/* ---------- La ficha de la persona: la segunda página del panel ----------

   No flota, no tapa nada y no tiene velo: OCUPA el panel, en lugar de la
   lista (ver el `:has` de arriba). Por eso aquí no hay `position`, ni
   `z-index`, ni ancho, ni sombra, ni borde: los pone el panel, que ya es la
   caja que flota.

   LÁPIDA DEL VELO (`.rel-scrim`). Era `--scrim` sobre la ventana entera y se
   quedó sin razón de ser el día que el centro dejó de ser algo que se tapa:
   hoy oscurecería la conversación, que es el piso del OS y no se apaga. Llevó
   una corrida entera escondido a la fuerza —o sea, imposible de ver— y su
   nodo se borró de `index.html` con estas reglas. Si algún día vuelve un velo
   en este módulo, el que vale es el del sistema (`--scrim`), no otro. */
/* La entrada dejó de ser `os-slide` —64 px de translación horizontal— y pasó a
   `os-slide-in`, la de "algo entra" que ya usan las filas de este módulo. No es
   gusto: dentro del panel esos 64 px son ancho que no existe, y aunque el
   cuerpo del panel los recorta (`overflow-x: hidden`), quedan como desborde
   scrolleable —medido: 44 px de `scrollWidth` de más mientras dura la
   animación— en un OS que no tiene scroll horizontal en ningún lado. Y dice
   mejor lo que pasa: no entró otro panel, cambió el contenido de este. */
.rel-side {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  animation: os-slide-in var(--d-base) var(--ease-out);
}
/* Ya no es una cabecera de panel: es el renglón que devuelve a la lista y
   ofrece el bote. Sin alto fijo ni relleno lateral —el cuerpo del panel ya
   pone el suyo— y el hairline se queda porque separa la ficha de su barra. */
.rel-side__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: var(--stroke) solid var(--hairline);
}
.rel-side__id { opacity: 0; transition: opacity var(--d-fast) var(--ease); }
.rel-side__top:hover .rel-side__id, .rel-side__top:focus-within .rel-side__id { opacity: 1; }
/* Lo único que scrollea de la ficha, y por eso el cuerpo del panel no tiene
   que hacerlo: la ficha mide exactamente el panel. El relleno lateral se fue
   por la misma razón que el de la cabecera. */
.rel-side__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--s-5) 0 var(--s-8);
  scrollbar-width: thin;
}

/* El nombre baja de `--t-h2` a `--t-h3`: en una columna de 380 un nombre
   largo en tamaño de titular se partía en dos renglones y empujaba todo el
   expediente hacia abajo. Sigue siendo lo más grande de la ficha. */
.rel-name {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  letter-spacing: var(--tr-tight);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
  padding: 0;
  margin-bottom: var(--s-4);
}
.rel-name:focus { outline: none; }

.rel-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.rel-f { display: grid; gap: var(--s-2); align-content: start; }
/* «De dónde salió» se lleva las dos columnas: se llena con una frase
   —«el proyecto TeleAzul»— y en los 170 px de media reja se recortaría
   sin decirlo. En una columna sola la regla no hace nada y no estorba. */
.rel-f--wide { grid-column: 1 / -1; }

/* El resumen que escribió el motor. Un párrafo, sin título: el texto ES
   el dato. El beam se prende solo mientras piensa. Las nubes por juzgar
   van debajo, calladas, con el veredicto al hover. */
.rel-sum {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.rel-sum__t {
  margin: 0;
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  color: var(--ink);
  text-align: left;
}
.rel-sum__t--ir {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  color: var(--ink);
  cursor: pointer;
}
.rel-sum__t--ir:hover, .rel-sum__t--ir:focus-visible { text-decoration: underline; }
.rel-sum__mas { margin: 0; }
.rel-sum__n { display: grid; gap: var(--s-1); }
.rel-sum__i {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.rel-sum__nt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--t-body-sm);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rel-sum [data-rel-run] { justify-self: start; }
.rel-sum__i .r-icon-btn { opacity: 0; pointer-events: none; }
.rel-sum__i:hover .r-icon-btn, .rel-sum__i:focus-within .r-icon-btn {
  opacity: 1;
  pointer-events: auto;
}

/* Registrar contacto: tres botones. Es la acción que se repite —y la única
   que alimenta la cercanía— así que vive arriba y no se esconde. Sin cifra
   de «última vez»: eso lo dice la bitácora. */
.rel-touch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--surface-sunk);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-5);
}

.rel-b { margin-bottom: var(--s-5); }
.rel-b__in { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); align-items: center; }

/* Un chip con acciones adentro: el nombre lleva a algún lado y la × quita.
   El chip pone la pastilla; estos dos solo son texto e icono sin caja propia. */
.rel-chip { padding-inline-end: var(--s-1); }
.rel-chip__go {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.rel-chip__go:hover, .rel-chip__go:focus-visible { text-decoration: underline; }

/* La × de quitar: icono del set, no el carácter. Se revela con su fila —lo
   secundario no vive puesto— y el ancho ya está reservado para que nada salte
   al aparecer. */
.rel-x {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--s-5);
  height: var(--s-5);
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.rel-chip:hover .rel-x, .rel-chip:focus-within .rel-x,
.rel-note:hover .rel-x, .rel-note:focus-within .rel-x,
.rel-pact__i:hover .rel-x, .rel-pact__i:focus-within .rel-x { opacity: 1; pointer-events: auto; }
.rel-x:hover, .rel-x:focus-visible { color: var(--crit); }

/* ---------- Compromisos ----------
   Dos renglones, uno por dirección. La etiqueta de cada uno es lo que dice para
   qué lado va la deuda —no hay glifo que lo diga sin marco de referencia, ver
   `PACTOS` en relations.js— y su disparador de alta va al final del mismo
   renglón: pegado a la palabra que le da sentido, y sin gastar una línea propia.

   El bloque cabe apretado a propósito: dos rótulos y dos `+` son cuatro piezas
   de 20 px en una ficha que casi siempre va a tener cero o un compromiso. Con
   `--s-1` entre renglones, un compromiso mide 26 px y los dos rótulos 34 en
   total; el bloque vacío pesa lo mismo que el de Intereses vacío. */
.rel-pacts { display: grid; gap: var(--s-2); }
.rel-pact { display: grid; gap: var(--s-1); }
/* El rótulo a la izquierda, el alta a la derecha. `space-between` y no un
   empujón con `margin-left: auto` porque son exactamente dos hijos. */
.rel-pact__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: var(--s-6);
}
.rel-pact__l { display: grid; gap: var(--s-1); }
/* La fila: casilla, texto, fecha y la × que se revela. Misma anatomía que un
   paso de Growth (`gw-step`) y que una nota de aquí (`rel-note`) — el hairline
   entre filas, nada de zebra, y la última sin línea. */
.rel-pact__i {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-block: var(--s-1);
  border-bottom: var(--stroke) solid var(--hairline);
}
.rel-pact__i:last-child { border-bottom: 0; }
.rel-pact__t {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-body-sm);
  text-align: left;
}
.rel-pact__t:hover, .rel-pact__t:focus-visible { text-decoration: underline; }
/* Sin Workspace cargado no hay puerta, y no se finge: la fila se lee y no
   invita a picarle. Misma regla que `.rel-note__go--mudo`. */
.rel-pact__t--mudo { cursor: default; }
.rel-pact__t--mudo:hover { text-decoration: none; }
.rel-pact__d { flex: 0 0 auto; }
/* Cumplido: se atenúa y se tacha. No se esconde —es historia de la relación— y
   no se colorea: un compromiso cumplido no es un estado semántico, es pasado. */
.rel-pact__i--ok .rel-pact__t { color: var(--ink-3); text-decoration: line-through; }
/* OJO: `font: inherit` NO va aquí, y es la trampa que este botón ya pagó una
   vez. El shorthand incluye `font-size`, así que reseteaba el `--t-micro` que
   `.r-micro` le pone al nodo —esta hoja carga después de `ron.css`— y el
   interruptor salía en tamaño de cuerpo, más grande que los rótulos que
   acompaña. Solo se hereda la familia; el tamaño, el peso y el tracking son de
   la clase del sistema. */
.rel-pact__mas {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
}
.rel-pact__mas:hover, .rel-pact__mas:focus-visible { color: var(--ink); }

/* ---------- Notas de la persona ----------
   Una fila por nota: título y cuándo se tocó. Son notas del OS, así que la
   fila lleva a Intelligence; aquí solo se listan. */
.rel-notes { display: grid; gap: var(--s-1); width: 100%; margin-top: var(--s-2); }
.rel-note {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border-bottom: var(--stroke) solid var(--hairline);
}
.rel-note:last-of-type { border-bottom: 0; }
.rel-note__go {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
/* Sin Intelligence cargado no hay puerta, y no se finge: la fila se lee y no
   invita a picarle. Misma regla que `destino()` en LEVER. */
.rel-note__go--mudo { cursor: default; }
.rel-note__t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-body-sm);
  color: var(--ink);
}
.rel-note__go:hover .rel-note__t, .rel-note__go:focus-visible .rel-note__t { text-decoration: underline; }
.rel-note__go > :last-child { margin-left: auto; }

/* Contactos: una línea por registro, lo más nuevo arriba. */
.rel-log { display: grid; gap: var(--s-1); width: 100%; margin-top: var(--s-2); }
.rel-log__i {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: var(--s-2);
  border-bottom: var(--stroke) solid var(--hairline);
}
.rel-log__i:last-child { border-bottom: 0; }
.rel-log__i .r-status { align-self: center; }
.rel-log__i > :last-child { margin-left: auto; }
.rel-log__mas { margin: var(--s-2) 0 0; }

/* El texto suelto de antes: se lee, no se edita, y tiene una sola acción. */
.rel-legado__in { align-items: flex-start; flex-wrap: nowrap; }
.rel-legado__t {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: var(--s-3);
  background: var(--surface-sunk);
  border-radius: var(--r-lg);
  color: var(--ink-2);
  white-space: pre-wrap;
}

/* Altas: el `.r-capture` del sistema en un bloque propio. El bloque existe para
   no declarar nada sobre `.r-*` —el componente es `inline-grid` y su línea
   arrastra interlineado— y porque en la barra y en `.rel-b__in`, que son flex,
   un item con caja propia se alinea sin pedir nada. La caja del flujo es la del
   disparador, 28×28, y no cambia al expandirse: el campo va en la capa
   superior. Por eso ni la barra ni la fila de chips se reacomodan al abrirlo. */
.rel-cap { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .rel-p, .rel-side { animation: none; }
  .rel-p, .rel-p__s, .rel-side__id, .rel-x { transition: none; }
}

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

/* ---------- Angosto ----------
   El corte mira la COLUMNA. 380 es el mínimo declarado del módulo, así que va
   justo encima —a 420— para que el mínimo caiga completo del lado apretado y
   el cómodo (480) no.

   `.rel-meta` en dos columnas a 380 deja cada campo en 170px, y "amigo de la
   universidad" no cabe en 170: se recortaba sin decirlo. Uno por renglón. */
@container rel (max-width: 420px) {
  .rel-head { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .rel-meta { grid-template-columns: minmax(0, 1fr); }
  /* La barra pide 347 px en una caja de 336 y el único que cede es el campo de
     búsqueda: medido, se quedaba en 34 px. Se recuperan los 71 que faltan
     quitando lo que menos falta: la palabra del orden —el icono y el `title`
     la siguen diciendo— y el filete que separaba la vista de la búsqueda, que
     con dos piezas menos ya no separa nada. El piso del campo se declara para
     que nadie vuelva a pagarlo él: por debajo de 5.5rem no cabe ni el
     placeholder. */
  .rel-bar__ord { display: none; }
  .rel-bar__div { display: none; }
  .rel-bar__q { min-width: 5.5rem; }
}