Próximamente
Esta zona está reservada para una fase posterior. La cabecera superior ya identifica la vista, así que esta pantalla no repite el mismo encabezado.
Cargando sección…
Compendio de reglas V5
Consulta las reglas de Vampiro: La Mascarada 5.ª edición, los rasgos de personaje, las Disciplinas, el equipo y las amenazas habituales sin interrumpir la partida.
Accesos principales
Sistema de juegoNormas, tiradas y referencias rápidas para jugar sin frenar la escena.
PersonajesCreación, clanes, condición vampírica, depredadores y ventajas personales.
CoteriesCreación de coteries, Dominio, méritos y defectos del grupo.
Poderes de la SangreDisciplinas, rituales y capacidades sobrenaturales de la Sangre.
EquipoArmas, recursos y objetos útiles para sobrevivir a la noche.
VehículosTransporte, persecuciones, apoyo móvil y control de la escena.
DronesVigilancia remota, robots tácticos y tecnología no tripulada.
AntagonistasAmenazas, rivales y fuerzas hostiles que acechan en la oscuridad.
Compendio de reglas · v7.676
Acceso de crónica
Inicia sesión como jugador o Narrador para entrar en esta zona.
Herramientas del narrador
Área de trabajo del narrador. Desde aquí se accede a las herramientas de crónica, a las minifichas y a los módulos privados de la mesa.
Herramientas activas
Material del Narrador
Qué está pasando
Canal común de crónica. Narrador y jugadores pueden publicar; cada participante gestiona sus propias entradas.
Control de PJs
Control rápido de sesión y acceso a fichas V5.
Hoja de Coterie
Dominio, miembros, refugio, deudas y objetivos de la coterie.
Cargando ficha de coterie…
Caza
Construye una tabla d100 de oportunidades de caza a partir del Dominio, la franja, el tipo de depredador y el riesgo narrativo.
La app no resuelve la caza. Genera una tabla para que la mesa tire 1d100 y el Narrador seleccione la fila obtenida.
Mensajes
Canal de mensajes entre Narrador y jugadores.
Notas del Narrador
Notas privadas de trabajo para preparar sesiones, registrar sospechas y conservar recordatorios del Narrador.
Dirección
Historias
Material jugable del Narrador. Las Historias describen situaciones posibles y no implican que hayan ocurrido en la crónica.
Conocimiento
Conocimiento
Zona reservada
Gestión de la aplicación
Área administrativa del Narrador. Desde aquí se actualiza la app, se exporta el compendio, se revisa la auditoría y se gestionan usuarios y herramientas internas.
Herramientas administrativas
Descargar compendio
Exporta una copia del compendio renderizado para revisión externa, archivo editorial o traspaso de trabajo.
Estado del compendio
Listo para exportar
Exportar compendio
La descarga se genera desde el estado actual de la aplicación. Revísala después de actualizar la app o antes de compartir una entrega.
Auditoría
Genera informes de control de servidor, navegador, DOM, rutas, contratos VTM2, Crónica y afinidad V5.
Diagnóstico CSS legacy
Resalta en amarillo los elementos afectados por reglas activas de legacy-unused.css para decidir qué migrar a framework.
Generar auditoría total
Ejecuta la auditoría total configurada en la aplicación y descarga el informe generado por la herramienta.
Actualizar app
Sube un paquete de actualización V7 desde Gestión. La app comprobará que el ZIP corresponde a una versión nueva, instalará sólo los archivos necesarios y volverá a este panel con el resultado de la operación.
Versión instalada7.178
Durante la actualización no cierres la pestaña. Cuando termine, volverás a Gestión con un aviso de éxito o con el error que haya impedido instalar el paquete.
Usuarios y permisos
Administra las cuentas que pueden acceder a la aplicación, sus roles y sus credenciales.
Guía visual interna
Herramienta interna heredada. El contrato vivo de VTM2 se valida en manifiestos, auditorías y documentación de versión; esta pantalla no forma parte de la navegación normal de la app.
Fundamentos
Tokens visuales principales. Las pantallas deben usar variables y componentes registrados, no valores inventados por vista.
Fondo app
--vtm-color-bg-appFondo panel
--vtm-color-bg-panelFondo tarjeta
--vtm-color-bg-cardRojo estructural
--vtm-color-accent-redDorado acento
--vtm-color-accent-goldPeligro
--vtm-color-dangerLayouts y navegación
Formato estándar de pantalla. El rail lateral global vive siempre en #sidebar. Compendio, Crónica y Gestión no inventan sidebars internos.
Menú lateral global
Crónica y Gestión
Este es el componente real usado en producción por #chronicle-nav y #gestion-nav.
#sidebar .vtm-global-side-menu .vtm-global-side-menu-item
Cabecera responsive
Móvil
En móvil la cabecera se divide en tres filas: identidad y acciones, áreas principales y búsqueda. Las acciones diagnósticas no esenciales no aparecen.
| Zona | Contrato |
|---|---|
| Fila superior | #logo, acciones de sesión compactas, #sidebar-toggle a la derecha. |
| Acciones | Editar y Salir con altura táctil mínima de 44 px. No se muestra Narrador: .... |
| Áreas | #area-switch ocupa una fila propia con Compendio, Crónica y Gestión. |
| Búsqueda | #search-wrap ocupa una fila propia y no invade la navegación. |
| Diagnóstico | #render-diagnostic-download queda oculto en móvil. |
@media (max-width:760px): #header > logo + auth + menu / area-switch / search
Caso especial
Árbol del Compendio
El Compendio usa #nav con clases vtm2-nav-* porque representa nodos jerárquicos, no una lista plana de vistas.
#nav .vtm2-nav-group .vtm2-nav-h1-btn .vtm2-nav-h2-btn
Cabeceras de sección
Las pantallas y subvistas migradas usan una única cabecera canónica: .vtm2-section-header, con .vtm2-breadcrumb, .vtm2-section-title, .vtm2-section-desc y, si procede, .vtm2-section-return.
Crónica · Sección
Título de subvista
Descripción breve de la sección. Opcional. Máximo una línea en escritorio.
.vtm2-section-header > .vtm2-section-header-main + .vtm2-section-header-actions
Contrato: kicker obligatorio con zona + nombre de subvista. H2, descripción y acciones son opcionales. El kicker usa el formato Zona · Subvista.
Jerarquía tipográfica obligatoria
| Nivel | Elemento | Contexto |
|---|---|---|
h1 | Vista principal (Gestión, Usuarios) | Una por vista, dentro de .vtm2-section-header |
h2 | Subvista/sección | Una por subvista, dentro de .vtm2-section-header |
h3 .vtm2-title-h3 | Bloque interno | Agrupación dentro de una vista |
h3 .vtm2-title-card | Tarjeta operativa | Dentro de .vtm2-card o .vtm2-card |
Botones
La app usa botones globales VTM. Las clases antiguas de Crónica quedan como alias transitorio mientras se completa la migración.
.vtm2-btn | .vtm2-button-secondary | .vtm2-btn vtm2-btn--compact
Alias legado
.vtm-btn se conserva para exportaciones y compatibilidad, pero no debe introducirse como nuevo sistema visual paralelo.
Paneles
Contenedores de alto nivel.
Panel estándar
.vtm2-panelPanel operativo
.vtm2-panel-operationalPanel administrativo
.vtm2-panel-adminPanel de lectura
.vtm2-panel-readingTarjetas
Tarjetas reales de producción. El patrón visual aprobado se normaliza como .vtm-action-card y .vtm2-card.
Panel
Tarjeta de panel
Uso: Crónica y Gestión. Acceso a herramientas, módulos y vistas operativas. La acción queda anclada al pie aunque la descripción tenga distinta longitud.
.vtm-action-card + .vtm2-button-secondaryTarjeta de contenido
Uso: bloques de contenido interno en Crónica, con acciones al pie cuando proceda.
.vtm2-card + .vtm2-card-actionsComportamiento obligatorio
.vtm-action-card y .vtm2-card son columnas flexibles. Si incluyen botón o enlace de acción, la acción queda anclada al pie con margin-top:auto. El .vtm2-kicker es el patrón estándar para categoría contextual dentro de tarjeta.
.gestion-card y el uso visual de .vtm2-card quedan deprecados. Gestión debe usar .vtm-action-card.
Tablas y listados
Variantes de tabla para datos, administración y listados densos.
| Tipo | Uso | Clase |
|---|---|---|
| Estándar | Datos generales | .vtm-table |
| Compacta | Listados densos | .vtm-table-compact |
| Administrativa | Gestión y auditoría | .vtm-table-admin |
Formularios
Campos y ayudas obligatorios. Si existe catálogo, se usa selector en vez de campo libre.
Avisos y estados
Mensajes globales de sistema.
Estado vacío.
Responsive y grids
Breakpoints y columnas oficiales.
Móvilhasta 640 px: una columna, botones a ancho completo.
Tablet641-960 px: grids de 3/4 pasan a 2 columnas.
Escritorio961 px o más: ancho máximo común y grids completas.
Componentes V5 genéricos
Piezas mecánicas reutilizables. No pertenecen a un personaje concreto.
Pips de rasgo
.vtm2-pips .vtm2-pipCajas de registro
.vtm2-tracker-boxes .vtm2-track-boxLayouts completos V7
Contrato normativo de pantallas y subvistas. Un layout no es una clase CSS: es HTML, CSS, estados, responsive y reglas de composición.
| Layout | Uso | HTML canónico | Estado |
|---|---|---|---|
main-view | Gestión, Usuarios y futuras pantallas principales | .vtm2-view > .vtm2-section-header + cuerpo de vista | Inventariado |
section-view | Subvistas operativas de Crónica y futuras secciones | .vtm-section/.chronicle-view > header + body | Inventariado; migración pendiente a vtm2-section-header |
dashboard | Panel de Narrador y Gestión | grid de tarjetas operativas | Renombrar componentes visuales |
entity-sheet | Coterie, Negocio y futuras fichas densas | sheet layout + section cards + listas/tablas | Revisar renderizadores dinámicos |
wiki-reading | Compendio de reglas y contenido editorial | contenido largo + árbol jerárquico | Inventariado |
styleguide | Guía visual normativa | vtm-view + inventario + ejemplos reales | Inventariado |
Reglas de auditoría de interfaz
En vdoc0229 puede existir deuda documentada, pero no deuda desconocida. Lo desconocido bloquea la aceptación.
| Regla | Severidad | Criterio |
|---|---|---|
| Elemento no inventariado | Error | Cualquier layout, componente, estado, hook o clase relevante fuera del manifiesto es unknown. |
Layout visible sin data-vtm-layout | Error | Toda pantalla o subvista visible debe declarar su layout. |
| Clase visual de área usada fuera de su función | Aviso/Bloqueante | chronicle-*, gestion-* o usuarios-* no pueden ser sistema visual global. |
| Cabecera específica por área | Bloqueante para migración | No hay cabeceras de Crónica, Gestión o Usuarios; sólo cabeceras VTM por nivel. |
| Renderizador dinámico emite cabecera de vista | Revisar | Coterie y Negocio deben acabar rellenando cuerpo, no definiendo marco de pantalla. |