Componentes reutilizables

# Button + Input

Pagina dedicada a probar variantes de los componentes compartidos.

## Comunes

Primary Secondary Danger Danger secondary Cancel

## Disabled

Primary Secondary Danger Danger secondary Cancel

## Una letra

A B C D E

## Toasts

Trigger Info Trigger Success Trigger Danger

## Toasts Persistentes (No se van)

Info Persistente Success Persistente Danger Persistente

## Modal

Demo del modal global con servicio, host y devolucion de resultado.

Abrir confirm modal Abrir confirm delete Abrir modal bloqueado Abrir modal ancho Abrir simple modal
{{ lastModalResult }}

## Icon Buttons

Botones de icono pequenos con color base `#666666`, deshabilitados con `#A0A0A0` y estados hover/active con color de marca (a excepcion de trash que usa danger).

Disabled
Normal
Active / Hover

## Cart Icons

Icono de carrito con badge opcional indicando cantidad.

Disabled
Normal
Active / Hover
Texto
Numero
Email
Usuario
Password
Fecha
Periodo
Moneda
Porcentaje
Deshabilitado
Editable
Invalido
Archivo
Limpiar archivo

## Paginator

Componente shared para navegar por paginas con primera, anterior, siguiente y ultima.

## Carrito mock

Demo visual aislada del carrito con scroll a partir del cuarto item.

@if (!cartVisible) { Volver a mostrar carrito }
@if (cartVisible) {
}
Tenant Configuration

## Configuracion Tenant

Logo del Header
@if (tenant()?.header_logo) { } @else {
Sin Logo de Header
}
Logo del Footer

### Colores de Marca

Primario `{{ tenant()?.primary_color || 'Default' }}`
Secundario `{{ tenant()?.secondary_color || 'Default' }}`
Danger `{{ tenant()?.danger_color || 'Default' }}`
Success `{{ tenant()?.success_color || 'Default' }}`
Header BG `{{ tenant()?.header_bg_color || 'Default' }}`
Footer BG `{{ tenant()?.footer_bg_color || 'Default' }}`
Reusable Component

## Tarjetas de Producto (ProductCard)

Las tarjetas se adaptan al tamano del contenedor padre. A continuacion se presentan dentro de una grilla de Bootstrap.

@for (product of testProducts; track product.title) {
}
@for (product of testProducts; track product.title) {
}