Patrones Nivel 3

Cómo se arma una pantalla

• Se abre dentro de su sección con MenuSection: el título queda «Sección — Subítem» y el botón «Volver» lo pone el componente.
• El contenido va en un contenedor de ancho completo: una tarjeta de 12 columnas con viñeta inferior (wireframe-card wireframe-card--footer-accent).
• Arriba, el nombre de la pantalla en wireframe-label; debajo, el contenido.
• Los títulos y datos de las pantallas son referenciales: TI pone los definitivos.

const FullCard = ({ children }: { children: React.ReactNode }) => (
  <div className="grid grid-cols-1 md:grid-cols-12 gap-3 md:gap-4">
    <div className="col-span-1 md:col-span-12 wireframe-card wireframe-card--footer-accent">
      {children}
    </div>
  </div>
);

Patrones