Documentación

Guía de referencia rápida, estándares de maquetación y API de componentes interactivos.

1. Paleta Cromática Central (:root)

El framework centraliza su identidad a través de variables nativas de CSS. Para alterar el esquema de color o el comportamiento visual entre comercios (tenants), basta con redefinir estas variables estructurales: 

                                            
    /* Definición Estándar de Colores de Negocio */
    :root {
        --primary-color: #0367fc;   /* Color dominante (Botones, enlaces activos) */
        --success-color: #118811;   /* Estados de éxito, stock óptimo, cajas cerradas */
        --danger-color: #990000;    /* Alertas críticas, bloqueos, pérdidas */
        --warning-color: #999900;   /* Stock mínimo, advertencias de sistema */
    }
2. Campos de Entrada Reactivos (Float Labels)

Para optimizar el espacio vertical en pantallas POS de mostrador, las etiquetas flotan automáticamente al detectar foco o contenido válido utilizando la estructura semántica de formularios del core:

VISTA PREVIA EN VIVO: 
                                            
    <div class="form-float">
        <input type="text" id="txtInputID" class="form-input" placeholder=" ">
        <label for="txtInputID">Etiqueta Flotante</label>
    </div>

Nota de Calidad: El atributo placeholder=" " con un espacio en blanco es obligatorio por estándar técnico para activar el selector CSS de pseudo-clase :placeholder-shown.

3. Integración de Periféricos (Teclado Virtual)

El teclado embebido se acopla a los elementos de entrada interceptando u evento de clic o foco nativo mediante la función global de control: 

                                            
    /* Firma del Método de Inicialización */
    SHOW_VIRTUAL_KEYBOARD(input_id, input_name);
Matriz de Parámetros de Configuración:
Parámetro Tipo Propósito Técnico
input_id String ID exacto del input destino en el DOM.
input_name String Texto descriptivo (placeholder) en el marcador del teclado.
4. Tablas adaptativas

En pantallas pequeñas las tablas se renderizan en estilo de tablas estrechas.

VISTA PREVIA DE LECTURA:
Producto Precio
Aceite 1L $38.50 
                                                
    <table class="table-cards">
        <thead>
            <tr>
                <th>Producto</th>
                <th>Precio</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-label="Producte">Aceite 1L</td>
                <td data-label="Preu">$38.50</td>
            </tr>
        </tbody>
    </table>
5. Sistema de Notificacions Asíncronas (Snackbars / Toasts)

El framework cuenta con notificaciones asíncronas tipo "Android" que generan mensajes flotantes sin bloquear el DOM. Los Snackbars pueden incluir un botón de acción 

                                            
    /* Firma de la función ShowSnackbar en scripts.js */
    ShowSnackbar(message, actionText, actionCallback, duration, statusClass);
Ejemplos de uso:
Tipo / Estado Código de invocación
Success ShowSnackbar("Venta procesada!", "", null, 3000, "snackbar-success");
Danger ShowSnackbar("Error de connexión", "", null, 4000, "snackbar-danger");
Warning ShowSnackbar("Caja casi llena", "Revisar", function(){ ... }, 6000, "snackbar-warning");