Sistema de diseño · Tinta y álbum

Guía de estilo

Reglas en docs/diseno.md; estilos en wwwroot/css/filatelia.css; motivos en wwwroot/img/motivos.svg.

Colores

Tintas de imprenta sobre papel de álbum. Todos los pares de texto cumplen AA.

--fi-ink#1c2e4aTinta de grabado: color principal, botones, enlaces y títulos
--fi-postmark#b13a1cBermellón de matasellos: acento, palabra destacada y acciones destructivas
--fi-album#1f3d33Verde de álbum: bandas oscuras, pie y paneles destacados
--fi-gold#b8862bDorado de canto: solo decoración (filetes, monedas)
--fi-gold-light#e3c27aDorado claro: texto y detalles sobre fondos oscuros
--fi-paper#f5efe3Papel: fondo de página
--fi-page#ebe3d1Hoja de álbum: fondo de fotos y miniaturas
--fi-surface#fffdf8Superficie: tarjetas, tablas y campos
--fi-line#e2d8c4Línea: separadores
--fi-line-strong#8f826aLínea fuerte: bordes de campos (3:1)
--fi-text#1d1f24Texto
--fi-muted#5b5e66Texto secundario

Marca y tipografía

Filatel.IA

Etiqueta de catálogo · IBM Plex Mono

Títulos en Fraunces, con una palabra en cursiva

Título de sección (h2)

Texto en Inter a 16 px: muy legible a cualquier tamaño. Texto secundario. Enlace.

4,50 € · Nº 0042 · 10/11/2026

Sobre fondo de álbum

Verde de álbum y dorado

Para bandas, el pie y paneles de ayuda. Úsalo como mucho una vez por pantalla.

Botón sobre fondo oscuro

Motivos e iconos

Dibujos propios en /img/motivos.svg. Toman el color del texto. Uso: <svg class="fi-icon" aria-hidden="true"><use href="/img/motivos.svg#lupa"/></svg>

#marca
#sello
#matasellos
#sobre
#lupa
#album
#pinzas
#moneda
#vitola
#postal
#ia
#fotos
#publicar
#enlace
#candado
#check
#flecha
#papelera
#pausa
#reproducir
#repetir
_SobreArt: estados vacíos, acceso y llamadas a la acción
50 FILATELIA 25 FLORA 10 FARO FILATEL·IA 10·XI·26 5
_HeroArt: solo en la portada pública

Botones

Estado del anuncio

Pendiente de generar En cola Generando… Propuesta de la IA: revísala Revisado En cola para publicar Publicando… Publicado Error

Sandbox de eBay (pruebas) eBay real Artículo 123456789012 (se abre en otra pestaña)

Aviso de propuesta de la IA: lo que la IA propone y el vendedor aún no ha revisado.

  1. Fotos subidas
  2. Propuesta de la IA
  3. Revisado
  4. Publicado

Primeros pasos

Portada con sesión. El primer paso pendiente es el principal.

  1. Conecta tu cuenta de eBay

    Hecho

    Publicamos con tu cuenta, tus envíos y tus devoluciones.

  2. Rellena tus ajustes de venta

    Pendiente

    Tu código postal y cómo envías.

  3. Sube tu primer lote de fotos

    Pendiente

    Puedes empezar ya.

Antes de publicar te falta preparar tu cuenta. Aviso de _SetupNotice en el lote y el editor.

Tarjeta de artículo

Artículo Nº 01Propuesta de la IA: revísala

Sellos Rusia URSS 1979 Pinturas de Flores Arte 5 Valores Nuevos MNH

Nuevo · categoría 404225,95 €
País de origen
Rusia, Federación de
Año de emisión
1979
Calidad
Nuevo sin charnela (MNH)
Ver descripción

Serie completa de 5 sellos nuevos sin charnela.

Estado en eBay y ajustes de venta

Activo en eBay Vendido Finalizado sin vender Estado sin determinar

En eBay: 2 activos en eBay · 1 vendido · 1 finalizado sin vender
Última consulta: 11/11/2026 10:30.
Nº 01 Sección de formulario
PesoEspañaEuropaResto del mundo
Hasta 20 g0,96 €2,00 €2,65 €
Hasta 50 g1,15 €2,30 €3,00 €

El estado en eBay (fi-ebay-state, vista parcial _EbayState) complementa al estado del anuncio, no lo sustituye.

Listas, formularios y estados vacíos

Menú de «Tu cuenta» (fi-subnav)

Estado vacío

Todavía no has subido ningún lote.

Demostración animada

La pieza fi-demo (_DemoVideo) es un «vídeo» de unos 28 segundos hecho con HTML, SVG y CSS: seis escenas en bucle con pausa, «Ver de nuevo» y salto de escena. Solo existe en un sitio, la portada pública (cierra sesión para verla), para no duplicar la animación. Esta es su estructura:

  • Sin JavaScript: tira de cuadros fijos con su texto. Con «reducir movimiento»: cuadros fijos con Anterior y Siguiente.
  • Se pausa fuera de pantalla y al ocultar la pestaña. Siempre lleva botón de pausa.
  • Los dibujos son decorativos (aria-hidden) y el guion completo va en texto oculto para lectores de pantalla.
Pausa Reproducir Ver de nuevo

Recorrido por la aplicación

La pieza fi-tour (_DemoTour) es un «tutorial en vídeo» de unos 45 segundos: seis pasos (Prepara tu cuenta, Sube tu lote de fotos, La IA prepara los anuncios, Revisa y corrige, Comprueba y publica, Sigue lo publicado) con las pantallas reales dentro de una ventana de navegador y un puntero que hace clic. Va en la portada pública, dentro de «Cómo funciona» (cierra sesión para verla); aquí solo se muestran sus piezas, para no duplicar la animación. Comparte motor, controles y reglas con fi-demo.

  • Cada pantalla se dibuja con los componentes reales y los textos de la página; los botones y campos son dibujos que no se pueden pulsar ni reciben foco.
  • Tiempos en milisegundos desde el inicio del paso: --at (aparece o cambia) y data-tap (el puntero llega y hace clic).
  • Mismos controles que la demostración: Pausa, «Ver de nuevo» y seis segmentos de 44 px. Con «reducir movimiento», cuadros fijos con Anterior y Siguiente.

Editor en tabla

Así se revisan los anuncios antes de publicar (pantalla real: /Lotes/Editar/{id}). Cabe a 1280 px sin desplazamiento; en el móvil cada fila se convierte en una tarjeta. Aquí son datos de ejemplo y no se guarda nada. La publicación llega en el paso 8, por eso el botón principal está desactivado.

Después, pulsa «Guardar cambios».
Foto Título y descripción Precio Estado País · Año · Calidad Categoría Revisión
Artículo Nº 01
78 / 80
Descripción
Sellos > Rusia
Propuesta de la IA: revísala
Artículo Nº 02
58 / 80
Descripción
Sellos > Rusia
Revisado
Artículo Nº 03
88 / 80
El título supera los 80 caracteres que admite eBay. Acórtalo un poco.
Descripción
Sellos > Rusia
Error
1 de 3 revisados · 1 con erroresLa publicación llega en el siguiente paso.