/* ============================================================================
   MÓDULO MINIMAPA — el mapa 3D del código (18 oct 2026)
   ============================================================================
   Solo tokens (marca.css y el :root de panel.css). Lo biselado sale de las
   piezas comunes —`.caja` para lo grande, `.btn-sm` para los filtros— y lo
   que no lleva bisel (filas de la ficha, resultados) enfoca con `outline`,
   que sin `clip-path` se ve entero. Ver la skill diseno-trufas.

   Maqueta: barra (buscar · filtros · vista) y debajo el mapa con la ficha al
   lado desde 64rem; por debajo, la ficha va después del mapa. El lienzo
   mide lo que le deja la pantalla (svh) con un mínimo, y la página nunca se
   desplaza de lado: todo lo largo se parte o se recorta con «…».
   ========================================================================== */

/* Lo que no tiene token en marca.css, una sola vez: la letra de código (la
   misma pila que .bloqueo-codigo de panel.css) y el velo de tinta bajo los
   rótulos que van encima del lienzo. */
.mm-frescura,.mm-cuerpo{
  --mm-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --mm-velo:color-mix(in srgb, var(--ink) 72%, transparent);
}

/* ── FRESCURA ────────────────────────────────────────────────────────────── */
.mm-frescura{display:flex;flex-direction:column;gap:var(--esp-3);margin-bottom:var(--esp-rejilla)}
.mm-repos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--esp-2)}
.mm-repo{
  display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:var(--esp-2);
  padding:var(--esp-1) var(--esp-3);min-height:2rem;align-content:center;
  font-size:var(--tipo-leyenda);color:var(--texto-3);
  background:var(--velo-1);clip-path:var(--bevel-compacto);
}
.mm-repo-nombre{font-weight:600;color:var(--texto-1);letter-spacing:.04em}
.mm-repo-sha{font-family:var(--mm-mono);color:var(--yellow)}
.mm-repo.es-viejo .mm-repo-sha,.mm-repo.es-falta .mm-repo-dato{color:var(--gris-3)}
.mm-repo.es-falta,.mm-repo.es-viejo{background:var(--velo-alerta)}
.mm-repo-puentes .mm-repo-nombre{color:var(--yellow)}

.mm-aviso{
  --caja-fondo:var(--gris-1);--filo-color:var(--gris-2);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--esp-2) var(--esp-4);
  padding:var(--esp-4) var(--esp-tarjeta);min-height:4rem;
}
.mm-aviso-textos{min-width:0}
.mm-aviso-titulo{font-size:var(--tipo-descripcion);font-weight:600;color:var(--texto-1);margin:0}
.mm-aviso-texto{font-size:var(--tipo-leyenda);color:var(--texto-2);margin:var(--esp-1) 0 0;max-width:80ch}
.mm-aviso .acciones{justify-content:flex-end}
@media (max-width:40rem){ .mm-aviso{grid-template-columns:minmax(0,1fr)} .mm-aviso .acciones{justify-content:stretch} }

