/* ═══════════════════════════════════════════════════════════════════════════════
   ▓ COMPONENTE · Registro de actividad — gemelo vanilla ▓
   v0.2 · 2026-08-26. Ficha: `design-system/COMPONENTE_REGISTRO_ACTIVIDAD.md`

   Implementa el handoff APROBADO `plans/design_handoff_registro_actividad/`
   (20 ago 2026 · «1c · agrupado por día, sin iconos»), que decía en su cabecera:
   *«Reemplaza: la versión vigente — fila con cuadro de tinte de 30 px + icono»*.

   ⛔ POR QUÉ ESTO LLEGÓ UN MES TARDE, y la lección no es de este componente.
   `DECISION-FUENTE: Ricardo, 2026-08-26 — «Estoy viendo en la vitrina el componente
   de registro actividad y no es el del handoff.»` El handoff estaba aprobado y
   exportado desde el 20-ago y el catálogo siguió sirviendo la versión vieja treinta
   y siete días. *La vitrina no estaba mal: enseñaba fielmente un catálogo atrasado.*
   Y una sesión del 25-ago llegó a listar «el cuadro del icono» como una decisión
   abierta de Ricardo, cuando ya estaba decidida. **No era una decisión pendiente,
   era una implementación pendiente** — se parecen mucho desde dentro, porque en las
   dos hay algo sin hacer; la diferencia es quién debe actuar.

   LOS TRES MOVIMIENTOS (handoff §1):
     1. FUERA EL ICONO Y SU CUADRO DE TINTE — desaparecen el cuadro de 30×30 con
        `--color-<tono>-tint`, el glifo de 16 px y, con ellos, la prop `icono`. «Sin
        iconos» aplica TAMBIÉN a la cabecera, no sólo a las filas.
     2. LA FECHA SALE DE LA FILA y se vuelve encabezado de grupo («Hoy · Ayer ·
        14 ago»). La fila ya sólo lleva HORA: nunca «Ayer 23:59», porque el día lo
        acaba de decir la banda.
     3. LA FILA DEJA DE SER TARJETA y pasa a ser RENGLÓN: sin radio, sin hover,
        separada de la siguiente por una línea de un pelo.

   Y toda la semántica de tono pasa a un PUNTO DE 6 px — el `Dot` del catálogo, sin
   un solo override de color. El texto queda en dos grises y **no hay texto de color
   en ningún estado**.

   ⛔ NO SABE QUÉ SIGNIFICA NADA DE LO QUE PINTA, y sigue siendo toda la cosecha. El
   módulo entrega el tono, el texto, la hora y el día YA ELEGIDOS y YA ESCRITOS.

   ⛔ Y NO INVENTA UN ACTOR. Si el módulo no manda `quién`, aquí no se pinta nada.

   ⛔ NO ES UN Menu NI UN AccountMenu. Los dos son listas de ACCIONES: se pulsan y
   algo pasa. Éste es un panel de LECTURA — sus renglones no se pulsan, y el único
   control que tiene vive en el pie. En v0.2 esto se nota más, no menos: al retirarse
   el hover, la fila deja de prometer un clic que nunca existió.

   ⛔ NO DIBUJA SUS ESTADOS: LES DEJA SITIO. Vacío, cargando y error se montan dentro
   de `.exds-rega-estado` con el `EmptyState` / `Skeleton` del catálogo.

   REQUISITOS DEL ANFITRIÓN — los cinco, o se ve mal en silencio:
     1. Los tokens del canon (`design-system/colors_and_type.css`).
     2. Un reinicio con `box-sizing: border-box`.
     3. La hoja del `Dot` (`componentes/dot/dot.css`) — ⭐ NUEVO en v0.2: el punto de
        tono ES el `Dot` canónico, no una copia suya.
     4. La hoja de la `BandaGrupo` (`componentes/banda-grupo/banda-grupo.css`) —
        ⭐ NUEVO en v0.2: la banda de día ES la franja canónica. Ver abajo.
     5. El `EmptyState`/`Skeleton` y el `Button variant="link" size="sm"` de tu app.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══ EL PANEL — CASCARÓN IDÉNTICO A v0.1, NO SE TOCA ════════════════════════════
   El handoff §2.1 lo declara explícitamente: *«Cascarón (idéntico a producción — no
   tocar)»*. Se respeta al pie de la letra. **Cambiar lo que un handoff declara
   intacto no es implementarlo: es rediseñarlo.**

   El ancho es el del catálogo, no el del handoff original de agosto. Aquél escribía
   380; el canon declara TRES anchos de panel colgante y ninguno es 380
   (`--w-menu-ancho` 360 es el del hermano que cuelga de esta misma barra). GANA EL
   CATÁLOGO (INC-210). */
