Componentes

Los botones siguen la base de Bootstrap 5.2. Tres tipos (solid, outline, ghost) × cinco colores × tres tamaños. Texto e ícono según el tamaño: sm 14 px con ícono de 16; md 14 px con ícono de 20; lg 16 px (interlínea 150%) con ícono de 24. Foco: anillo de 3 px al 40% del color del botón. Deshabilitado: opacidad 60%. En secondary, el solid es gris claro (secondary-100) con texto oscuro, no gris oscuro. En el prototipo los estados fijos se dibujan con .is-hover, .is-active y .is-focus.

Botón cuadrado de 32, 40 o 48 px con el ícono en 16, 20 o 24 (Button / Icon only). Existe en cuatro colores (primary, secondary, danger y light): no hay versión brand. Sin texto visible, siempre lleva aria-label.

Button / Close: 24 × 24 con ícono de 16 y radio 8. En reposo está al 50% de opacidad, en hover al 75% y deshabilitado al 25%; el foco es el anillo azul de 3 px al 40%. La variante dark es para fondos oscuros.

Alto de 40, padding horizontal de 16 y borde de 1 px en primary-500. Seleccionado: relleno primary-500 y texto blanco (en hover, primary-600). Sin seleccionar, el hover rellena con primary-50. Deshabilitado: opacidad 50%. En Figma, el texto del Segment suelto es primary-600 y el del Segmented control, primary-500; así se muestra cada uno. Figma define el control de 4 opciones: los de 2 y 3 combinan el mismo Segment. Funciona como una sola selección por vez.

Figma define el grupo de cuatro botones en outline y solid, en primary y tamaño md. El outline superpone los bordes de los botones contiguos; el solid no lleva divisor entre botones.

Botón principal más un chevron (expand_more) de 40 × 40. El solid los separa con un divisor de 1,5 px en primary-700; el outline comparte el borde. Figma no dibuja el menú: se resolvió con el mismo dropdown de acciones (teclado incluido) y sus opciones son de ejemplo.

Los badges tienen 18 px de alto (24 en la variante grande), 4 px de radio y texto en mayúsculas. Contraste: el amarillo warning lleva texto oscuro; el resto, blanco. Los light usan el paso 50 de la familia con el texto en el paso 500/600/700 que alcanza contraste AA.

Texto de 12 px; los ítems anteriores son enlaces (--link-color) separados por un chevron de 20 px; el último es la página actual, en texto principal y sin enlace (aria-current="page").

El alert inline acompaña al contenido (padding 16, radio 8, borde de 1 px del paso 200). El toast mide 300 px, flota sobre la pantalla con --shadow-md y no tiene botón de cierre: se retira solo a los pocos segundos. Success usa el check, info la «i» y warning y danger el triángulo de advertencia. El enlace de los alerts va subrayado para no depender solo del color.

Ítem de la lista de notificaciones, de 233 px. En foco cambia el fondo a primary-50 y el borde a primary-500; presionado agrega el anillo.

El panel entra desde la derecha: 400 px en desktop y 268 en mobile, con encabezado de 59 px y las esquinas izquierdas redondeadas. Cada ítem es el de Ítem de notificación; sin novedades se muestra el estado vacío. Se abre desde la campanita del header en las pantallas: atrapa el foco, se cierra con Esc, con la ✕ o con un clic en el fondo, y vuelve el foco a la campana.

Las pestañas miden 40 px de alto, con una línea inferior de 1,5 px que se completa hasta el borde; la activa lleva el color primario. Funcionan con teclado: flechas, Inicio y Fin. Las pill tabs son un control segmentado para cambiar de vista dentro de una misma sección.

Los inputs, igual que los selects, están basados en Tailwind (el resto del sistema, en Bootstrap 5.2). Todos los campos tienen radio 12 y la etiqueta flotante: dentro del campo en reposo (14 px, texto secundario) y sobre el borde (12 px, fondo blanco) con foco, valor o error. El texto de ayuda de 12 px reserva 22 px de alto apenas aparece. Foco: borde primary-600 y anillo de 3 px al 40%. Error: borde danger-500 y etiqueta y ayuda en danger-600. Éxito: borde success-500 y texto success-600. Deshabilitado: etiqueta y texto en --disabled, sin ayuda. La contraseña se muestra y se oculta con el ojo (aria-pressed).

Los selects, como los inputs, están basados en Tailwind. Es un select nativo con el aspecto del sistema: valor, etiqueta y lector de pantalla funcionan como siempre. Al abrirlo con mouse o teclado muestra la lista del sistema de diseño (el mismo panel del dropdown de acciones: opciones de 32 px, la elegida en primary-50) y en pantallas táctiles deja el selector del sistema operativo, que es mejor en mobile. Figma dibuja el campo cerrado pero no la lista abierta: se resolvió con el panel del dropdown. El placeholder va en texto secundario; el chevron es de 16 px.