/* ── LA BARRA ────────────────────────────────────────────────────────────── */
.mm-barra{
  display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr) auto;
  align-items:end;gap:var(--esp-3) var(--esp-4);margin-bottom:var(--esp-3);
}
.mm-buscar{position:relative;display:flex;flex-direction:column;gap:var(--esp-1);min-width:0}
.mm-rotulo{font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.mm-buscar:focus-within .mm-rotulo{color:var(--yellow)}
.mm-campo{position:relative}
.mm-lupa{position:absolute;left:var(--esp-3);top:50%;translate:0 -50%;display:flex;color:var(--texto-3);pointer-events:none}
.mm-lupa .icono,.mm-lupa svg{width:1.125rem;height:1.125rem}
.mm-campo input{
  width:100%;min-width:0;height:var(--alto-control);padding:0 var(--esp-3) 0 2.25rem;
  font-family:inherit;font-size:var(--tipo-descripcion);color:var(--texto-1);
  background:var(--sup-0);border:1px solid var(--line);
}
.mm-campo input:hover{border-color:var(--texto-3)}
.mm-campo input:focus{outline:none;border-color:var(--yellow)}

.mm-resultados{
  position:absolute;z-index:30;left:0;right:0;top:100%;margin:var(--esp-1) 0 0;
  padding:var(--esp-2);--caja-fondo:var(--surface-2);
}
.mm-resultados[hidden]{display:none}
/* La caja no se desplaza (su contorno y su relleno se irían con el scroll):
   se desplaza la lista de dentro. */
.mm-resultados-lista{list-style:none;margin:0;padding:0;max-height:min(24rem, 60svh);overflow:auto}
.mm-resultado{
  display:flex;align-items:center;gap:var(--esp-3);padding:var(--esp-2) var(--esp-3);cursor:pointer;
  min-height:var(--alto-control);
}
.mm-resultado:hover,.mm-resultado[aria-selected="true"]{background:var(--velo-2)}
.mm-resultado[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--yellow)}
.mm-resultado-txt,.mm-vecino-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.mm-resultado-nombre,.mm-vecino-nombre{font-size:var(--tipo-descripcion);color:var(--texto-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-resultado-archivo,.mm-vecino-archivo{font-size:var(--tipo-leyenda);color:var(--texto-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-resultado-vacio,.mm-resultado-mas{padding:var(--esp-2) var(--esp-3);font-size:var(--tipo-leyenda);color:var(--texto-3)}

.mm-filtros{display:flex;flex-wrap:wrap;gap:var(--esp-2);min-width:0}
.mm-filtro{gap:var(--esp-2)}
.mm-filtro .mm-filtro-n{color:var(--texto-3);font-weight:500}
.mm-filtro[aria-pressed="true"]{--filo-color:var(--borde-vivo);background:var(--velo-vivo);color:var(--texto-1)}
.mm-filtro[aria-pressed="true"] .mm-filtro-n{color:var(--texto-2)}
.mm-filtro[aria-pressed="false"]{color:var(--texto-3)}
/* Apagado: la marca pasa a gris (color, no opacidad). */
.mm-filtro[aria-pressed="false"] .mm-marca{--mm-color:var(--gris-2)}
.mm-filtro-puentes[aria-pressed="true"]{--filo-color:var(--yellow);color:var(--yellow)}

.mm-vistas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2)}
/* Todo lo de esa fila mide --alto-control (40), como el buscador: pestañas,
   «Solo puentes» y «Encuadrar» (`.btn`, no `.btn-sm`: su bisel es el de 9). */
.mm-vistas .btn{min-height:var(--alto-control);gap:var(--esp-2)}
.mm-vistas .pestana:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.mm-encuadrar{gap:var(--esp-2)}
.mm-encuadrar .icono,.mm-encuadrar svg{width:1rem;height:1rem}

/* LA MARCA DE UN GRUPO: color + forma. Recortes sin borde: no hay contorno
   que se coma el clip-path. */
.mm-marca{
  --mm-color:var(--cream);
  display:inline-block;flex:none;width:.75rem;height:.75rem;vertical-align:-.05em;
  background:var(--mm-color);
}
.mm-g-web{--mm-color:var(--cream)}
.mm-g-panel{--mm-color:var(--yellow)}
.mm-g-dashboard{--mm-color:var(--muted)}
.mm-g-base{--mm-color:var(--ord-1)}
.mm-g-bot{--mm-color:var(--yellow-bajo)}
.mm-g-herramientas{--mm-color:var(--gris-3)}
.mm-forma-icosaedro{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.mm-forma-cubo{clip-path:none}
.mm-forma-octaedro{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.mm-forma-cilindro{clip-path:none;border-radius:50% / 22%}
.mm-forma-tetraedro{clip-path:polygon(50% 0,100% 100%,0 100%)}
.mm-forma-esfera{border-radius:50%;width:.625rem;height:.625rem}
.mm-marca-puente{
  background:var(--yellow-alto);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  width:.875rem;height:.875rem;
}

/* ── EL CUERPO: mapa (o lista) y ficha ───────────────────────────────────── */
.mm-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:var(--esp-rejilla);align-items:start}
.mm-escena,.mm-lista{grid-column:1;min-width:0}
.mm-ficha{grid-column:2;grid-row:1}
.mm-escena{--caja-fondo:var(--ink);padding:1px}
.mm-escena[hidden],.mm-lista[hidden]{display:none}
.mm-lienzo{
  position:relative;height:clamp(22rem, calc(100svh - 18rem), 46rem);
  overflow:hidden;clip-path:var(--bevel);
}
.mm-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.mm-canvas:active{cursor:grabbing}
/* El foco del lienzo: el aro del bisel grande, por dentro (la `.caja` recorta). */
.mm-escena:has(.mm-canvas:focus-visible)::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  clip-path:var(--filo-foco);background:var(--yellow);
}
.mm-canvas:focus{outline:none}
.mm-lienzo > .cargando-fila,.mm-lienzo > .estado-centro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0}
.mm-lienzo > .estado-centro{flex-direction:column;padding:var(--esp-caja);text-align:center}

.mm-rotulos{position:absolute;inset:1px;pointer-events:none;overflow:hidden;clip-path:var(--bevel)}
.mm-rotulo-3d{
  position:absolute;left:0;top:0;margin:var(--esp-3) 0 0 var(--esp-3);max-width:14rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--tipo-leyenda);color:var(--texto-2);
  padding:var(--esp-1) var(--esp-2);background:var(--mm-velo);
}
.mm-rotulo-3d.es-elegido{color:var(--sobre-amarillo);background:var(--yellow);font-weight:600;max-width:18rem}