.exds-rega {
  width: var(--w-menu-ancho, 360px);
  max-width: 92vw;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: var(--font-sans);

  /* ⭐ EL CANALÓN DE LA BANDA DE GRUPO, y es lo ÚNICO que hizo falta para poder reusar
     `BandaGrupo` en vez de redibujarla. La franja canónica vive por defecto en un cajón
     de 20 px de canalón (`--space-5`); este panel mide 360 y sus filas van a 16, así que
     la banda tiene que ir a 16 o se ve un escalón. Se dice con una variable en vez de
     con un override de `padding`: *el canalón de una franja a sangre no es un número de
     la franja, es el del anfitrión donde vive* — el mismo argumento que ya sostiene su
     `line-height: inherit`. Cero cambio visual en los otros dos anfitriones: no ponen
     la variable y siguen en 20. */
  --exds-banda-gutter: var(--space-4);

  /* Cuelga de un botón de la barra: crece desde su esquina. */
  transform-origin: top right;

  /* ⛔ EL GESTO DE ENTRADA ES EL DEL CATÁLOGO. El catálogo tiene HOMOLOGADO
     (2026-08-06) el gesto de «un desplegable que cuelga de un botón»: 120 ms
     `--motion-fast`, `--ease-default`, creciendo desde su esquina. Es el de `Menu` y
     el de `AccountMenu`. *Un componente no elige milisegundos: elige un PAPEL*
     (papel 2, apertura y cierre · `COMPONENTE_MOVIMIENTO.md`). */
  animation: exds-rega-in var(--motion-fast) var(--ease-default) both;
}

