/* Arreglos puntuales de UX (REDISENO-MOVIL-MAD.md, Fase 0) que no entraban en app.css ni
   en componentes.css sin pasarse del límite de líneas. No toca sw.js/tokens.css/
   componentes.css: los tokens de color y espaciado son los mismos de siempre. */

/* ── §1: el pie fijo (composer + tabs) no debe tapar el último control de la vista ──────
   Lo resolvió la Fase 1 (navegacion.css + js/ui/pieFijo.js): en las pantallas empujadas el
   composer queda FIJO abajo y la grilla de la app termina arriba de él; en las raíces el
   contenido reserva el alto de la cápsula de pestañas. Acá sólo queda el default: fuera de
   esos casos (el alta plegada del tablero) el composer vive en el flujo, sin flotar. */
.composer {
  position: static;
}

/* ── §4: imagen adjunta que no carga ─────────────────────────────────────────────────
   Antes el `<img>` roto se veía como una caja negra (el fondo oscuro del marco detrás,
   sin aviso). Placeholder discreto con los tokens existentes: ícono, nombre del archivo
   y el aviso; tocarlo reintenta (js/ui/imagenRota.js). Lo usan la bitácora (`.figura`,
   bitacora.css) y la captura de una solicitud de cliente (`.cliente-thumb`, cliente.css),
   así que hereda el tamaño de cada marco en vez de fijar uno propio. */
.img-rota {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 96px;
  padding: var(--sp-3);
  background: var(--fill);
  border: 1px dashed var(--border-hi);
  border-radius: var(--r-sm);
  color: var(--faint);
  text-align: center;
  cursor: pointer;
}

/* Adentro de `.cliente-thumb` (botón de tamaño fijo, cliente.css) el placeholder no trae
   su propio marco ni fondo —ya está puesto por el botón que lo envuelve— así que entra
   directo como hijos sueltos: se apilan igual que `.img-rota` apilaría los suyos. */
.cliente-thumb.roto {
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-2);
}

.cliente-thumb .img-rota-ico,
.cliente-thumb .img-rota-nombre,
.cliente-thumb .img-rota-msg {
  display: block;
}

.img-rota-ico { font-size: var(--fs-lg); line-height: 1; opacity: 0.8; }

.img-rota-nombre {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.img-rota-msg { font-size: var(--fs-xs); }