.mm-progreso,.mm-ayuda{
  position:absolute;left:var(--esp-4);margin:0;pointer-events:none;
  font-size:var(--tipo-leyenda);color:var(--texto-3);
}
.mm-progreso{top:var(--esp-3);color:var(--texto-2)}
.mm-progreso:empty{display:none}
.mm-ayuda{bottom:var(--esp-3);right:auto;max-width:calc(100% - 2 * var(--esp-4));padding:var(--esp-1) var(--esp-2);background:var(--mm-velo)}

.mm-etiqueta{max-width:min(26rem, calc(100vw - 16px))}

/* ── LA LISTA ────────────────────────────────────────────────────────────── */
.mm-lista{padding:var(--esp-tarjeta)}
.mm-lista-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--esp-2) var(--esp-4);margin-bottom:var(--esp-3)}
.mm-lista-titulo{font-family:var(--fuente-dato);font-weight:700;font-size:var(--tipo-dato);letter-spacing:calc(.01em + var(--tracking-dato));text-transform:uppercase;margin:0}
.mm-lista-n{margin:0;font-size:var(--tipo-leyenda);color:var(--texto-3)}
.mm-tabla-env{min-width:0}
.mm-tabla{margin-bottom:0}
.mm-tabla td{vertical-align:middle}
.mm-tabla td .pill{margin-left:var(--esp-2)}
.mm-tabla tr.es-elegida > td:first-child{box-shadow:inset 3px 0 0 var(--yellow)}
.mm-celda-archivo{color:var(--texto-3);overflow-wrap:break-word;font-size:var(--tipo-leyenda)}
.mm-celda-grupo{white-space:nowrap}
.mm-linea-n{white-space:nowrap}
.mm-celda-n{text-align:right}
.mm-enlace{
  font:inherit;color:var(--texto-1);background:none;border:0;padding:0;cursor:pointer;text-align:left;
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.2em;word-break:break-word;
}
.mm-enlace:hover{color:var(--yellow);text-decoration-color:currentColor}
.mm-enlace:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.mm-lista-mas{margin-top:var(--esp-4);justify-content:center}

/* ── LA FICHA ────────────────────────────────────────────────────────────── */
.mm-ficha{padding:var(--esp-tarjeta);min-width:0;position:relative}
/* El desplazamiento va en el cuerpo y no en la `.caja` (ver los resultados).
   En escritorio, del alto del lienzo; en móvil, sin tope. Sin `sticky`: el
   `.contenido` del panel lleva overflow-x:hidden y no se pegaría nunca. */
.mm-ficha-cuerpo{max-height:clamp(18rem, calc(100svh - 21rem), 43rem);overflow:auto;
  margin-right:calc(-1 * var(--esp-2));padding-right:var(--esp-2)}
.mm-ficha:focus{outline:none}
.mm-ficha:focus-visible::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-foco);background:var(--yellow)}
.mm-ficha .eyebrow{margin:0 0 var(--esp-2)}
.mm-ficha-vacia{font-size:var(--tipo-descripcion);color:var(--texto-2);margin:0 0 var(--esp-4)}
.mm-ficha-leyenda{list-style:none;margin:0;padding:var(--esp-4) 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--esp-2)}
.mm-ficha-leyenda li{display:flex;align-items:center;gap:var(--esp-3);font-size:var(--tipo-leyenda);color:var(--texto-3)}
.mm-linea{display:inline-block;flex:none;width:1.5rem;height:2px;background:var(--muted)}
.mm-linea-base{background:var(--yellow)}

