Guía de Estilos

Elementos que se usarán en la página

Botones

Estados deshabilitados

Variantes de tamaño

Ancho completo

Botones de Icono

Títulos

Título base (md)

Título Extra Grande

Título Grande

Título Mediano

Título Pequeño

Título Extra Pequeño

Variantes de color

Título Primario

Título Oscuro

Título Texto

Títulos con subrayado

Título H2 Medium (20px)

Título H4 Medium (16px)

Cuadros de texto

Controles de formulario

Switch (Toggle)

Haz clic en los switches para ver el cambio de estado

Switch por defecto

Switch pequeño (variante)

Checkbox

Haz clic en los checkboxes para marcar/desmarcar

Checkbox por defecto

Checkbox deshabilitado

Radio Button

Haz clic en los radio buttons para seleccionar/deseleccionar

Radio button por defecto

Radio button deshabilitado

Texto General

Texto con color oscuro (#333333)

Texto con color estándar (#565656)

Texto placeholder (#b2b2b2)

Texto resaltado (#0d5e65)

Sombras

Sombras de alertas

Sombra Error

Sombra Advertencia

Sombra Éxito

Sombra Info

Sombras de contenedores

Contenedor

Paleta de Colores

Colores principales

Primario (#118b95)

Primario Oscuro (#134145)

Colores de borde

Borde (#639297)

Borde Claro (#a4e6ea)

Borde Suave (#dcf4f7)

Colores de superficie y fondo

Fondo Ficha (#E3FBFF)

Superficie (#e8fafc)

Fondo Tab (#FBFFFF)

Superficie Botón (#f5feff)

Fondo General (#fdfdfd)

Contenedores

Panel principal

Panel Principal

Contenedor base con borde, sombra y padding responsivo

Cards

Card

Card de Herramienta

Título de herramienta

Descripción de la herramienta que explica su funcionalidad de forma clara y concisa.

Estados

Activo

Inactivo

Divisor

Utilidades

Scrollbar personalizado

Contenido con scroll personalizado

Línea 2

Línea 3

Línea 4

Línea 5

Línea 6

Línea 7

Línea 8