diseo-theme-ypservices

name: Diseño Theme YPServices description: Guía de estilos oficial y sistema de diseño para YPServicesERP. Referencia obligatoria para mantener la consistencia visual en todas las secciones.

🎨 Sistema de Diseño YPServicesERP

1. Arquitectura CSS

Core CSS (main.css)

El archivo main.css solo importa estilos core/tema:

CSS de Página (cargado individualmente)

Cada página HTML carga su CSS específico después de main.css:

<link href="assets/css/main.css" rel="stylesheet">
<link href="assets/css/client.css" rel="stylesheet">

2. Paleta de Colores (variables.css)

Principales

Estados

Textos (Light Mode)

3. Tipografía (base.css)

• Font Family: 'Plus Jakarta Sans', sans-serif
• Uso: Importar desde Google Fonts

4. Componentes UI (components.css)

📊 KPI Cards

<div class="kpi-card">
    <div class="kpi-header">
        <div class="kpi-icon primary"><i class="bi bi-currency-dollar"></i></div>
        <span class="kpi-trend up"><i class="bi bi-arrow-up"></i> 12.5%</span>
    </div>
    <div class="kpi-label">Título</div>
    <div class="kpi-value">$24,500</div>
    <div class="kpi-sublabel">Comparativa</div>
</div>

Variantes icon: .primary, .success, .warning, .info, .danger

🔖 Status Badges

<span class="status-badge active">Activo</span>
<span class="status-badge pending">Pendiente</span>
<span class="status-badge progress">En Progreso</span>
<span class="status-badge overdue">Vencido</span>

🔘 Botones

📝 Formularios

<label class="form-label-custom">Label</label>
<input type="text" class="form-control-custom" placeholder="...">
<select class="form-select-custom"><option>...</option></select>

5. Layout (layout.css)

6. Reglas

1. NO hardcodear colores → Usar var(--variable)
2. Espaciado → Bootstrap utilities: p-*, m-*, gap-*
3. Iconos → Bootstrap Icons: bi bi-[nombre]
4. Dark Mode → Siempre verificar con data-theme="dark"
5. CSS por página → Cargar CSS específico individualmente

Actualizado: 2026-01-25

7. Responsive Breakpoints (responsive.css)

El sistema utiliza 4 breakpoints principales para adaptar la interfaz:

8. Estructura de Layout (layout.css)

<div class="app-container">
    <!-- Sidebar -->
    <aside class="sidebar" id="sidebar">
        <div class="sidebar-header">...</div>
        <nav class="sidebar-nav">...</nav>
        <div class="sidebar-footer">...</div>
    </aside>

    <!-- Main Content -->
    <main class="main-content">
        <!-- Header Sticky -->
        <header class="main-header">
            <button class="menu-toggle">...</button>
            <div class="search-box">...</div>
            <div class="header-actions">...</div>
        </header>

        <!-- Page Content -->
        <div class="page-content">
           <!-- Contenido dinámico -->
        </div>
    </main>
</div>

9. Componentes Adicionales (components.css)

📋 Tablas (.table-custom)

Tablas limpias con bordes suaves y hover effects.

<div class="table-responsive">
    <table class="table table-custom">
        <thead>
            <tr><th>Encabezado</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="d-flex align-items-center gap-3">
                        <div class="table-avatar">JD</div> <!-- Avatar -->
                        <div>
                            <span class="table-user-name">John Doe</span>
                            <span class="table-user-email">john@example.com</span>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

🖥️ Modales (.modal-custom)

Modales flotantes con bordes redondeados y sombra suave.

<div class="modal fade modal-custom" id="miModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Título</h5>
                <button type="button" class="modal-close-btn" data-bs-dismiss="modal">
                    <i class="bi bi-x"></i>
                </button>
            </div>
            <div class="modal-body">...</div>
            <div class="modal-footer">...</div>
        </div>
    </div>
</div>

🍞 Toasts (.toast-custom)

Notificaciones flotantes en la esquina inferior derecha.

<div class="toast-container-custom">
    <div class="toast toast-custom show align-items-center border-0" role="alert">
        <div class="d-flex">
            <div class="toast-body d-flex align-items-center gap-2">
                <i class="bi bi-check-circle-fill text-success"></i>
                <div>
                    <h6 class="mb-0">Éxito</h6>
                    <small>Operación completada.</small>
                </div>
            </div>
            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>