# Sistema de diseño Poncho
## Vista previa de la interfaz del sistema de diseño Poncho
Filtra la cuadrícula de paneles nativos, abre un detalle y vuelve a la actividad elegida.
## Referencia de diseño del sistema de diseño Poncho
ar-poncho 2.0.320 CSS más Bootstrap 3.4.1; valores calculados verificados a 1440, 768 y 390px. Las fuentes alternativas están especificadas explícitamente.
### Tipografía de CSS publicada
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Package inspected | ar-poncho 2.0.320 | No uses el banner obsoleto v0.3.3 como versión del paquete. |
| Font documentation | Lora headings / Montserrat body | La página actual de tipografía y la importación de fuentes de CSS; el README antiguo del repositorio todavía menciona Encode Sans. |
| Body | 16px / 1.42857143; weight 500 | Medido con Bootstrap 3.4.1 y Poncho; la vista previa local usa Arial. |
| H1 | 2.5rem = 40px / 44px | El encabezado de la vista previa sigue midiendo 40px en móviles. |
| H2 / H3 | 2rem / 1.75rem | Encabezados base; las reglas específicas de cada panel tienen prioridad. |
| Panel H3 | 20px / 26px | Contexto del componente; medido en CSS nativo. |
| Lead | 18px / 1.2; weight 500 | Una breve introducción, no un encabezado. |
### Funciones del color
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --primary | #242C4F | Azul marino para enlaces y acciones principales. |
| --secondary | #45658D | Azul secundario. |
| --success | #2e7d33 | Función de acción principal o de éxito; no es un adorno arbitrario. |
| --danger | #c62828 | Función de acción destructiva o de error. |
| --warning | #E7BA61 | Función de atención; aún hay que comprobar el contraste del texto. |
| --gray-base | #333333 | Texto predeterminado. |
| --gray-lighter | #f2f2f2 | Superficie neutra clara. |
### Dimensiones de la cuadrícula y los componentes
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Grid | 12 columns; 30px gutter | Bootstrap 3.4.1: 15px de relleno a cada lado de la columna. |
| Breakpoints | 768 / 992 / 1200px | sm, md, lg; col-sm-4 crea tres columnas a partir de 768px. |
| Containers | 750 / 970 / 1170px | En los puntos de interrupción correspondientes; ancho fluido por debajo de 768px. |
| Panel body | 15px 20px | Anulación del componente de Poncho. |
| Panel radius / spacing | 10px / 30px bottom margin | CSS nativo, tal como se usa en este ejemplo. |
| Button | 16px; 8px 20px padding; 3px border; 30px radius | Tratamiento redondeado de acciones de Poncho; no es la geometría predeterminada de Bootstrap. |
| Section spacing | 30px default; 20px small; 40px large | Reglas de section, section-sm y section-lg. |
## Guía completa del sistema de diseño Poncho
Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.
Orientación completa, un punto de partida para la implementación y enlaces al código fuente.
## Versión y dependencias del sistema de diseño Poncho
### Un sistema basado en Bootstrap 3
> Poncho aplica estilos de servicios públicos argentinos sobre Bootstrap 3.4.1. Su página de instalación aún menciona una línea experimental de Bootstrap 4; eso no hace que las clases de Bootstrap 5 sean compatibles con los ejemplos publicados. Este recurso fija ar-poncho 2.0.320 y Bootstrap 3.4.1 para poder examinar en conjunto la estructura de los paneles y su comportamiento adaptable.
El banner de CSS indica v0.3.3, aunque el paquete instalado es 2.0.320. Consulta el manifiesto del paquete y el archivo de bloqueo, no solo el banner. La vista previa independiente usa CSS nativo para los paneles, los botones y la cuadrícula; el filtrado de actividades es original de JavaScript, no un componente de búsqueda de Poncho.
Consulta la especificación complementaria
## Tipografía del sistema de diseño Poncho y fuentes de referencia
### Resolver referencias contradictorias a las fuentes
La documentación actual de tipografía indica Lora para los encabezados y Montserrat para el texto del cuerpo. La hoja de estilos descargada importa esas familias, pero también contiene declaraciones anteriores de Encode Sans. El README de configuración del repositorio sigue recomendando Encode Sans. Se trata de una inconsistencia real entre versiones y fuentes; una migración a producción debe revisar la cascada final de la versión elegida, en lugar de suponer que todas las referencias históricas describen un tema uniforme.
La vista previa declara explícitamente Arial y Georgia como alternativas y elimina la importación externa de fuentes para que funcione de forma fiable sin conexión. La geometría nativa sigue siendo visible: cuerpo de 16px, H1 de 40px y entradilla de 18px. Los encabezados de los paneles tienen un tamaño propio de 20px, por lo que copiar la escala base de H3 en una tarjeta cambiaría el componente.
Consulta la especificación complementaria
## Color y jerarquía de acciones del sistema de diseño Poncho
### Elige una acción según su significado
La documentación de botones distingue las acciones predeterminadas de enlace, los enlaces secundarios, una acción principal o de éxito y las acciones destructivas. btn-primary es la acción habitual de estilo de enlace destacado; btn-link sirve para acciones secundarias. btn-success identifica la acción principal para avanzar, y las pautas limitan su uso a una por página. btn-danger se reserva para acciones destructivas o irreversibles.
El navegador de actividades usa una acción secundaria para restablecer el filtro y una acción principal para volver desde el detalle expandido. No incluye un botón verde de inscripción porque no puede inscribir a nadie. Nunca muestres un mensaje de éxito solo porque alguien haya abierto un panel local.
- btn-primary: acción destacada habitual; evita que compita con otras acciones del mismo grupo.
- btn-link: acción secundaria o informativa, como restablecer el filtro.
- btn-success / btn-danger: úsalos solo cuando la acción corresponda al significado documentado.
Consulta la especificación complementaria
## Cuadrícula y espaciado del sistema de diseño Poncho
### Usa la cuadrícula heredada de forma intencionada
Bootstrap 3 usa una cuadrícula de 12 columnas con medianiles de 30px. Una fila compensa el relleno de 15px de sus columnas. col-sm-4 distribuye los tres paneles de actividades en partes iguales a partir de 768px; por debajo de ese ancho, ocupan todo el ancho disponible. En los puntos de interrupción documentados, los contenedores pasan a medir 750px, 970px y 1170px.
Poncho añade espaciado propio de los componentes: el cuerpo de los paneles usa 15px en vertical y 20px en horizontal, con un margen inferior de 30px. Los botones tienen un radio de 30px, un borde de 3px y un relleno de 8px por 20px. Estos valores explican la diferencia visible respecto a una página Bootstrap sin modificar; no los sustituyas por un tema genérico de tarjetas redondeadas.
Consulta la especificación complementaria
## Estructura de paneles interactivos del sistema de diseño Poncho
### Un destino por tarjeta
Los ejemplos oficiales de paneles envuelven todo el panel en un enlace, con panel-body en su interior y el encabezado y el texto complementario dentro de ese cuerpo. Así, cada elemento compacto del directorio conduce a un único destino coherente. Evita incluir otro enlace o botón dentro de ese enlace: crearía objetivos interactivos en conflicto.
El fragmento de código de producción apunta a una ruta real de actividad. En cambio, la vista previa local intercepta ese mismo enlace semántico para mostrar el texto original del detalle. Registra el elemento que lo abrió, sitúa el foco en la nueva región de detalle y lo devuelve cuando la persona cierra esa región. Este comportamiento de la aplicación se añade al marcado documentado del panel.
```
```
Referencia de código
Consulta la especificación complementaria
## Filtrado y estado local del sistema de diseño Poncho
### Un filtro real, no etiquetas decorativas
El selector de tipo de actividad tiene una etiqueta explícita y tres categorías. Al cambiar la selección, oculta los contenedores de los paneles que no coinciden y actualiza un mensaje de estado con el nuevo recuento. El recuento indica las actividades visibles, no el total de inscripciones ni la disponibilidad. Restablecer el filtro vuelve a mostrar las tres actividades y devuelve el foco al selector.
Al cambiar de categoría, se cierra cualquier detalle abierto para que el contenido de una actividad ahora oculta no quede desconectado de los resultados. Abrir un panel no modifica el filtro. Estas reglas son intencionadamente sencillas, pero bastan para probar la relación entre los controles, los resultados y el detalle.
1. Elige Arts y comprueba que solo quede visible Taller de grabado.
2. Abre la actividad y revisa su descripción; después, vuelve al mismo panel.
3. Restablece el filtro y comprueba que vuelvan a mostrarse las tres actividades.
Consulta la especificación complementaria
## Teclado y estructura del contenido del sistema de diseño Poncho
### No copies estados deshabilitados que sean solo visuales
La tabla oficial de botones muestra una clase CSS deshabilitada. Un botón HTML real que deba deshabilitarse también necesita el atributo disabled; una clase por sí sola no puede impedir la activación mediante el teclado. En el caso de los enlaces, determina si todavía hay un destino válido en lugar de considerar el estilo deshabilitado como un modelo de interacción completo.
Usa un H1 y una jerarquía coherente. Este directorio usa H3 dentro de los paneles porque los detalles ampliados están en una sección H2; para una lista independiente sin una sección intermedia, adapta los niveles de encabezado al documento. Las bibliotecas de iconos decorativos son opcionales y se omiten aquí porque las etiquetas de texto comunican todas las acciones.
Consulta la especificación complementaria
## Configuración y alcance nativos de sistema de diseño Poncho
### Carga solo las capas que usa el ejemplo
Carga Bootstrap CSS antes de Poncho CSS para que el tema sobrescriba los valores de base. La cuadrícula básica y los paneles no requieren Bootstrap JavaScript ni jQuery. Si la aplicación incorpora widgets interactivos de Bootstrap, carga una versión compatible de jQuery antes de Bootstrap 3.4.1 JavaScript y prueba los widgets que realmente utiliza.
Esta es una pila de dependencias heredada con un límite de compatibilidad definido. Instalar una versión moderna de Bootstrap junto a ella no constituye una estrategia de migración. Distingue entre la reutilización del código bajo la licencia MIT del repositorio y la identidad gubernamental, los logotipos oficiales y la licencia de contenido que aparece en las páginas gubernamentales. La vista previa usa actividades comunitarias ficticias y no afirma ser un servicio del Gobierno de Argentina.
Consulta la especificación complementaria
## Ejemplos de componentes de sistema de diseño Poncho
### Navegación desde todo el panel
Un único enlace envuelve el cuerpo del panel; no anides controles interactivos.
```
```
Referencia de código
### Directorio completo de actividades
Paneles nativos de Poncho con un filtro de categorías funcional y una vista de detalles que devuelve el foco.
```
Community activities
COMMUNITY PROGRAMME · INDEPENDENT EXAMPLE
Find a local activity
Browse practical sessions at the community centre.
```
Referencia de código
## Configuración de agentes para sistema de diseño Poncho
### Punto de partida para la implementación
Configuración nativa de CSS. Esta vista previa no necesita Bootstrap JavaScript porque la lógica del filtro y los detalles es propia. El ZIP completo del ejemplo funcional, incluido en Fuentes, también proporciona las dependencias exactas de la vista previa y el documento completo. Descomprímelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/poncho.html. No abras ejemplos basados en módulos mediante file://.
```
npm install ar-poncho@2.0.320 bootstrap@3.4.1
# Copy the following package assets into your site's public vendor directory:
# node_modules/bootstrap/dist/css/bootstrap.min.css
# node_modules/ar-poncho/dist/css/poncho.min.css
# Load Bootstrap first, then Poncho.
# Optional Bootstrap JS components also need jQuery before bootstrap.min.js.
```
### Una instrucción para tu proyecto
```
Usa ar-poncho 2.0.320 en Bootstrap 3.4.1. Crea un directorio accesible con una cuadrícula de 12 columnas y tarjetas de panel con un único enlace. Conserva los colores de rol, el relleno y los radios nativos de los botones. Incluye filtros etiquetados, recuentos de resultados y restauración del foco. Comprueba la cascada de fuentes con el paquete fijado; no mezcles APIs de Bootstrap 5 ni inventes mensajes de registro exitoso.
```
## Fuentes y alcance de sistema de diseño Poncho
Ejemplo independiente de OpenDesign que usa CSS nativo sin identidad gubernamental. La documentación actual y el README antiguo no coinciden en cuanto a las familias tipográficas; el CSS fijado y la alternativa explícita definen esta vista previa.
- Repositorio oficial e instalación Configuración del paquete, dependencias y licencia de código MIT.
- Anatomía del panel Enlaces que abarcan toda la tarjeta, texto complementario y variantes.
- Significado de los botones Jerarquía de acciones, nombres de clase y estados.
- Tipografía Familias tipográficas actuales y pautas para el texto semántico.
- CSS publicado Declaraciones reales de color, tipografía y geometría.
- Cuadrícula de Bootstrap 3 Columnas adaptables, medianiles y anchos de contenedor heredados.
- Descargar el ejemplo funcional completo Archivo ZIP con HTML completo, dependencias locales CSS/JavaScript, licencias incluidas e instrucciones exactas para ejecutarlo. No se requiere un paso de compilación.
## Recursos relacionados con sistema de diseño Poncho
### Queensland Government sistema de diseño
Explora la implementación de Bootstrap de Queensland mediante un selector ilustrado de recursos completo, con roles de tema reales, estilo nativo para casillas y un diálogo accesible de revisión.
### Ripple
Explora los roles de color reales de Ripple, su escala de espaciado de 14 pasos y sus referencias tipográficas adaptables mediante una cronología completa de taller con divulgación progresiva, progreso y enfoque del teclado en el siguiente paso.
### Scottish Government sistema de diseño
Aplica los roles tipográficos adaptables, de espaciado y de color del Gobierno escocés mediante un campo nativo con contador de caracteres que conserva el texto que supera el límite y permite corregirlo.
- [Referencia de implementación](https://argob.github.io/poncho/componentes/paneles/)
- [Fuente](https://github.com/argob/poncho/blob/master/dist/css/poncho.css)
- [Fuente](https://getbootstrap.com/docs/3.4/css/#grid)
- [Consulta la especificación complementaria](https://github.com/argob/poncho)
- [Consulta la especificación complementaria](https://argob.github.io/poncho/identidad/tipografia/)
- [Consulta la especificación complementaria](https://argob.github.io/poncho/componentes/botones/)
- [Consulta la especificación complementaria](https://getbootstrap.com/docs/3.4/css/#grid)
- [Referencia de código](https://argob.github.io/poncho/componentes/paneles/)
- [Consulta la especificación complementaria](https://argob.github.io/poncho/componentes/paneles/)
- [Repositorio oficial e instalación Configuración del paquete, dependencias y licencia de código MIT.](https://github.com/argob/poncho)
- [Anatomía del panel Enlaces que abarcan toda la tarjeta, texto complementario y variantes.](https://argob.github.io/poncho/componentes/paneles/)
- [Significado de los botones Jerarquía de acciones, nombres de clase y estados.](https://argob.github.io/poncho/componentes/botones/)
- [Tipografía Familias tipográficas actuales y pautas para el texto semántico.](https://argob.github.io/poncho/identidad/tipografia/)
- [CSS publicado Declaraciones reales de color, tipografía y geometría.](https://github.com/argob/poncho/blob/master/dist/css/poncho.css)
- [Cuadrícula de Bootstrap 3 Columnas adaptables, medianiles y anchos de contenedor heredados.](https://getbootstrap.com/docs/3.4/css/#grid)