Empezar aquí

1. Llevate el kit

Un .zip con el shell completo: tokens, hoja de estilos, sidebar, topbar, launcher, ayuda contextual, animaciones y cuatro plantillas de pantalla. Se arma en el momento desde el starter, así que siempre bajás la versión de hoy.

Si solo querés los estilos

2. Decidí qué estás construyendo

Hay dos familias de producto con reglas distintas. Confundirlas es el error más caro: terminás peleando contra el CSS del otro track.

3. Levantar una app interna

3.1 Copiá el kit

cp -r mecsa-starter C:/xampp/htdocs/MiAppNueva
# y abrís http://localhost/MiAppNueva/

Ya tenés el shell corriendo: sidebar plegable, topbar con launcher, ayuda contextual y modo oscuro. Todavía sin datos, pero completo.

3.2 Configurá la app

Todo lo que cambia de una app a otra vive en config.php. No hay que tocar el markup para cambiar el menú.

$GM_APP = [
    'name'  => 'Mantenimiento',      // aparece en breadcrumb, sidebar y footer
    'badge' => 'V1.0',
    'home'  => 'index.php',
    'help'  => true,                  // botón «?» del topbar
    'user'  => ['name' => $_SESSION['nombre'], 'role' => $_SESSION['rol'], 'photo' => ''],
    'links' => ['password' => 'change_password.php', 'logout' => 'functions/logout.php'],
    'new_button' => ['label' => 'Nueva orden', 'href' => 'pages/nueva.php'],
];

$GM_NAV = [
    ['type' => 'links', 'items' => [
        ['label' => 'Dashboard', 'icon' => 'fa-th-large', 'href' => 'index.php'],
    ]],
    ['type' => 'group', 'id' => 'grpOperacion', 'title' => 'Operación', 'items' => [
        ['label' => 'Órdenes', 'icon' => 'fa-list', 'href' => 'pages/ordenes.php'],
    ]],
];

3.3 Agregá una pantalla

Copiá pages/listado.php o pages/detalle.php y cambiale el contenido. La estructura siempre es la misma y el orden importa:

<?php
$GM_BASE = '../';                       // si la pantalla vive en pages/
require __DIR__ . '/../config.php';
$GM_BREADCRUMB = ['Operación', 'Órdenes'];   // App › Operación › Órdenes
?>
<body class="admin-page-premium">

    <?php include __DIR__ . '/../components/sidebar.php'; ?>   <!-- 1º: aplica el tema -->

    <div class="cms-main-content">
        <?php include __DIR__ . '/../components/header.php'; ?>

        <main class="page-content">
            ... tu contenido ...
        </main>

        <?php include __DIR__ . '/../components/footer.php'; ?>
    </div>
</body>

3.4 Documentá cada pantalla

El botón «?» del topbar lee components/help.php. Una entrada por pantalla, con el nombre de archivo como clave. Es lo primero que busca el usuario cuando no entiende algo, así que no lo dejes para el final.

$helpContent = [
    'ordenes.php' => [
        'titulo'  => 'Órdenes de trabajo',
        'resumen' => 'El registro de todo lo que hay que hacer en campo.',
        'puntos'  => [
            'Creá una con el botón <strong>Nueva orden</strong>.',
            'El técnico la ve en la app móvil apenas se asigna.',
        ],
        'tip'     => 'Una orden cerrada no se puede editar: hay que reabrirla.',
    ],
];

3.5 Conectá los datos

Todas las apps hablan con Supabase. La regla de oro:

• Las consultas van en endpoints PHP (api/), nunca desde el navegador.
• El backend usa service_role y pasa el tenant_id de forma explícita.
• La clave publicable no va en el HTML. Si está en el HTML, cualquiera la lee.

Copiá config/supabase.php y la carpeta api/ de Proyectos o de OPS: ya tienen el patrón resuelto.

3.6 Sumá la app al launcher

Para que aparezca en el menú waffle del resto de los sistemas, agregá una entrada al arreglo de starter/components/gm_launcher.php (la fuente canónica) y copiá el archivo a cada app.

['name' => 'Mantenimiento',
 'url'  => 'https://mantenimiento.grupomecsa.net',
 'icon' => 'fa-screwdriver-wrench',
 'color'=> '#0f766e'],

3.7 Publicá

Cada sistema es una carpeta en el hosting, servida por su propio subdominio. Pedile a TI el subdominio y las credenciales de FTP; después el despliegue es subir los archivos (o git pull en el caso de los que están en el VPS).

4. Agregar una página a la web

El sitio público vive en DesignSystemMecsa/GrupoMecsa/. Una página nueva son cuatro pasos:

1. Creá el archivo en pages/ y declará sus metadatos antes de incluir components/head.php.
2. Si necesita estilos propios, agregá un módulo en styles/pages/ y su @use en styles/main.scss. Nunca edites el CSS compilado.
3. Compilá el SCSS.
4. Dala de alta en sitemap.php.

<?php
$meta_title       = 'Mantenimiento industrial | Grupo Mecsa';
$meta_description = 'Preventivo y correctivo en planta, con informe fotográfico.';
$meta_image       = BASE_URL . 'assets/og/mantenimiento.jpg';
?>
<head>
    <?php include 'components/head.php'; ?>
</head>

sass GrupoMecsa/styles/main.scss GrupoMecsa/styles/main.css
sass GrupoMecsa/styles/main.scss GrupoMecsa/styles/main.min.css --style=compressed

# y refrescá la copia que usan las vistas previas de este catálogo:
cp GrupoMecsa/styles/main.css styles/web.css   # conservá la cabecera del archivo

5. Dónde está cada cosa

Todas viven bajo C:\xampp\htdocs\ en la máquina de trabajo. Los repos están en GitHub; las credenciales de FTP y del VPS las administra TI.

6. Reglas de la casa

• Nunca escribas un HEX dentro de un componente de app. Siempre var(--brand), var(--text), var(--bg-surface)… Así el modo oscuro sale gratis; si escribís #fff, lo rompés.
• Editá SCSS, nunca el CSS compilado. El compilado se regenera y se lleva tus cambios puestos.
• Ancho completo. Sin max-width que deje franjas blancas a los lados. La excepción es la lectura larga (blog), donde sí se limita el ancho del texto.
• Antes de inventar un componente, buscalo en el catálogo. Hay más de cien piezas ya resueltas, con su código para copiar.
• Respetá prefers-reduced-motion en cualquier animación nueva.
• Ninguna clave en el navegador. Las consultas a Supabase van por endpoints PHP con service_role.

7. Checklist antes de publicar

8. Dónde seguir