/* ═══════════════════════════════════════════════════════════════════════════════
   Migas — GEMELO VANILLA (hoja de estilo)
   Ficha: design-system/COMPONENTE_MIGAS.md · Kit React hermano: catalogo-cd/components/Migas.jsx
   El .jsx dibuja la anatomía con `style` en línea (React no necesita una hoja aparte); aquí se
   sube esa misma anatomía a clases, PASO 2 obligatorio del método (§5-bis) para poder montarla
   sin React. Mismas propiedades, mismos valores — sólo el hover/focus dejan de rastrearse a mano
   con `onMouseEnter/onFocus` y pasan a `:hover`/`:focus-visible`, que es lo mismo que hacía el
   estado `sobre` del componente.
   ═══════════════════════════════════════════════════════════════════════════════ */

.exds-migas {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm, 13px);
  min-width: 0;
}

/* Separador de texto ("/"), no ícono (Ricardo, 2026-09-12 — ver ficha §«Por qué el
   separador deja de ser un chevron»). Antes era un `chevron-right` de 14px en
   `inline-flex`; una barra no ocupa la misma caja óptica que un glifo dibujado con
   trazo, así que el tamaño y la línea de base se midieron de nuevo en vez de heredar
   los números del ícono retirado. */
.exds-miga-sep {
  color: var(--fg3);
  display: inline-block;
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
}

/* El paso ACTUAL: no se puede ir a donde ya estás. Texto plano, sin botón, sin subrayado. */
.exds-miga-actual {
  font-weight: 500;
  white-space: nowrap;
  color: var(--fg1);
}

/* Los pasos ANTERIORES: botones desnudos — sin fondo, sin borde, sin relleno, heredando la
   tipografía. Un <button> con su estilo nativo dentro de una barra es uno de los cuatro
   defectos que gate_render.js prohíbe en cualquier pantalla. */
/* ⛔ EL ORDEN DE ESTAS DOS LÍNEAS NO ES ESTILO: ES EL DEFECTO (corregido 2026-09-03).
   `font: inherit` iba DESPUÉS de `font-weight: 500`, en este mismo bloque — y la taquigrafía
   `font` reescribe `font-weight`, `font-size`, `font-family` y `line-height` de golpe. El
   resultado: la ficha decía «Paso anterior · 500» y el gemelo entregaba **400**, sin error, sin
   aviso y sin que ningún linter de vocabulario lo viera: el token 500 ESTABA escrito, sólo que
   muerto.
   Lo cazó `revisor-qa` midiendo el ELEMENTO —no las reglas— y frenó una publicación: en el
   backoffice los pasos pulsables del rastro salían más finos que el actual y que el módulo de
   al lado, tres piezas que son la misma cosa.
   *Una taquigrafía anula longhands declaradas antes sin dejar rastro; la única forma de verlo
   es montar la pieza y comparar el valor computado contra lo que dice su ficha.* Va PRIMERO
   para heredar familia y tamaño, y lo que se declare después es lo que manda. */
.exds-miga {
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  color: var(--fg2);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  line-height: inherit;
  cursor: pointer;
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color var(--motion-fast, 120ms) var(--ease-default);
}

/* El subrayado va SÓLO al pasar el ratón (y al enfocar con teclado) — permanente en tres pasos
   ensucia la barra; ausente del todo, la miga es una etiqueta sin afordancia de volver. */
.exds-miga:hover,
.exds-miga:focus-visible {
  color: var(--fg1);
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .exds-miga { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EL PASO CON SUBMÓDULOS (Ricardo, 2026-09-10) — envuelve el `Menu` del catálogo
   (`componentes/menu/menu.css`), no lo redibuja. Conducta medida en producción:
   `exante-git/admin/index.html` § `<style id="tb-styles">` (líneas 2246-2266).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* El envoltorio `.exds-menu` recupera la capacidad de encoger de un paso normal:
   `menu.css` lo declara `flex: none` porque en un menú suelto no hace falta — dentro
   de la migaja, si no encoge, un nombre de módulo largo empuja el rastro entero en
   vez de recortarse con «…» (Mapa, `.tb-crumb .tb-mod-menu`). */
.exds-migas .exds-miga-menu {
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

/* El botón ahora tiene DOS hijos (etiqueta + chevron): pasa a fila flex. El recorte con
   «…» se le pasa a la ETIQUETA — el chevron nunca se recorta (`flex-shrink:0` abajo). */
.exds-miga.has-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.exds-miga-lab {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.exds-miga-chev {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--fg3);
  display: inline-flex;
  transition: transform var(--motion-fast, 120ms) var(--ease-default);
}

.exds-miga.has-sub[aria-expanded="true"] .exds-miga-chev {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .exds-miga-chev { transition: none; }
}

/* ⛔ EXCEPCIÓN MEDIDA A LA REGLA 1: un módulo con submódulos abre su menú aunque sea
   el paso ACTUAL — «Módulo plano activo → un solo segmento»
   (`backoffice-2.js:6432-6435`). Recupera la tinta `--fg1` de `.exds-miga-actual` sin
   dejar de ser un botón: declarada DESPUÉS de `.exds-miga` (que fija `color: --fg2`)
   para que gane por orden con la misma especificidad — mismo defecto que ya mordió a
   este archivo una vez con `font: inherit` (ver arriba), no se repite dos veces. */
.exds-miga.has-sub.exds-miga-cur {
  color: var(--fg1);
}

/* GATE-ALLOW: el disparador de la migaja NO toma el fondo+borde del estado abierto del
   Menu · el canon (`menu.css`, `.exds-menu-disp[aria-expanded="true"]`) declara ese chip
   para un disparador CON CHROME PROPIO («Filtros», «⋯»); la migaja es texto plano y una
   caja rellena en medio del rastro se leería como un control aislado, no como un paso de
   la ruta. DECIDIDO por Ricardo el 2026-09-10: «B», sobre
   plans/decisiones/_decision_migaja_disparador_abierto_2026-09-10.html, con los tres
   estados fotografiados del backoffice real. El estado abierto lo sigue marcando el
   color + el giro del chevron (arriba), igual que ya distinguía hover/foco del resto de
   la migaja. Selector con TRES clases + el atributo (0,4,0) para ganarle por
   especificidad a `menu.css` sin depender del orden de las hojas — igual que
   `admin/index.html:2266` (`.tb-mod.has-sub.exds-menu-disp[aria-expanded="true"]`). */
.exds-miga.has-sub.exds-menu-disp[aria-expanded="true"] {
  background: none;
  border-color: transparent;
  color: var(--fg1);
}