El select doble une un select chico de fondo secondary-50 (por ejemplo, el tipo) con otro de ancho libre (el valor); comparten el borde y solo tienen radio en las puntas. Con un valor elegido aparece la ✕ para borrarlo. En foco el borde pasa a primary-600 y sube por encima del vecino.

Las cajas miden 18 px (borde de 1,5 px, radio 4); el switch viene en tres tamaños. Foco: anillo de 3 px al 40% del primario. Todos son controles nativos (input) con el aspecto del sistema: se usan con teclado y lector de pantalla sin trabajo extra. El switch tiene role="switch".

El menú contextual es el mismo de la columna del servicio: panel de 204 px (padding 8, gap 4, radio 8, sombra 0 8 16 al 12%) con ítems de 40 px; el seleccionado va en primary-50 con texto primary-600. Con group, el encabezado va en negrita y los subítems se sangran 24 px. El dropdown de acciones tiene ítems de 32 px con ícono de 20 y hover secondary-50; la acción destructiva va en rojo. Al abrirlo, el foco pasa al primer ítem.

Cada día mide 36 × 36 (radio 4). Hoy lleva un borde interior de 1,5 px en primary-500; el seleccionado, fondo primary-500 y texto blanco; los días del mes anterior y siguiente van en --disabled y los deshabilitados en border-strong; los días fuera del mes no se eligen (se pasa de mes con las flechas). Desvío respecto de Figma: los nombres de los días de la semana van en text-muted y no en border-strong, que con 12 px no llega a contraste 4,5:1. El panel tiene el mes y el año como selects (con la misma lista del sistema de diseño), flechas para pasar de mes y funciona con teclado: flechas (±1 día, ±1 semana), Inicio/Fin, Re Pág/Av Pág (mes), Enter para elegir y Esc para cerrar. En el campo, el ícono abre el calendario y también se puede escribir la fecha.

Rail de 8 px (secondary-100) con el tramo elegido en secondary-200; la manija es un círculo de 16 px que pasa de primary-500 a primary-600 en hover, y en foco o presionado suma un borde blanco de 1 px y un anillo de 3 px al 35%. Las marcas de 12 px se pintan «activas» (relleno blanco, borde primary-100) hasta el valor elegido. Es un input type="range" nativo (dos en el rango): se mueve con flechas, Inicio y Fin. Desvío respecto de Figma: las etiquetas de las marcas inactivas van en text-muted y no en border-strong (contraste).

En desktop cada paso es una caja de 34 px (radio 4, token radius/4): el actual va en primary-500 con el número en blanco, los pendientes en blanco con el número en secondary-500 y los completados con un check. Entre cajas, una línea de 2 px que se pinta de primario hasta donde se llegó. Con menos de 420 px de ancho el componente pasa solo a la versión mobile: «PASO n DE 3», el nombre del paso y una barra de 6 px. Lleva aria-current="step".

Small · 32 · con foto

Small · 32 · sin foto

Medium · 80 · con foto

Medium · 80 · sin foto

Medium · verificado

Medium · sin foto · verificado

Dos tamaños: small de 32 px (el del header) y medium de 80 px. Sin foto, el círculo es secondary-200 con la silueta en texto secundario (20 y 45 px). La insignia de verificado existe solo en medium: un check_circle de 24 px en success-500 con halo blanco, a 2 px de la esquina inferior derecha. La foto es de ejemplo.

Barra de 10 px (14 en la variante grande) con pista secondary-100. Un valor mayor que cero siempre muestra al menos 12 px de relleno, para que “1 de 200” no parezca vacío; con cero queda vacía. Lleva role="progressbar" y el texto del valor al lado.

El acordeón agrupa preguntas o secciones y las muestra de a una o de a varias. La tarjeta colapsable es la variante que se usa en el detalle del servicio: título de 18 px con el chevron hacia arriba cuando está abierta. Ambos usan aria-expanded y aria-controls.

Rango (“Mostrando 1 a 5 de 12”) a la izquierda y navegación a la derecha: primera, anterior, “Página 1 de 3”, siguiente y última. Los botones de los extremos se deshabilitan en la primera y la última página. Funciona de verdad en Lista de servicios.

Barra de herramientas de una lista: búsqueda (campo + botón de ícono), orden y cantidad por página. En desktop va en una fila (búsqueda de 300 px, orden de 232, cantidad de 80); en mobile se apila en dos filas.

Filas de 44 px (62 con dos líneas) con borde inferior de 1 px secondary-100; el encabezado mide 37 px, con texto de 14 px en mayúsculas y color secondary-600. Estados de fila: hover secondary-50, seleccionada brand-50, éxito, advertencia y peligro en el paso 50 de cada familia, y light secondary-100. Las columnas ordenables cambian de ícono y exponen aria-sort. En mobile cada fila pasa a una tarjeta de 296 px (padding 16, radio 12) con los datos como pares etiqueta-valor.

