Moléculas
Átomos combinados en algo con una función concreta: una tarjeta, una tabla, un indicador, un buscador. Es el nivel donde se resuelve la mayoría de las pantallas.
Tarjeta de contenido
El contenedor por defecto de cualquier bloque: título a la izquierda, acción a la derecha.
styles/app-shell.css
<div class="content-card">
<div class="content-card-header">
<h2 class="content-card-title mb-0">Últimos movimientos</h2>
<button class="btn btn-gm-primary btn-sm"><i class="fas fa-plus me-1"></i> Nuevo</button>
</div>
<div class="content-card-body">
<p class="mb-0 text-muted">El contenido del bloque va acá.</p>
</div>
</div>Indicador (KPI)
La fila de cifras que abre casi todas las pantallas de listado.
GrupoMecsaProyectos/pages/clientes.php
<div class="row g-3">
<div class="col-md-4">
<div class="card kpi-card border-0 shadow-sm h-100">
<div class="card-body d-flex align-items-center">
<div class="icon-circle bg-primary bg-opacity-10 text-primary me-3"><i class="fas fa-users"></i></div>
<div>
<div class="kpi-label">Total Clientes</div>
<div class="kpi-value" data-counter="184">0</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card kpi-card border-0 shadow-sm h-100">
<div class="card-body d-flex align-items-center">
<div class="icon-circle bg-success bg-opacity-10 text-success me-3"><i class="fas fa-user-check"></i></div>
<div>
<div class="kpi-label">Activos</div>
<div class="kpi-value text-success" data-counter="167">0</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card kpi-card border-0 shadow-sm h-100">
<div class="card-body d-flex align-items-center">
<div class="icon-circle bg-danger bg-opacity-10 text-danger me-3"><i class="fas fa-user-slash"></i></div>
<div>
<div class="kpi-label">Inactivos</div>
<div class="kpi-value text-danger" data-counter="17">0</div>
</div>
</div>
</div>
</div>
</div>La cifra se anima sola con
data-counter. Tres o cuatro por fila; más que eso ya no se lee.Encabezado de pantalla
Título, bajada y acciones. Va arriba del contenido, después del topbar.
styles/app-shell.css
<div class="inner-page-header">
<div class="inner-page-titles">
<h1 class="inner-page-title">Clientes</h1>
<p class="inner-page-subtitle">Registro maestro de clientes y su estado comercial.</p>
</div>
<div class="inner-page-actions">
<button class="btn btn-outline-primary btn-sm"><i class="fas fa-file-excel me-1"></i> Exportar</button>
<button class="btn btn-gm-primary btn-sm"><i class="fas fa-plus me-1"></i> Nuevo cliente</button>
</div>
</div>Buscador de tabla
Filtra la tabla de abajo y muestra cuántos registros quedaron.
GrupoMecsaProyectos/pages/clientes.php
<div class="search-pill-container">
<div class="input-group-pill shadow-none border bg-light bg-opacity-50">
<input class="form-control" placeholder="Buscar clientes por nombre, identificación o tipo...">
<button class="btn-search" type="button"><i class="fa fa-search"></i></button>
</div>
<span class="search-count text-muted">Mostrando <span class="fw-bold text-dark">184</span> registros</span>
</div>Tabla de datos
Cabecera navy, filas con hover, estado como badge y acciones al final.
GrupoMecsaProyectos/pages/clientes.php
<div class="table-gm-container shadow-none border-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead class="colors-gm-primary text-white">
<tr>
<th class="ps-4 border-0 py-3">ID</th>
<th class="border-0 py-3">PROYECTO</th>
<th class="border-0 py-3">RESPONSABLE</th>
<th class="border-0 py-3">ESTADO</th>
<th class="text-end pe-4 border-0 py-3">ACCIONES</th>
</tr>
</thead>
<tbody>
<tr>
<td class="ps-4">1042</td>
<td>Mantenimiento planta norte</td>
<td><div class="d-flex align-items-center gap-2"><div class="gm-avatar-table">MR</div> M. Rodríguez</div></td>
<td><span class="badge-gm bg-success-soft">Completado</span></td>
<td class="text-end pe-4">
<button class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></button>
</td>
</tr>
<tr>
<td class="ps-4">1043</td>
<td>Instalación de bombas</td>
<td><div class="d-flex align-items-center gap-2"><div class="gm-avatar-table">JS</div> J. Sánchez</div></td>
<td><span class="badge-gm bg-warning-soft">En proceso</span></td>
<td class="text-end pe-4">
<button class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>Siempre dentro de
.table-responsive: en móvil la tabla scrollea sola en vez de romper la página.Paginación
Va debajo de la tabla, con el conteo a la izquierda y la navegación a la derecha.
GrupoMecsaProyectos/pages/clientes.php
<div class="pagination-gm">
<div class="pagination-info">
<span>Mostrando 1 - 25 de 184 registros</span>
<span class="page-indicator">Página 1</span>
</div>
<div class="pagination-nav">
<a href="#" class="btn-page arrow disabled">«</a>
<a href="#" class="btn-page active">1</a>
<a href="#" class="btn-page">2</a>
<a href="#" class="btn-page">3</a>
<a href="#" class="btn-page arrow">»</a>
</div>
</div>Resumen de ficha
Las cifras clave de un registro dentro de su detalle: monto, facturado, saldo.
GrupoMecsaProyectos/pages/proyecto.php
<div class="pd-stats">
<div class="pd-stat">
<div class="pd-stat-label">Monto del proyecto</div>
<div class="pd-stat-value">₡12.450.000</div>
<div class="pd-stat-foot">Tipo de cambio 515,00</div>
</div>
<div class="pd-stat">
<div class="pd-stat-label">Facturado</div>
<div class="pd-stat-value">₡8.400.000</div>
</div>
<div class="pd-stat">
<div class="pd-stat-label">Saldo pendiente</div>
<div class="pd-stat-value">₡4.050.000</div>
</div>
</div>Bitácora
Quién cambió qué y cuándo. Aparece en el detalle de cualquier registro auditado.
GrupoMecsaProyectos/pages/proyecto.php
<div class="pd-timeline">
<div class="pd-tl-item">
<span class="pd-tl-dot"></span>
<div class="pd-tl-body">
<div class="pd-tl-head"><strong>M. Rodríguez</strong> cambió el estado <span class="pd-muted">· hace 2 h</span></div>
<div class="pd-tl-diff">En ejecución → Pendiente informe</div>
</div>
</div>
<div class="pd-tl-item">
<span class="pd-tl-dot"></span>
<div class="pd-tl-body">
<div class="pd-tl-head"><strong>J. Sánchez</strong> agregó una factura <span class="pd-muted">· ayer</span></div>
<div class="pd-tl-diff">FE-00001482 · ₡1.250.000</div>
</div>
</div>
</div>Aviso y atajo
El aviso ámbar del panel de ayuda y la representación de una tecla.
starter/components/help.php
<div class="help-tip mb-3">
<i class="fas fa-lightbulb"></i>
<div>Los proyectos no se borran de verdad: se marcan como eliminados y dejan de aparecer.</div>
</div>
<div class="help-kbd-row">
<span><span class="help-kbd">Ctrl</span> + <span class="help-kbd">K</span></span>
<span>Ir al buscador</span>
</div>Alertas
Resultado de una acción o advertencia dentro del flujo. No las uses para ayuda permanente.
styles/app-shell.css
<div class="alert alert-success"><i class="fas fa-circle-check me-1"></i> El cliente se guardó correctamente.</div>
<div class="alert alert-warning"><i class="fas fa-triangle-exclamation me-1"></i> Hay facturas vencidas de este cliente.</div>
<div class="alert alert-danger mb-0"><i class="fas fa-circle-xmark me-1"></i> No se pudo guardar: revisá los campos marcados.</div>Migas de pan
Ubicación dentro del sitio. Va debajo del encabezado en las páginas internas.
GrupoMecsa/components/breadcrumb.php
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Inicio</a></li>
<li class="breadcrumb-item"><a href="#">Servicios</a></li>
<li class="breadcrumb-item active" aria-current="page">Protección contra rayos</li>
</ol>
</nav>Tarjeta de producto
La tarjeta de la tienda: imagen cuadrada, acciones al pasar el mouse, estrellas y precio.
GrupoMecsa/scripts/maintienda.js
<div class="row g-3" style="max-width:640px">
<div class="col-6">
<div class="h-100 product-card product-hover-card" tabindex="0">
<div class="ratio ratio-1x1 card-img-wrap">
<img src="../../assets/ph-square.svg" class="card-img-top" alt="Producto">
<button class="wishlist-toggle" title="Agregar a Wish List"><i class="fa-regular fa-heart"></i></button>
<button class="quick-view-btn cart-btn" title="Añadir al carrito"><i class="fa-solid fa-cart-shopping"></i></button>
<span class="badge product-category-badge">Pararrayos</span>
</div>
<div class="card-body d-flex flex-column align-items-center justify-content-end product-card-body">
<div class="product-title text-center">Pararrayos Franklin 4 puntas</div>
<span class="product-stock-status mb-1 text-success">Disponibles: 12</span>
<div class="product-rating text-warning my-1 small">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i>
<span class="text-muted ms-1" style="font-size:.75rem;">(8)</span>
</div>
<div class="product-price">₡84.500</div>
</div>
</div>
</div>
</div>Cuando el producto es cotizable el precio se reemplaza por
<span class="badge bg-warning text-dark">Cotizar</span>.Tarjeta de blog
Entrada del blog en el listado: portada, categorías, extracto y metadatos.
GrupoMecsa/pages/blog.php
<div class="row gm-posts-row" style="max-width:400px">
<div class="col-12">
<div class="card h-100 gm-card">
<a href="#" class="text-decoration-none">
<img src="../../assets/ph-wide.svg" class="card-img-top gm-card-cover" alt="Portada" loading="lazy">
</a>
<div class="card-body d-flex flex-column">
<a href="#" class="text-decoration-none">
<h5 class="card-title gm-card-title">Cómo saber si tu edificio necesita pararrayos</h5>
</a>
<div class="gm-card-categories-container mb-2">
<a href="#" class="gm-card-category me-2 text-decoration-none">Seguridad</a>
<a href="#" class="gm-card-category text-decoration-none">Protección contra rayos</a>
</div>
<p class="card-text gm-card-excerpt">Cuatro señales de que la instalación actual quedó corta frente a la norma vigente...</p>
<div class="mt-auto pt-3">
<div class="gm-card-author d-flex align-items-center">
<div class="author-avatar-small me-2"></div>
<div class="d-flex flex-column">
<span class="author-name">Grupo Mecsa</span>
<span class="post-date text-muted small">Ago 12 · 5 min read</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Tarjeta de vacante
Puesto abierto en Trabaja con Nosotros. El contenido lo administra KoraCMS.
GrupoMecsa/pages/trabaja-con-nosotros.php
<div style="max-width:420px">
<div class="card h-100 shadow-sm border-0 card-vacante-gm">
<div class="card-body">
<div class="d-flex justify-content-between mb-2">
<span class="badge bg-primary-light text-primary">Operaciones</span>
<span class="text-muted small"><i class="fa-solid fa-location-dot me-1"></i>San José</span>
</div>
<h4 class="card-title h4-gm fw-bold">Técnico electromecánico</h4>
<p class="card-text text-truncate-3 p-gm mb-3">Mantenimiento preventivo y correctivo de sistemas industriales en sitio, con disponibilidad para giras.</p>
<div class="mt-auto">
<div class="d-flex justify-content-between align-items-center">
<span class="small text-muted">Tiempo completo</span>
<a href="#" class="btn btn-primary btn-gm-primary">Ver Detalles</a>
</div>
</div>
</div>
</div>
</div>Alertas del sitio
Confirmaciones y errores de los formularios públicos (contacto, cuenta, checkout).
GrupoMecsa/scripts/account.js
<div class="alert alert-gm-success">
<i class="fa-solid fa-check-circle"></i>
<div>Contraseña actualizada correctamente.</div>
<button class="alert-close" aria-label="Cerrar">×</button>
</div>
<div class="alert alert-gm-error mb-0">
<i class="fa-solid fa-triangle-exclamation"></i>
<div>No pudimos procesar el pago. Revisá los datos de la tarjeta.</div>
<button class="alert-close" aria-label="Cerrar">×</button>
</div>La clase
.alert es obligatoria: sola, .alert-gm-success no pinta nada. El icono y el <div> son parte del layout flex.Filtros de la tienda
Columna izquierda del catálogo. Cada sección se pliega y recuerda su estado.
GrupoMecsa/scripts/maintienda.js
<div style="max-width:280px">
<div class="filter-section">
<div class="filter-header">
<span class="filter-title">Categorías</span>
<button class="filter-toggle" aria-expanded="true">−</button>
</div>
<ul class="filter-list filter-content">
<li class="filter-item"><label><input type="checkbox" checked> Pararrayos</label></li>
<li class="filter-item"><label><input type="checkbox"> Puestas a tierra</label></li>
<li class="filter-item"><label><input type="checkbox"> Señalización</label></li>
</ul>
<button class="filter-show-more">Ver más</button>
</div>
</div>Autocompletado del buscador
Sugerencias mientras se escribe en el buscador del encabezado: producto, servicio o artículo.
GrupoMecsa/components/header.php
<div class="gm-search-autocomplete position-relative" style="max-width:460px">
<input class="form-control form-control-gm-search w-100" type="search" value="pararrayos" aria-label="Buscar">
<div class="gm-search-suggestions shadow-lg" style="position:relative;display:block;">
<div class="gm-search-feedback small text-muted px-3 py-2">3 resultados</div>
<div class="gm-search-results">
<a href="#" class="gm-search-item">
<span class="gm-search-item__icon"><i class="fa-solid fa-magnifying-glass"></i></span>
<span class="gm-search-item__title">Pararrayos Franklin 4 puntas</span>
<span class="gm-search-item__type">producto</span>
</a>
<a href="#" class="gm-search-item">
<span class="gm-search-item__icon"><i class="fa-solid fa-magnifying-glass"></i></span>
<span class="gm-search-item__title">Protección contra rayos</span>
<span class="gm-search-item__type">servicio</span>
</a>
<a href="#" class="gm-search-item">
<span class="gm-search-item__icon"><i class="fa-solid fa-magnifying-glass"></i></span>
<span class="gm-search-item__title">¿Cada cuánto se revisa un pararrayos?</span>
<span class="gm-search-item__type">artículo</span>
</a>
</div>
<button type="button" class="gm-search-view-all btn btn-link w-100 text-start">Ver todos los resultados</button>
</div>
</div>El panel real está oculto (
hidden) y lo abre el JS del buscador; acá se muestra desplegado. El endpoint es pages/api/search-suggestions.php.Selector de variantes
Opciones de un producto (medida, color, material) con su indicador de existencias.
GrupoMecsa/scripts/product.js
<div class="variant-selectors" style="max-width:380px">
<div class="variant-group mb-3">
<label class="form-label small fw-semibold" for="variant-select-0">Altura</label>
<select class="form-select variant-select" id="variant-select-0">
<option>1,5 m</option>
<option>3,0 m</option>
</select>
</div>
<div class="variant-group mb-3">
<label class="form-label small fw-semibold" for="variant-select-1">Material</label>
<select class="form-select variant-select" id="variant-select-1">
<option>Cobre</option>
<option>Acero inoxidable</option>
</select>
</div>
<div class="variant-stock-indicator text-success">
<i class="fa-solid fa-circle-check me-1"></i> 12 disponibles
</div>
</div>Resumen de reseñas
Promedio y reparto por cantidad de estrellas en la ficha de producto.
GrupoMecsa/scripts/product.js
<div style="max-width:420px">
<div class="review-avg-box mb-4">
<span class="rating-number">4,2</span>
<div class="rating-stars">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i>
</div>
<div class="rating-count">38 reseñas</div>
</div>
<div class="review-distribution mb-0">
<div class="dist-row">
<div class="dist-star-label">5 <i class="fa-solid fa-star small text-warning"></i></div>
<div class="progress"><div class="progress-bar" role="progressbar" style="width:60%"></div></div>
<div class="dist-count">23</div>
</div>
<div class="dist-row">
<div class="dist-star-label">4 <i class="fa-solid fa-star small text-warning"></i></div>
<div class="progress"><div class="progress-bar" role="progressbar" style="width:24%"></div></div>
<div class="dist-count">9</div>
</div>
<div class="dist-row">
<div class="dist-star-label">3 <i class="fa-solid fa-star small text-warning"></i></div>
<div class="progress"><div class="progress-bar" role="progressbar" style="width:10%"></div></div>
<div class="dist-count">4</div>
</div>
<div class="dist-row">
<div class="dist-star-label">2 <i class="fa-solid fa-star small text-warning"></i></div>
<div class="progress"><div class="progress-bar" role="progressbar" style="width:5%"></div></div>
<div class="dist-count">2</div>
</div>
<div class="dist-row">
<div class="dist-star-label">1 <i class="fa-solid fa-star small text-warning"></i></div>
<div class="progress"><div class="progress-bar" role="progressbar" style="width:0%"></div></div>
<div class="dist-count">0</div>
</div>
</div>
</div>Entradas populares
Lista lateral del blog: miniatura, título, etiqueta y tiempo de lectura.
GrupoMecsa/pages/blog.php
<div style="max-width:360px">
<div class="gm-popular-post d-flex align-items-start mb-3">
<a href="#" class="flex-shrink-0 me-3">
<img src="../../assets/ph-wide.svg" alt="Portada" class="gm-popular-img rounded" loading="lazy">
</a>
<div class="gm-popular-content">
<a href="#" class="text-decoration-none">
<h6 class="gm-popular-title mb-1 text-dark">Cómo saber si tu edificio necesita pararrayos</h6>
</a>
<div class="gm-popular-meta d-flex align-items-center">
<span class="badge bg-light text-primary rounded-pill px-2 py-1 me-2 small fw-normal">Seguridad</span>
<span class="text-muted small">5 min read</span>
</div>
</div>
</div>
<div class="gm-popular-post d-flex align-items-start">
<a href="#" class="flex-shrink-0 me-3">
<img src="../../assets/ph-wide.svg" alt="Portada" class="gm-popular-img rounded" loading="lazy">
</a>
<div class="gm-popular-content">
<a href="#" class="text-decoration-none">
<h6 class="gm-popular-title mb-1 text-dark">Demarcación vial: qué pide la norma en Costa Rica</h6>
</a>
<div class="gm-popular-meta d-flex align-items-center">
<span class="badge bg-light text-primary rounded-pill px-2 py-1 me-2 small fw-normal">Vialidad</span>
<span class="text-muted small">5 min read</span>
</div>
</div>
</div>
</div>Temas del blog
Filtro de categorías del blog. Las subcategorías se pintan recursivamente.
GrupoMecsa/pages/blog.php
<div style="max-width:320px">
<div class="card gm-categories-card border-0">
<div class="card-body">
<h5 class="card-title fw-bold mb-3">Temas:</h5>
<div class="gm-categories-list">
<a href="#" class="gm-category-item active">Todos</a>
<a href="#" class="gm-category-item">Protección contra rayos</a>
<a href="#" class="gm-category-item">Asfalto y demarcación</a>
<a href="#" class="gm-category-item">Mantenimiento industrial</a>
</div>
</div>
</div>
</div>Paginación del sitio
La del blog y la del catálogo. Es la paginación de Bootstrap con la piel de la marca.
GrupoMecsa/pages/blog.php
<nav aria-label="Navegación del blog">
<ul class="pagination justify-content-center gm-pagination">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Anterior"><span aria-hidden="true">« Anterior</span></a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Siguiente"><span aria-hidden="true">Siguiente »</span></a>
</li>
</ul>
</nav>Horarios de atención
Bloque de la página de contacto. Los días cerrados llevan la clase cerrado.
GrupoMecsa/pages/contactenos.php
<div class="card-horarios-gm" style="max-width:420px">
<h3 class="titulo-horarios-gm">Horarios de la Empresa</h3>
<ul class="lista-horarios-gm">
<li><span class="dia">Lunes</span><span class="hora">07:00 AM - 05:00 PM</span></li>
<li><span class="dia">Martes</span><span class="hora">07:00 AM - 05:00 PM</span></li>
<li><span class="dia">Miércoles</span><span class="hora">07:00 AM - 05:00 PM</span></li>
<li><span class="dia">Jueves</span><span class="hora">07:00 AM - 05:00 PM</span></li>
<li><span class="dia">Viernes</span><span class="hora">07:00 AM - 05:00 PM</span></li>
<li><span class="dia">Sábado</span><span class="hora cerrado">Cerrado</span></li>
<li><span class="dia">Domingo</span><span class="hora cerrado">Cerrado</span></li>
</ul>
</div>Resumen del pedido
La columna derecha del pago con Onvo: líneas, impuestos y total.
GrupoMecsa/ecommerce/onvo_payment.php
<div class="onvo-order-summary-card" style="max-width:420px">
<h3>Resumen del Pedido</h3>
<div class="onvo-items-list">
<div class="onvo-summary-item-v2">
<div>
<div class="fw-semibold">Pararrayos Franklin 4 puntas</div>
<div class="text-muted small">1 × ₡74.779</div>
</div>
<div class="fw-semibold">₡74.779</div>
</div>
<div class="onvo-summary-item-v2">
<div>
<div class="fw-semibold">Cable de bajada 50 mm²</div>
<div class="text-muted small">2 × ₡18.500</div>
</div>
<div class="fw-semibold">₡37.000</div>
</div>
</div>
<div class="onvo-summary-totals">
<div class="d-flex justify-content-between"><span>Subtotal</span><span>₡111.779</span></div>
<div class="d-flex justify-content-between"><span>IVA (13%)</span><span>₡14.531</span></div>
<div class="d-flex justify-content-between fw-bold"><span>Total</span><span>₡126.310</span></div>
</div>
<div class="onvo-secure-badge"><i class="fa-solid fa-lock me-1"></i> Pago seguro procesado por Onvo</div>
</div>La orden la confirma el webhook de Onvo, no el navegador: no des una compra por buena porque el usuario volvió a la página de éxito.
Accesos rápidos
La fila de atajos del dashboard: lo que el usuario hace más seguido, a un clic.
GrupoMecsaProyectos/pages/dashboard.php
<div class="row g-3">
<div class="col-6 col-md-3">
<a href="#" class="action-card text-decoration-none gm-hover-lift">
<div class="action-icon bg-primary bg-opacity-10 text-primary"><i class="fa fa-hard-hat"></i></div>
<span class="action-label">Nuevo Proyecto</span>
</a>
</div>
<div class="col-6 col-md-3">
<a href="#" class="action-card text-decoration-none gm-hover-lift">
<div class="action-icon bg-success bg-opacity-10 text-success"><i class="fa fa-user-plus"></i></div>
<span class="action-label">Agregar Cliente</span>
</a>
</div>
<div class="col-6 col-md-3">
<a href="#" class="action-card text-decoration-none gm-hover-lift">
<div class="action-icon bg-warning bg-opacity-10 text-warning"><i class="fa fa-file-invoice-dollar"></i></div>
<span class="action-label">Facturar</span>
</a>
</div>
<div class="col-6 col-md-3">
<a href="#" class="action-card text-decoration-none gm-hover-lift">
<div class="action-icon bg-info bg-opacity-10 text-info"><i class="fa fa-chart-line"></i></div>
<span class="action-label">Ver reportes</span>
</a>
</div>
</div>Lista resumen
Bloque de «lo último» del dashboard: cabecera con enlace a la vista completa y una lista corta.
GrupoMecsaProyectos/pages/dashboard.php
<div class="card summary-card border-0 shadow-sm gm-hover-lift">
<div class="card-header d-flex justify-content-between align-items-center">
<h6>Proyectos Recientes</h6>
<a href="#" class="btn btn-white btn-sm rounded-pill px-3 border shadow-sm fw-bold">Ver todos</a>
</div>
<div class="card-body">
<div class="gm-stagger">
<div class="list-item-premium">
<div class="item-info">
<span class="item-title">Mantenimiento planta norte</span>
<span class="item-subtitle">Constructora del Sur</span>
</div>
<div class="item-meta"><span class="item-value text-primary-gm">En ejecución</span></div>
</div>
<div class="list-item-premium">
<div class="item-info">
<span class="item-title">Instalación de bombas</span>
<span class="item-subtitle">Agroindustrias CR</span>
</div>
<div class="item-meta"><span class="item-value text-primary-gm">Pendiente informe</span></div>
</div>
<div class="list-item-premium">
<div class="item-info">
<span class="item-title">Inspección anual</span>
<span class="item-subtitle">Municipalidad de Alajuela</span>
</div>
<div class="item-meta"><span class="item-value text-primary-gm">Programado</span></div>
</div>
</div>
</div>
</div>El
.gm-stagger hace que los ítems entren uno detrás de otro. Mostrá 3 a 5 y mandá el resto a «Ver todos».Pestañas
Para partir una pantalla en vistas del mismo tema. Si el contenido no se relaciona, hacé pantallas aparte.
GrupoMecsaProyectos/pages/analisis_prospectos.php
<ul class="nav nav-tabs mb-4" role="tablist">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabA" type="button">
<i class="fas fa-user-tag me-2"></i>Prospectos
</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabB" type="button">
<i class="fab fa-whatsapp me-2"></i>Origen de conversaciones
</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabC" type="button">
<i class="fas fa-balance-scale me-2"></i>Comparación de períodos
</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tabA"><p class="text-muted mb-0">Contenido de la primera pestaña.</p></div>
<div class="tab-pane fade" id="tabB"><p class="text-muted mb-0">Contenido de la segunda.</p></div>
<div class="tab-pane fade" id="tabC"><p class="text-muted mb-0">Contenido de la tercera.</p></div>
</div>Barra de tabla (admin)
Buscador a la izquierda y acción de guardado a la derecha, dentro de la tarjeta de administración.
GrupoMecsaProyectos/pages/admin_usuarios.php
<div class="admin-card-premium">
<div class="d-flex justify-content-between align-items-center mb-4">
<div class="gm-table-search">
<i class="fas fa-search"></i>
<input type="text" placeholder="Buscar colaborador...">
</div>
<button class="btn btn-primary rounded-pill px-4 fw-bold">
<i class="fas fa-save me-2"></i> Guardar Todo
</button>
</div>
<p class="text-muted mb-0">Acá va la tabla.</p>
</div>Es el contenedor de las pantallas de administración:
.admin-card-premium ya trae fondo, borde y radio; no le agregues .card.Matriz de permisos
Los permisos de un rol, agrupados por módulo, con interruptor por fila.
GrupoMecsaProyectos/pages/admin_roles.php
<div class="perm-group" style="max-width:480px">
<div class="perm-group-label">Comercial</div>
<div class="perm-list">
<label class="perm-row" for="perm_clientes">
<span class="perm-icon"><i class="fas fa-building"></i></span>
<span class="perm-name">Clientes</span>
<span class="gm-switch-premium">
<input type="checkbox" id="perm_clientes" checked>
<span class="slider"></span>
</span>
</label>
<label class="perm-row" for="perm_ofertas">
<span class="perm-icon"><i class="fas fa-file-signature"></i></span>
<span class="perm-name">Ofertas</span>
<span class="gm-switch-premium">
<input type="checkbox" id="perm_ofertas" checked>
<span class="slider"></span>
</span>
</label>
<label class="perm-row" for="perm_facturacion">
<span class="perm-icon"><i class="fas fa-file-invoice-dollar"></i></span>
<span class="perm-name">Facturación</span>
<span class="gm-switch-premium">
<input type="checkbox" id="perm_facturacion">
<span class="slider"></span>
</span>
</label>
</div>
</div>La fila entera es un
<label>: se puede tocar en cualquier parte, no solo el interruptor. Importante en móvil.Rol en la lista
Cada rol del sistema con su icono y cuántos usuarios lo tienen.
GrupoMecsaProyectos/pages/admin_roles.php
<div style="max-width:380px">
<div class="role-item-premium active mb-2">
<div class="d-flex align-items-center gap-3 w-100 p-1">
<div class="role-icon-box"><i class="fas fa-user-shield"></i></div>
<div class="flex-grow-1">
<div class="role-name">Administrador</div>
<div class="role-count">4 usuarios</div>
</div>
</div>
</div>
<div class="role-item-premium">
<div class="d-flex align-items-center gap-3 w-100 p-1">
<div class="role-icon-box"><i class="fas fa-briefcase"></i></div>
<div class="flex-grow-1">
<div class="role-name">Comercial</div>
<div class="role-count">11 usuarios</div>
</div>
</div>
</div>
</div>Esqueleto de tabla
Mientras carga un listado. Cada fila imita el ancho de sus columnas.
styles/app-shell.css
<div class="table-skeleton">
<div class="ts-row">
<div class="skeleton ts-cell ts-cell-sm"></div>
<div class="skeleton ts-cell"></div>
<div class="skeleton ts-cell"></div>
<div class="skeleton ts-cell ts-cell-sm"></div>
</div>
<div class="ts-row">
<div class="skeleton ts-cell ts-cell-sm"></div>
<div class="skeleton ts-cell"></div>
<div class="skeleton ts-cell"></div>
<div class="skeleton ts-cell ts-cell-sm"></div>
</div>
<div class="ts-row">
<div class="skeleton ts-cell ts-cell-sm"></div>
<div class="skeleton ts-cell"></div>
<div class="skeleton ts-cell"></div>
<div class="skeleton ts-cell ts-cell-sm"></div>
</div>
</div>Hay piezas sueltas para armar otros esqueletos:
.skeleton-avatar, -btn, -chip, -chart, -list-item y .kpi-skeleton.Hilo de comentarios
Los comentarios de un registro: inicial del autor, nombre, fecha y texto.
GrupoMecsaProyectos/pages/kanban.php
<div class="comments-container bg-light p-3 rounded-3" style="max-width:520px">
<div class="timeline-item">
<div class="timeline-avatar">MR</div>
<div class="timeline-content">
<div class="timeline-header">
<span class="author-name">María Rodríguez</span>
<span class="timestamp"><i class="far fa-clock"></i> 08/09/2026 14:20</span>
</div>
<div class="timeline-body">El cliente pidió mover la visita al jueves.</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-avatar">JS</div>
<div class="timeline-content">
<div class="timeline-header">
<span class="author-name">Jorge Sánchez</span>
<span class="timestamp"><i class="far fa-clock"></i> 07/09/2026 09:05</span>
</div>
<div class="timeline-body">Informe fotográfico entregado.</div>
</div>
</div>
</div>Se ordena del más nuevo al más viejo. Cuando no hay ninguno, el contenedor muestra una línea de texto centrada, no una tarjeta vacía.
Tarjeta de prospecto
La tarjeta del Kanban de prospectos. El borde de color indica el origen del lead.
GrupoMecsaProyectos/pages/prospectos.php
<div style="max-width:320px">
<div class="lead-card" style="cursor:pointer; border-left:4px solid #013483;">
<div class="lead-title">Ana Jiménez</div>
<div class="lead-company"><i class="fas fa-building"></i> Constructora del Sur</div>
<div class="lead-meta">
<span>#4821</span>
<span><i class="far fa-clock"></i> 08/09/2026</span>
</div>
<div class="mt-2 small text-muted"><i class="fas fa-user-tie me-1"></i> Asignado a M. Rodríguez</div>
</div>
</div>Reseña de producto
Una opinión publicada: estrellas, título, distintivo de compra verificada y comentario.
GrupoMecsa/scripts/product.js
<div class="review-item-premium" style="max-width:520px">
<div class="review-stars">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i>
</div>
<strong class="review-title">Cumplió con la norma sin problemas</strong>
<div class="review-meta">
<span class="badge-verified"><i class="fa-solid fa-circle-check"></i> Comprador Verificado</span>
<span class="review-author">Marta Q.</span>
<span class="review-date">12/08/2026</span>
</div>
<div class="review-content">
Llegó completo y con la ficha técnica. La instalación la hicieron ellos mismos y quedó
certificada a la primera.
</div>
</div>Calificar con estrellas
El campo de puntuación del formulario de reseñas. Solo aparece a quien compró el producto.
GrupoMecsa/ecommerce/product.php
<div class="mb-3" style="max-width:380px">
<label class="form-label d-block text-start">Puntuación</label>
<div class="rating-stars-input h4 text-warning" style="cursor:pointer; text-align:left;">
<i class="fa-solid fa-star" data-value="1"></i>
<i class="fa-solid fa-star" data-value="2"></i>
<i class="fa-solid fa-star" data-value="3"></i>
<i class="fa-solid fa-star" data-value="4"></i>
<i class="fa-regular fa-star" data-value="5"></i>
</div>
<input type="hidden" name="puntuacion" value="4" required>
</div>La puntuación viaja en un
<input type="hidden">: las estrellas son solo la interfaz, el JS las sincroniza.Tarjeta de división
Las áreas de negocio en /nosotros: icono y nombre, en una rejilla pareja.
GrupoMecsa/pages/nosotros.php
<div class="row g-3" style="max-width:640px">
<div class="col-6 col-md-3">
<div class="division-card p-3 text-center border rounded h-100">
<i class="fa-solid fa-bolt mb-2"></i>
<h5 class="h6 fw-bold mb-0">Pararrayos</h5>
</div>
</div>
<div class="col-6 col-md-3">
<div class="division-card p-3 text-center border rounded h-100">
<i class="fa-solid fa-road mb-2"></i>
<h5 class="h6 fw-bold mb-0">Asfaltos</h5>
</div>
</div>
<div class="col-6 col-md-3">
<div class="division-card p-3 text-center border rounded h-100">
<i class="fa-solid fa-shield mb-2"></i>
<h5 class="h6 fw-bold mb-0">Seguridad</h5>
</div>
</div>
<div class="col-6 col-md-3">
<div class="division-card p-3 text-center border rounded h-100">
<i class="fa-solid fa-gears mb-2"></i>
<h5 class="h6 fw-bold mb-0">Industrial</h5>
</div>
</div>
</div>Ficha del autor
Va en la columna del artículo. Con firma real el contenido pesa más para buscadores e IA.
GrupoMecsa/pages/post.php
<div class="card author-card" style="max-width:340px">
<div class="card-body">
<h5 class="card-title">Sobre el Autor</h5>
<div class="author-name">Ing. Marta Quesada</div>
</div>
</div>El nombre sale de
author_name del artículo en KoraCMS. Si queda vacío se cae a un genérico — poné siempre autor real.Cita destacada
Para resaltar una frase dentro de un artículo. Se usa desde el editor de KoraCMS.
GrupoMecsa/styles/pages/_blog.scss
<blockquote class="quote-highlight">
Una instalación de pararrayos no se certifica por el equipo que se compra,
sino por la puesta a tierra que lo acompaña.
</blockquote>Cabecera de artículo
Portada, categorías, título y metadatos de un post del blog.
GrupoMecsa/pages/post.php
<div style="max-width:640px">
<div class="gm-post-cover mb-4">
<img src="../../assets/ph-wide.svg" alt="Portada del artículo" class="img-fluid" loading="lazy">
</div>
<div class="gm-post-categories-container mb-3">
<a href="#" class="gm-card-category me-2 text-decoration-none">Seguridad</a>
<a href="#" class="gm-card-category text-decoration-none">Protección contra rayos</a>
</div>
<h1 class="h1-gm">Cómo saber si tu edificio necesita pararrayos</h1>
<div class="post-meta">
<span><i class="far fa-calendar"></i> 12 Ago 2026</span>
<span><i class="far fa-user"></i> Por Ing. Marta Quesada</span>
</div>
</div>Redes sociales
Los iconos de redes. Cada enlace lleva su aria-label: solo el icono no dice nada a un lector de pantalla.
GrupoMecsa/pages/contactenos.php
<div class="d-flex gap-2">
<a href="#" class="social-media-contacto-gm" target="_blank" aria-label="Facebook de Grupo Mecsa">
<i class="fa-brands fa-facebook-f" aria-hidden="true"></i>
</a>
<a href="#" class="social-media-contacto-gm" target="_blank" aria-label="Instagram de Grupo Mecsa">
<i class="fa-brands fa-instagram" aria-hidden="true"></i>
</a>
<a href="#" class="social-media-contacto-gm" target="_blank" aria-label="LinkedIn de Grupo Mecsa">
<i class="fa-brands fa-linkedin-in" aria-hidden="true"></i>
</a>
</div>En el pie del sitio la clase es
.social-media-footer-gm (misma idea, colores para fondo oscuro).Producto en vista de lista
La otra forma de ver el catálogo: imagen a la izquierda, descripción al centro y acciones a la derecha.
GrupoMecsa/scripts/maintienda.js
<div class="product-card product-card-list" tabindex="0" style="max-width:620px">
<div class="product-card-img">
<img src="../../assets/ph-square.svg" alt="Producto">
</div>
<div class="product-card-content">
<h3 class="product-title">Pararrayos Franklin 4 puntas</h3>
<div class="product-rating text-warning mb-1">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i>
<small class="text-muted ms-1">(8)</small>
</div>
<p class="product-description">Punta captadora de cobre con base ajustable, apta para torres y cubiertas metálicas.</p>
<div class="product-price mb-2">₡84.500</div>
</div>
<div class="product-card-actions">
<button class="wishlist-toggle-list" title="Agregar a Wish List"><i class="fa-regular fa-heart"></i></button>
<button class="cart-btn-list" title="Añadir al carrito"><i class="fa-solid fa-cart-shopping"></i></button>
</div>
</div>La tienda alterna cuadrícula y lista con la clase
.list-view en #productsGrid; el JS pinta un markup distinto para cada una.Filtros de vacantes
Barra de filtrado de Trabaja con Nosotros: departamento, ubicación y jornada.
GrupoMecsa/pages/trabaja-con-nosotros.php
<form class="filter-bar-gm p-4 bg-white shadow-sm rounded-4 d-flex flex-wrap align-items-end gap-3">
<div class="filter-item flex-grow-1">
<label class="form-label small fw-bold text-muted">Filtrar por Departamento</label>
<select class="form-select border-0 bg-light">
<option>Todos los departamentos</option>
<option>Operaciones</option>
<option>Comercial</option>
</select>
</div>
<div class="filter-item flex-grow-1">
<label class="form-label small fw-bold text-muted">Ubicación</label>
<select class="form-select border-0 bg-light">
<option>Todo el país</option>
<option>San José</option>
</select>
</div>
<button type="submit" class="btn btn-gm-primary">Filtrar</button>
</form>