@keyframes exds-rega-in {
  from { opacity: 0; transform: scale(.92) translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ═══ SIN MARCO · LA PIEZA VIVE DENTRO DE OTRO PANEL ═════════════════════════════
   `data-marco="ninguno"` — el MISMO nombre y la MISMA semántica que el prop `marco` que
   ya llevan `Tabla`, `Toolbar` y `Shell` desde la cosecha de Contactos del 2026-08-12.
   **El default sigue siendo CON marco: sin el atributo no se mueve un píxel.**

   ⛔ POR QUÉ, medido por el handoff de Facturación el 2026-08-20 (§4.16 y §4.25):
     · Anidada en un cajón de 420 px la pieza traía su propio borde, su radio y su
       sombra — la TERCERA caja. *Cada marco anidado se come el sitio del dato.*
     · Y la cabecera repetía el nombre que la solapa acababa de decir: **45 px medidos**
       de un panel de 420 gastados en decirlo dos veces.

   ⛔ EL PIE NO SE VA CON EL MARCO. No es cromo: es la única salida a la bitácora
   completa, y esconderla dejaría a la pieza sin su único control.

   ⚠ EL NOMBRE ACCESIBLE ES DEL ANFITRIÓN. Al esconder la cabecera desaparece el nodo al
   que apunta el `aria-labelledby` de la lista: quien monte así **debe** poner un
   `aria-label` en `.exds-rega-lista`. Una referencia rota deja la región sin nombre y el
   navegador no avisa. */
.exds-rega[data-marco="ninguno"] {
  width: 100%;
  max-width: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Quien se abre es el panel que la contiene, no ella. Dos aperturas encadenadas se leen
     como un tartamudeo, no como una entrada: *el movimiento es del que aparece.* */
  animation: none;
}

.exds-rega[data-marco="ninguno"] > .exds-rega-cab { display: none; }

/* ⛔ SIN CABECERA, LA PRIMERA BANDA SÍ LLEVA SU FILETE DE ARRIBA. La regla de abajo lo
   quita porque la cabecera ya puso esa línea y si no se ve doble; anidada no hay cabecera
   que la ponga, así que quitarla dejaría el primer grupo sin su borde superior y la banda
   flotando contra lo que tenga encima. */
.exds-rega[data-marco="ninguno"] .exds-rega-lista > .exds-cajon-banda:first-child {
  border-top: 1px solid var(--color-border-subtle);
}

/* ═══ LA CABECERA ════════════════════════════════════════════════════════════════
   ⛔ SIN ICONO EN v0.2. El handoff §2.2 lo dice con todas las letras: *«Se elimina el
   `Icono name="rotate-ccw"` de la cabecera. Sin iconos aplica también aquí, no sólo a
   las filas.»* Con él se va `.exds-rega-id` (el bloque que agrupaba icono + título) y
   `.exds-rega-ico`, que ya no tienen a quién agrupar. */
.exds-rega-cab {
  display: flex;
  /* ⭐ v0.2 · era `flex-start`. Sin icono no queda ninguna CAJA que alinear: quedan dos
     TEXTOS, y dos textos se alinean por su base, no por su borde superior. */
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3-5) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.exds-rega-tit {
  font: var(--fw-semibold) var(--fs-body) var(--font-sans);
  color: var(--fg1);
  line-height: 1.3;
}

/* ⛔ EL RÓTULO DEL MÓDULO — RETIRADO DE LA PANTALLA. `DECISION-FUENTE: Ricardo
   2026-08-17 — «sin subtítulos (antes)».` Se le enseñaron las dos versiones renderizadas
   y eligió la cabecera limpia. La regla se queda escrita, no borrada, para que nadie lo
   devuelva creyendo que falta: **`moduleLabel` NO se pinta**; viaja como `aria-label` de
   la lista, así que el módulo conserva su canal y quien no ve la pantalla oye dónde está.
   *Quitar el dibujo no es motivo para desconectar el dato — confundir las dos cosas es
   como nació el prop muerto que originó esta cosecha.*
.exds-rega-rot { RETIRADA · no reintroducir sin decisión suya } */

/* El conteo, con la receta de `.t-eyebrow` del canon: 11 · peso 500 · versales ·
   `--tracking-eyebrow` (.12em). */
.exds-rega-n {
  flex: none;
  font: var(--fw-medium) var(--fs-eyebrow) var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg3);
  /* Cifras tabulares: el número cambia con cada carga y sin esto la línea baila. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* ⚠ EXPLÍCITA A PROPÓSITO, y no es cosmética: el atajo `font:` de arriba RESETEA la
     interlínea a `normal`, mientras el kit la HEREDA del canon (1,55). Medido el
     2026-08-17: el mismo renglón medía 15 px en el gemelo y 18,6 px en el kit — dos
     implementaciones de la misma pieza discrepando en silencio, que es justo lo que
     `lint_paridad_gemelos` existe para cazar. Se escribe en las dos.
     ⛔ SIGUE HACIENDO FALTA EN v0.2, y es el mismo atajo el que muerde: el handoff lo
     volvió a cazar por su cuenta (§2.2) sin saber que ya estaba anotado aquí. *Un
     defecto que dos auditorías independientes encuentran por separado no es un
     descuido: es una trampa del lenguaje.* */
  line-height: 1.35;
  /* ⛔ v0.2 retira el `padding-top: --space-0-5`. Existía para compensar el
     `align-items: flex-start` de la cabecera vieja; con `baseline` sobra, y dejarlo
     empujaría el conteo medio píxel por debajo de la base del título. */
}

/* ═══ LA LISTA ═══════════════════════════════════════════════════════════════════
   El alto máximo es una MEDIDA declarada, no un token: el catálogo no tiene escala de
   alturas de panel (el `Menu` tampoco). 360 es el del handoff y se conserva. */
.exds-rega-lista {
  max-height: 360px;
  overflow-y: auto;
  /* ⭐ v0.2 · era `--space-1-5` (6). **Las bandas de grupo y las líneas divisorias tienen
     que llegar al borde**: con relleno quedaban flotando en mitad del panel y la franja
     dejaba de leerse como un cambio de plano. Handoff §2.5. */
  padding: 0;
}

/* ⛔ LA LISTA SE ALCANZA CON EL TECLADO, Y SE VE QUE SE ALCANZÓ.
   Hallado EJECUTANDO el 2026-08-17: Chrome hace focusable por su cuenta toda región que
   desplaza —el primer `Tab` de la página caía aquí— y **no pintaba ningún foco**
   (`outline: none`), así que el usuario de teclado no sabía dónde estaba. Firefox, en
   cambio, no la hace focusable sola: sin el `tabindex` explícito del marcado, ahí la
   lista **no se puede desplazar con el teclado**. Las dos mitades del defecto se arreglan
   igual: `tabindex="0"` + nombre accesible en el marcado (ver README) y este contorno.
   El desplazamiento va hacia DENTRO (`offset` negativo) porque el panel recorta.
   ⛔ Los cuatro se MANTIENEN TAL CUAL en v0.2 — el handoff §2.5 lo pide explícitamente. */
.exds-rega-lista:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

/* La barra de desplazamiento, fina y del color del borde. El aro blanco de 3 px es lo que
   la separa del contenido; sin él el pulgar toca el texto. */
.exds-rega-lista::-webkit-scrollbar { width: 9px; }
.exds-rega-lista::-webkit-scrollbar-thumb {
  background: var(--color-border-default);
  border-radius: var(--radius-pill);
  border: 3px solid var(--color-surface);
}

/* ═══ LA BANDA DE DÍA — ES `BandaGrupo`, NO UNA COPIA SUYA ═══════════════════════
   ⭐ NUEVA EN v0.2, y aquí hay un hallazgo que el handoff no podía tener.

   El handoff §4 declaró el encabezado de grupo como *«composición con tokens existentes
   (`--color-bg-subtle`, `--color-border-subtle`, `--fs-eyebrow`, `--tracking-eyebrow`),
   no piezas nuevas»*. **Era verdad el 20 de agosto y dejó de serlo el 25**, cuando la
   misma franja se cosechó al catálogo como `BandaGrupo` (`.exds-cajon-banda`) — la de
   «Hoy / Ayer / Esta semana» del cajón de notificaciones, la de «Cuenta / Acceso» de
   ajustes y la de «Detalle» de Facturación.

   ⛔ IMPLEMENTAR EL §4 AL PIE DE LA LETRA HABRÍA DIBUJADO A MANO UNA PIEZA CANÓNICA DE UN
   DÍA DE ANTIGÜEDAD, y habría sido la TERCERA copia de la misma franja. Es exactamente el
   defecto que `gate_composicion` existe para cazar, y el handoff lo habría inducido sin
   mentir. *Un handoff es una FOTOGRAFÍA del catálogo del día que se exportó, y la parte
   que caduca primero es la que dice «esto todavía no es una pieza».*

   Así que aquí no hay ninguna regla de dibujo: se monta `.exds-cajon-banda` y lo único
   que pone este anfitrión es su canalón (arriba, en `--exds-banda-gutter`). */

/* ⛔ LA PRIMERA BANDA NO LLEVA FILETE DE ARRIBA — lo pide el handoff §2.3 y tiene motivo
   visible: la cabecera ya puso su borde inferior justo encima, y las dos juntas dibujan
   una línea DOBLE de 2 px que se lee como un error de montaje. */
.exds-rega-lista > .exds-cajon-banda:first-child { border-top: 0; }

/* ═══ EL RENGLÓN — YA NO ES UNA TARJETA ══════════════════════════════════════════
   ⭐ v0.2 · el tercer movimiento del handoff. Antes: radio 10, relleno 10, hueco 12 y
   hover a `--color-bg-subtle`, dentro de una lista con relleno 6. Ahora: una rejilla de
   tres columnas a sangre, separada por una línea de un pelo.

   ⛔ NO SE PULSA, Y AHORA ADEMÁS NO LO PARECE. Es una línea de lectura, no una acción:
   sin `cursor:pointer`, sin `tabindex`, sin manejador — y **sin hover**. El de v0.1
   existía porque la fila PARECÍA tarjeta; al volverse renglón, un fondo al pasar el ratón
   promete un clic que no hay. *Retirar el hover no es quitar una comodidad: es dejar de
   mentir.*

   Las dos medidas de la primera columna NO son valores a ojo: `--dot-sm` (6) y
   `--dot-gap-sm` (10) son la pareja que el canon de `Dot` define — la separación es
   1,5 × el diámetro, redondeada a la escala de espacio. */
.exds-rega-fila {
  display: grid;
  grid-template-columns: var(--dot-sm, 6px) 1fr auto;
  align-items: start;
  gap: var(--dot-gap-sm, 10px);
  padding: var(--space-2-5) var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

/* ⛔ LA PRIMERA FILA DE CADA GRUPO NO LLEVA SU LÍNEA: la banda que tiene justo encima ya
   puso su filete inferior. Sin esto, cada cambio de día dibuja una línea doble — el mismo
   defecto que la regla de la primera banda, un renglón más abajo. */
.exds-rega-fila:first-child,
.exds-cajon-banda + .exds-rega-fila { border-top: 0; }

/* ═══ EL PUNTO DE TONO — ES EL `Dot`, SIN OVERRIDE DE COLOR ══════════════════════
   ⭐ v0.2. Toda la semántica de tono vive aquí, y esta hoja NO sabe de colores: monta
   `<span class="exds-dot" data-size="sm" data-tono="…">` y el `Dot` resuelve el suyo.

   ⛔ NI UN SOLO OVERRIDE, y merece decirse porque el demo del handoff SÍ traía uno. El
   20-ago el catálogo aún decía que el punto iba en TINTA, así que el demo sobrescribía
   `background` con el color base para enseñar lo que Ricardo había pedido esa mañana. Ese
   mismo día, por la tarde, él lo decidió para el catálogo entero: **el `Dot` ya vive en
   color base sobre lienzo** (`COMPONENTE_DOT.md` §1-bis). *Copiar hoy aquel override
   sería implementar el ANDAMIO del handoff en vez de su intención.*

   ⛔ Y LA TRADUCCIÓN tono → `Dot` es del marcado, no de esta hoja (handoff §4.2):
   success→`validado` · info→`info` · notice→`inactivo` · warning→`atencion` ·
   error→`problema`. Lo hace el módulo que monta, igual que ya elegía el tono.

   Lo único de esta hoja es bajarlo al centro óptico de la primera línea: la acción mide
   13 × 1,35 ≈ 17,5, y 6 px de margen dejan el punto en su mitad. */
.exds-rega-fila > .exds-dot { margin-top: var(--space-1-5); }

/* ═══ EL TEXTO DEL RENGLÓN ═══════════════════════════════════════════════════════ */
.exds-rega-cuerpo { min-width: 0; }

/* Qué pasó: el verbo en semibold, el complemento en tinta secundaria, EN LA MISMA LÍNEA.
   Van juntos a propósito — «Contrato firmado» y «por ambas partes» son una sola frase, y
   partirla en dos renglones la convierte en dos datos que hay que volver a unir. */
.exds-rega-accion {
  font: var(--fw-regular) var(--fs-body-sm) var(--font-sans);
  color: var(--fg2);
  line-height: 1.35;
}
.exds-rega-accion > b,
.exds-rega-accion > strong {
  font-weight: var(--fw-semibold);
  color: var(--fg1);
}

/* ═══ QUIÉN — SOLO, EN SU RENGLÓN ════════════════════════════════════════════════
   ⭐ v0.2 · sustituye a `.exds-rega-meta`, que juntaba autor y hora con un separador de
   3 px entre medias. La hora se fue a la tercera columna, así que aquí ya no hay nada que
   separar: **se van la disposición en fila, el hueco y el punto separador**. */
.exds-rega-user {
  margin-top: var(--space-0-5);
  font: var(--fw-regular) var(--fs-caption) var(--font-sans);
  color: var(--fg3);
  /* Explícita, por lo mismo que el conteo: sin ella el gemelo y el kit medían distinto. */
  line-height: 1.35;
}

/* ═══ CUÁNDO — TERCERA COLUMNA, Y SÓLO LA HORA ══════════════════════════════════
   La hora llega YA ESCRITA por el módulo: la pieza no sabe qué día es hoy ni cómo se
   escribe una fecha. ⛔ En v0.2 es **sólo la hora** («10:42»), nunca «Ayer 23:59»: el día
   lo acaba de decir la banda, y repetirlo es el mismo dato en dos sitios.

   ⛔ EL 1,5 DE INTERLÍNEA ES UN CÁLCULO, NO UN GUSTO, y por eso no es `1.35` como sus
   vecinos: así su primera línea base cae exactamente en la de la acción — 13 × 1,35 =
   17,55 ≈ 12 × 1,5 = 18. Igualarlo a 1,35 subiría la hora 1,2 px sobre el verbo, que es
   justo la clase de desalineación que se ve sin poder nombrarla. */
.exds-rega-hora {
  font: var(--fw-regular) var(--fs-caption) var(--font-sans);
  color: var(--fg3);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ═══ EL SITIO DE LOS TRES ESTADOS ═══════════════════════════════════════════════
   Vacío, cargando y error se montan AQUÍ DENTRO con las piezas del catálogo
   (`EmptyState size="sm"` · `Skeleton`). Esta hoja sólo pone el sitio y el relleno: el
   `sm` existe justamente porque un estado `md` dentro de un panel de 360 se come el
   panel (`COMPONENTE_ESTADOS.md`, criterio del `Search`).

   ⛔ EL ESQUELETO VA SIN AVATAR EN v0.2 (`avatar={false}`), y es del marcado, no de aquí:
   v0.1 pasaba `avatar` en `true` y dibujaba el círculo del icono **que ya no existe**, así
   que el esqueleto reservaba un sitio que la lista real no usa. *Un esqueleto que promete
   una forma distinta de la que llega es peor que no tener esqueleto.* Handoff §2.6. */
.exds-rega-estado { padding: var(--space-2) var(--space-2) var(--space-3); }

/* ═══ EL PIE — SIN CAMBIOS EN v0.2 ═══════════════════════════════════════════════
   ⛔ El disparador es un BOTÓN DE VERDAD, y esta hoja no lo dibuja: es el
   `Button variant="link" size="sm"` de tu app. El `link` del catálogo **ya es neutro**
   (tinta `--fg1`, subrayado sólo al hover): no lleva azul de acento y no necesita ningún
   override. *Si en la implementación sale azul, es que se usó un `<a>` suelto en vez del
   `Button`.* Y **el texto nunca es verde** (regla dura del 2026-07-16; medido: `#16904E`
   sobre blanco = 4,09:1, por debajo del 4,5:1 de AA). */
.exds-rega-pie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-2-5) var(--space-3-5);
  border-top: 1px solid var(--color-border-subtle);
}

/* ═══ MOVIMIENTO APAGADO, SIN EXCEPCIÓN ══════════════════════════════════════════
   `gate_reduced_motion.js` lo exige sin excepción, y el kit lleva la misma guarda: dos
   implementaciones de la misma pieza y sólo una medida es exactamente donde se esconden
   estos defectos (cazado el 2026-08-17 en las tres piezas de filtro).

   ⚠ En v0.2 sólo queda la apertura del panel: la transición del hover se fue con el
   hover. Se conservan las DOS propiedades con `!important` —homologado el 2026-08-23 por
   `gate_gemelos_conducta.js`, que cazó que el kit apagaba más que el gemelo— porque el
   coste de apagar de más es cero y el de apagar de menos es un defecto que sólo ve quien
   tiene la preferencia puesta. */
@media (prefers-reduced-motion: reduce) {
  .exds-rega,
  .exds-rega-fila { animation: none !important; transition: none !important; }
}