.mm-ficha-cab{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--esp-3);align-items:start}
.mm-ficha-cab .eyebrow{grid-column:1}
.mm-ficha-titulo{
  grid-column:1;margin:0;
  font-family:var(--fuente-subtitulo);font-weight:700;font-size:var(--tipo-subtitulo);letter-spacing:calc(.01em + var(--tracking-subtitulo));
  text-transform:none;line-height:1.05;overflow-wrap:break-word;color:var(--texto-1);
}
.mm-cerrar{grid-column:2;grid-row:1 / span 2;width:2rem;padding:0;justify-content:center}
.mm-cerrar svg{width:1rem;height:1rem}
.mm-ficha-pills{display:flex;flex-wrap:wrap;gap:var(--esp-2);margin-top:var(--esp-3)}
.mm-datos{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--esp-1) var(--esp-3);margin:var(--esp-4) 0 0;font-size:var(--tipo-descripcion)}
.mm-datos dt{font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);padding-top:.15em}
.mm-datos dd{margin:0;color:var(--texto-2);overflow-wrap:anywhere}
.mm-datos code{font-family:var(--mm-mono);font-size:var(--tipo-leyenda);color:var(--texto-1)}
.mm-ficha-acc{margin-top:var(--esp-4)}
.mm-ficha-sec{margin-top:var(--esp-4);padding-top:var(--esp-3);border-top:1px solid var(--line)}
.mm-ficha-sub{margin:0 0 var(--esp-2);font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.mm-defs{list-style:none;margin:0;padding:0;font-family:var(--mm-mono);font-size:var(--tipo-leyenda);color:var(--texto-2)}
.mm-defs li{overflow-wrap:anywhere;padding:var(--esp-1) 0}
.mm-vecinos{list-style:none;margin:0;padding:0}
.mm-vecino{
  display:flex;align-items:center;gap:var(--esp-3);width:100%;min-height:var(--alto-control);padding:var(--esp-1) var(--esp-2);
  font:inherit;text-align:left;color:inherit;background:none;border:0;cursor:pointer;
}
.mm-vecino:hover{background:var(--velo-2)}
.mm-vecino:hover .mm-vecino-nombre{color:var(--yellow)}
.mm-vecino:focus-visible,.mm-resultado:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.mm-ficha-mas{margin:var(--esp-2) 0 0;font-size:var(--tipo-leyenda);color:var(--texto-3)}

/* ── ANCHOS ──────────────────────────────────────────────────────────────── */
@media (max-width:80rem){
  .mm-barra{grid-template-columns:minmax(0,1fr) auto}
  .mm-filtros{grid-column:1 / -1;grid-row:2}
}
@media (max-width:63.99rem){
  .mm-cuerpo{grid-template-columns:minmax(0,1fr)}
  .mm-ficha{grid-column:1;grid-row:auto}
  .mm-ficha-cuerpo{max-height:none;overflow:visible;margin-right:0;padding-right:0}
  .mm-lienzo{height:clamp(20rem, 62svh, 34rem)}
}
@media (max-width:40rem){
  .mm-barra{grid-template-columns:minmax(0,1fr)}
  .mm-vistas{grid-row:auto;flex-wrap:wrap}
  /* Los filtros, en un carril que se desliza de lado (sin barra a la vista,
     la excepción escrita de la skill): apilados ocupaban tres filas. */
  .mm-filtros{grid-row:auto;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(-1 * var(--esp-caja));padding-inline:var(--esp-caja)}
  .mm-filtros::-webkit-scrollbar{display:none}
  .mm-filtro{flex:none}
  /* Que se note que hay más a la derecha. */
  .mm-filtros{-webkit-mask-image:linear-gradient(to right, var(--ink) calc(100% - 3rem), transparent);
              mask-image:linear-gradient(to right, var(--ink) calc(100% - 3rem), transparent)}
  .mm-ayuda{display:none}
  .mm-lista{padding:var(--esp-4)}
}


/* El título de una pantalla de estado recibe el foco por código (para que el
   lector lo anuncie), no por teclado: sin el recuadro del navegador. */
.bloqueo-titulo[tabindex="-1"]:focus{outline:none}

/* La fila elegida cuando la tabla se lee como fichas (< 960 px, panel.css): el
   contorno de la ficha (su ::before) pasa a amarillo. */
@media (max-width:959.98px){
  .mm-tabla tr.es-elegida > td:first-child{box-shadow:none}
  .tabla.mm-tabla tbody tr.es-elegida::before{background:var(--yellow)}
}