/* Mapa de útiles (utiles-mapa.js): barra «Sigue con este archivo» debajo
   del útil y nota «Archivo de …» encima del útil que lo recibe.
   Se usa en utiles.html (tokens.css + familia.css) y en las fichas SEO:
   cada color sale de un token con su respaldo, como utiles-herramientas.css.
   Propiedades lógicas (inline/block) para que árabe y urdu se vean bien. */
.utm-barra,.utm-nota{
 --utm-fondo:var(--f-sup-2,var(--negro-elevado,#121212));
 --utm-chip:var(--f-sup-3,var(--negro-elevado,#121212));
 --utm-borde:var(--f-linea-fuerte,var(--negro-borde,#262626));
 --utm-texto:var(--f-texto,var(--blanco-luz,#f8fafc));
 --utm-suave:var(--f-texto-2,var(--gris-niebla,#cbd5e1));
 --utm-acento:var(--f-lima,var(--verde-cocuyo,#aff33e));
 --utm-acento-suave:var(--f-lima-suave,var(--acento-fondo,transparent));
 --utm-acento-linea:var(--f-lima-linea,var(--verde-apagado,#22c55e));
 --utm-aviso:var(--peligro,#f87171);
 box-sizing:border-box;min-width:0;color:var(--utm-texto);font-size:14px;line-height:1.45
}
.utm-barra *,.utm-nota *{box-sizing:border-box}
.utm-barra[hidden],.utm-nota[hidden],.utm-barra [hidden]{display:none!important}

/* Barra: tarjeta compacta, sin sombras ni saltos (aparece tras la descarga). */
.utm-barra{display:grid;gap:10px;margin-block:14px 0;padding:12px 14px;border:1px solid var(--utm-borde);border-radius:var(--f-r-tarjeta,16px);background:var(--utm-fondo);animation:utm-aparece .18s ease-out}
.utm-cab{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;min-width:0}
.utm-titulo{font-size:14px;font-weight:600}
.utm-archivo{flex:1 1 140px;min-width:0;color:var(--utm-suave);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.utm-cerrar{flex:none;display:inline-flex;align-items:center;justify-content:center;inline-size:36px;block-size:36px;margin-inline-start:auto;padding:0;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--utm-suave);font:inherit;font-size:18px;line-height:1;cursor:pointer}
.utm-cerrar:hover{color:var(--utm-texto);border-color:var(--utm-borde)}
.utm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.utm-chips li{margin:0;min-width:0}
.utm-chip{display:inline-flex;align-items:center;gap:8px;max-inline-size:100%;min-height:44px;padding:8px 14px;border:1px solid var(--utm-borde);border-radius:999px;background:var(--utm-chip);color:var(--utm-texto);font:inherit;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;transition:border-color .15s,background .15s}
.utm-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.utm-chip:hover{border-color:var(--utm-acento-linea);background:var(--utm-acento-suave)}
.utm-chip[aria-busy="true"]{cursor:progress;opacity:.7}
.utm-ico{flex:none;inline-size:18px;block-size:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--utm-acento)}
.utm-aviso{margin:0;padding-inline-start:10px;border-inline-start:2px solid var(--utm-aviso);color:var(--utm-suave);font-size:13px}

/* Nota en el útil de destino: «Archivo de Comprimir imagen: foto.jpg». */
.utm-nota{display:flex;align-items:center;gap:8px;margin-block:0 12px;padding-block:8px;padding-inline:12px 8px;border:1px solid var(--utm-acento-linea);border-radius:var(--f-r-control,10px);background:var(--utm-acento-suave);color:var(--utm-texto);font-size:13px}
.utm-nota.is-aviso{border-color:var(--utm-aviso);background:var(--utm-fondo)}
.utm-nota.is-aviso .utm-ico{color:var(--utm-aviso)}
.utm-nota-texto{flex:1;min-width:0;overflow-wrap:anywhere}
.utm-nota .utm-cerrar{inline-size:32px;block-size:32px;margin-inline-start:0}

.utm-chip:focus-visible,.utm-cerrar:focus-visible,.utm-nota:focus-visible{outline:2px solid var(--utm-acento);outline-offset:2px}
.utm-sr{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@keyframes utm-aparece{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.utm-barra{animation:none}.utm-chip{transition:none}}
@media (max-width:480px){.utm-barra{padding:10px 12px}.utm-chip{padding:8px 12px}}