Son los modales más representativos, no todos los que puede haber en el producto: cuatro anchos: Small 328, Default 500, Large 800 y Extra Large 1140, con o sin botón de cierre. Padding 24, gap 20, borde de 1 px secondary-100 y radio 12; el título va en 18 px y el texto en 14 px text-muted. Es un <dialog> nativo: atrapa el foco, se cierra con Esc o con un clic en el fondo, y devuelve el foco al botón que lo abrió. En mobile los botones del pie se apilan a ancho completo. En la confirmación destructiva, el botón se habilita al marcar la casilla.

El tooltip tiene 4 posiciones (Arriba, Abajo, Izquierda y Derecha): fondo secondary-900, texto blanco de 14 px, radio 4, padding 4 / 8 y una flecha de 12,8 × 6,4 que se solapa 2 px con el cuerpo. La posición es el lado del disparador donde aparece; la flecha apunta al disparador. Aparece al pasar el mouse o enfocar con teclado, Esc lo oculta y, si del lado elegido no hay lugar, pasa al opuesto. En el sidebar colapsado se usa a la derecha del ítem. El spinner es un arco de 270° con aro de 2,7 px en el color primario; con prefers-reduced-motion gira más lento.

8 variantes en Figma: 4 posiciones por con o sin título. Tarjeta de 180 px de ancho, fondo blanco, borde de 1 px secondary-100, radio 8 y sombra 0 2 4 al 8%. El encabezado (opcional) mide 38 px, con fondo secondary-50 y título de 14 px SemiBold; el cuerpo lleva padding de 16 y texto de 14 / 22. La flecha mide 16 × 8, va centrada en el lado de la tarjeta y sobresale 5 px. La posición es el lado del disparador donde aparece (Arriba: el popover queda encima y la flecha mira hacia abajo).

Comportamiento: se abre con clic, Enter o Espacio y se cierra con Esc (el foco vuelve al botón), con un clic afuera o al tabular hacia afuera. Si del lado elegido no hay lugar pasa al opuesto, y si queda pegado al borde de la ventana la flecha sigue apuntando al disparador. Los menús del avatar y del sidebar son otro componente (menús con ítems): están en Header y sidebar.

Estado vacío centrado: ícono de 32 px en un círculo gris de 48, título de 18 px, descripción de 12 px y, si ayuda, una acción. Se ve en Lista de servicios · sin resultados.

Dos tarjetas: la tarjeta de servicio de las listas (radio 16, padding 16) y la tarjeta de detalle (radio 12). Fondo blanco y borde de 1 px secondary-100. La fecha de vencimiento va en rojo solo cuando el servicio venció o está por vencer; en el resto va en texto principal.

Son las tarjetas más representativas, no todas las que existen en el producto: hay muchas más variantes y este catálogo recoge las que define la página Cards de Figma. Mismo patrón para todas: fondo body-bg, borde de 1 px secondary-100, radio 12 (16 en las tarjetas de servicio), padding 16 y gap 20; título en 18 px (16 en Resumen del plan y Uso de recursos) y texto en 14 px text-muted. Cada una se muestra en desktop (1032) y mobile (328) con el mismo marcado: pasa a la versión mobile por el ancho de su contenedor (menos de 600 px), no por el del viewport. Precios y Paso numerado existen en Figma en un único tamaño (402 y 349), y así se muestran.

Ya están en otras fichas: Servicio (ícono) y Selector de periodo en Micro-interacciones, y las tarjetas de la lista y de detalle en Tarjetas.

Dos familias. Las que redirigen (una tarjeta que lleva a otra pantalla) cambian en hover el borde a secondary-200 y suman una sombra 0 2 4 al 8%; en foco, un aro de 3 px al 80% de secondary-200. Las que quedan seleccionadas (opciones de un grupo) pasan a fondo primary-50 con borde primary-500. Son radio nativos dentro de un label: flechas para moverse en el grupo, espacio para elegir. La tarjeta de medio de pago es una versión genérica, sin logos de terceros. Las transiciones duran 150 ms y se anulan con prefers-reduced-motion.

Header y sidebar viven en las pantallas, así que estas vistas son las pantallas reales recortadas: se usan igual que en el producto. El header lleva el logo, la promoción de referidos, regalos, carrito, la campana con el panel de notificaciones y el avatar con el popover de la cuenta; los botones ghost light cambian de fondo en hover y foco. El sidebar mide 248 px expandido y 56 colapsado (con tooltip en cada ítem y popover para los subítems). En mobile el header pasa a 50 con botón de menú y el sidebar se abre como drawer de 268.