/* Guías de la app de gestión (usuario, administrador y superadmin): el mismo diseño que la guía de las
   familias (css/publico2.css + css/guia-directo.css), con capturas de las pantallas de verdad.
   Las capturas salen de maquetas con datos de ejemplo (img/manual/app/*.webp, a doble resolución) y
   llevan los números (círculo amarillo, como .g-marca) ya pintados: se explican con un .g-leyenda. */

.g-captura{margin:22px 0 8px}
.g-captura img{display:block;width:100%;height:auto;margin:0 auto;background:#fff;border:1px solid var(--linea);
  border-radius:18px;box-shadow:0 1px 2px rgba(15,23,42,.06),0 12px 32px rgba(15,23,42,.10)}
/* pantalla de móvil entera, con el marco del teléfono como .g-movil */
.g-captura.movil img{max-width:330px;border:8px solid var(--tinta);border-radius:36px;
  box-shadow:0 18px 44px rgba(15,23,42,.22)}
/* un trozo de pantalla (una tarjeta, un menú, una ventana) */
.g-captura.trozo img{max-width:480px}
/* pantalla de ordenador */
.g-captura.ancha img{max-width:100%;border-radius:14px}
.g-captura figcaption{text-align:center;color:var(--claro);font-size:.86rem;line-height:1.45;margin:12px auto 0;max-width:36em}

/* dos capturas lado a lado (p. ej. antes y después, móvil y ordenador); en el móvil, una debajo de otra */
.g-capturas{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:22px 0 8px;align-items:start}
.g-capturas .g-captura{margin:0}
@media(min-width:720px){.g-capturas{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* nombre de un botón o pestaña tal como sale en la pantalla */
.g-bt-app{display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:999px;background:var(--papel);
  border:1px solid var(--linea);font-weight:700;font-size:.92em;white-space:nowrap;color:var(--tinta)}
.g-bt-app .ic{width:15px;height:15px}

@media print{
  .g-captura img{box-shadow:none;break-inside:avoid}
  .g-captura.movil img{border-width:4px}
}