/*******************************************************************************
*
* GESBOX ERP — master.css
* Sistema de Design Tokens centralizado
*
* Ruta recomendada: /assets/css/master.css
*
* CÓMO USAR:
* 1. Añadir este en el de cada index.html, ANTES de gesbox.3.css:
*
*
* 2. Para personalizar: editar SOLO los valores de esta sección :root {}.
* El resto del ERP se actualiza automáticamente.
*
* 3. Los módulos deben usar las variables aquí definidas en sus custom.css,
* en lugar de valores hex fijos.
*
*******************************************************************************/
/*******************************************************************************
* ══════════════════════════════════════════════════════
* ZONA DE PERSONALIZACIÓN — editar solo aquí
* ══════════════════════════════════════════════════════
******************************************************************************/
:root {
/* ------------------------------------------------------------------
* MARCA / IDENTIDAD
* ------------------------------------------------------------------ */
/* Color principal: header, navbar, fondo de cards de datos */
--gb-primary: #25282A;
--gb-primary-hover: #3A3A39;
--gb-primary-dark: #26272b;
--gb-white: #E7E8EA;
/* Color secundario: botones de acción, acentos */
--gb-secondary: #00ADD5;
--gb-secondary-hover: #0690AC;
--gb-secondary-dark: #25282A;
--gb-secondary-rgb: 72, 19, 146;
/* Color de acento (resaltados, badges activos) */
--gb-accent: #7c3aed;
--gb-accent-soft: rgba(124, 58, 237, 0.15);
/* ------------------------------------------------------------------
* FONDO GENERAL
* ------------------------------------------------------------------ */
/* Fondo del body (Desktop usa gradient, módulos usan color sólido) */
--gb-bg-desktop-from: #E7E8EA;
--gb-bg-desktop-mid: #E7E8EA;
--gb-bg-desktop-to: #00ADD5;
/* Fondo sólido para módulos (listados, detalle) */
--gb-bg-app: var(--gb-primary);
/* Fondo de contenido: cards, paneles, modales */
--gb-bg-surface: rgba(255, 255, 255, 0.52);
--gb-bg-surface-hover: rgba(255, 255, 255, 0.5);
--gb-bg-surface-solid: #ffffff;
/* Fondo alternativo (filas pares en tabla, inputs readonly) */
--gb-bg-alt: rgba(242, 241, 238, 0.8);
--gb-bg-alt-solid: #f5f5f3;
/* ------------------------------------------------------------------
* TEXTO
* ------------------------------------------------------------------ */
/* Texto sobre fondo oscuro (header, thead, footer) */
--gb-text-on-dark: rgba(255, 255, 255, 0.92);
--gb-text-on-dark-muted: rgba(255, 255, 255, 0.5);
/* Texto sobre fondo claro (contenido, cards) */
--gb-text-primary: #25282A;
--gb-text-secondary: #00ADD5;
--gb-text-muted: rgba(30, 20, 60, 0.35);
--gb-text-label: rgba(60, 40, 100, 0.4);
/* Texto de error */
--gb-text-error: #f20000;
/* Fuente principal */
--gb-font-base: "Inter", sans-serif;
--gb-font-heading: 'Muli', sans-serif;
--gb-font-size-base: 13px;
--gb-font-size-sm: 11px;
--gb-font-size-xs: 10px;
--gb-font-weight-normal: 400;
--gb-font-weight-medium: 500;
--gb-font-weight-bold: 600;
/* ------------------------------------------------------------------
* BORDES
* ------------------------------------------------------------------ */
/* Bordes generales */
--gb-border-color: rgba(255, 255, 255, 0.82);
--gb-border-color-dark: rgba(0, 0, 0, 0.1);
--gb-border-color-muted: rgba(255, 255, 255, 0.45);
/* Grosor */
--gb-border-width: 1px;
--gb-border-width-thick: 2px;
/* Bordes de separación internos (header, tabs) */
--gb-border-divider: rgba(255, 255, 255, 0.5);
/* Border de inputs y formularios */
--gb-border-input: #ced4da;
--gb-border-input-focus: rgba(124, 58, 237, 0.5);
/* ------------------------------------------------------------------
* RADIOS DE BORDE (border-radius)
* ------------------------------------------------------------------ */
--gb-radius-xs: 4px; /* chips, badges pequeños */
--gb-radius-sm: 8px; /* botones, inputs */
--gb-radius-md: 12px; /* cards pequeñas, tooltips */
--gb-radius-lg: 18px; /* cards de módulos, paneles */
--gb-radius-xl: 24px; /* modales, overlays */
--gb-radius-full: 9999px; /* píldoras, avatares */
/* ------------------------------------------------------------------
* SOMBRAS
* ------------------------------------------------------------------ */
/* Sombra de cards y paneles */
--gb-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
--gb-shadow-md: 0 2px 12px rgba(0, 0, 0, 0.08);
--gb-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.12);
--gb-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
/* Sombra interior (inset highlight) */
--gb-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);
--gb-shadow-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 1);
/* Sombra del header */
--gb-shadow-header: 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 20px rgba(0, 0, 0, 0.07);
/* Sombra del footer */
--gb-shadow-footer: 0 -2px 16px rgba(0, 0, 0, 0.06);
/* Sombra de botones */
--gb-shadow-btn: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* ------------------------------------------------------------------
* EFECTO FROSTED GLASS
* (usado en header, footer, cards del Desktop)
* ------------------------------------------------------------------ */
--gb-glass-bg: rgba(255, 255, 255, 0.22);
--gb-glass-bg-strong: rgba(255, 255, 255, 0.72);
--gb-glass-bg-subtle: rgba(255, 255, 255, 0.35);
--gb-glass-blur: 16px;
--gb-glass-blur-strong: 24px;
--gb-glass-border: rgba(255, 255, 255, 0.82);
--gb-glass-border-top: rgba(255, 255, 255, 0.75);
/* ------------------------------------------------------------------
* ESTADOS SEMÁNTICOS
* ------------------------------------------------------------------ */
--gb-success: #2C9F79;
--gb-success-hover: #1a7959;
--gb-success-soft: rgba(44, 159, 121, 0.15);
--gb-success-rgb: 44, 159, 121;
--gb-info: #0F81C7;
--gb-info-hover: #03324e;
--gb-info-soft: rgba(15, 129, 199, 0.15);
--gb-info-rgb: 15, 129, 199;
--gb-warning: #F8A25B;
--gb-warning-hover: #ad6224;
--gb-warning-soft: rgba(248, 162, 91, 0.15);
--gb-warning-rgb: 248, 162, 91;
--gb-danger: #f20000;
--gb-danger-hover: #92281a;
--gb-danger-soft: rgba(220, 50, 50, 0.1);
--gb-danger-border: rgba(220, 50, 50, 0.28);
--gb-danger-rgb: 220, 50, 50;
/* ------------------------------------------------------------------
* COLORES DE ICONOS DE MÓDULOS (Desktop)
* Cada módulo tiene su color de fondo de icono
* ------------------------------------------------------------------ */
--gb-icon-doc: rgba(99, 102, 241, 0.09); /* Ges-Doc — índigo */
--gb-icon-clientes: rgba(5, 150, 105, 0.09); /* Clientes — verde */
--gb-icon-proveedores: rgba(234, 88, 12, 0.09); /* Proveedores — naranja */
--gb-icon-pedidos: rgba(37, 99, 235, 0.09); /* Pedidos — azul */
--gb-icon-articulos: rgba(219, 39, 119, 0.09); /* Artículos — rosa */
--gb-icon-caja: rgba(217, 119, 6, 0.10); /* Caja — ámbar */
--gb-icon-ventas: rgba(13, 148, 136, 0.09); /* Ventas — teal */
--gb-icon-compras: rgba(124, 58, 237, 0.09); /* Compras — violeta */
--gb-icon-facturacion: rgba(220, 38, 38, 0.09); /* Facturación — rojo */
--gb-icon-mensajeros: rgba(59, 130, 246, 0.09); /* Mensajeros — azul claro */
--gb-icon-news: rgba(245, 158, 11, 0.10); /* News — amarillo */
--gb-icon-usuarios: rgba(79, 70, 229, 0.09); /* Usuarios — índigo */
--gb-icon-auditoria: rgba(5, 150, 105, 0.09); /* Auditoría — verde */
--gb-icon-firma: rgba(147, 51, 234, 0.09); /* Firma — violeta */
--gb-icon-chat: rgba(59, 130, 246, 0.09); /* Chat — azul */
--gb-icon-soporte: rgba(239, 68, 68, 0.09); /* Soporte — rojo suave */
--gb-icon-informes: rgba(16, 185, 129, 0.09); /* Informes — esmeralda */
/* ------------------------------------------------------------------
* TABLA DE DATOS
* ------------------------------------------------------------------ */
--gb-table-head-bg: var(--gb-primary);
--gb-table-head-color: var(--gb-text-on-dark);
--gb-table-head-active: var(--gb-primary-hover);
--gb-table-row-hover: rgba(0, 0, 0, 0.04);
--gb-table-row-stripe: rgba(0, 0, 0, 0.025);
--gb-table-border: var(--gb-bg-alt-solid);
/* ------------------------------------------------------------------
* NAVEGACIÓN Y PAGINACIÓN
* ------------------------------------------------------------------ */
--gb-nav-active-bg: var(--gb-secondary);
--gb-nav-active-color: #ffffff;
--gb-nav-inactive-color: var(--gb-primary);
--gb-pagination-bg: var(--gb-secondary);
--gb-pagination-color: #ffffff;
/* ------------------------------------------------------------------
* MODALES
* ------------------------------------------------------------------ */
--gb-modal-header-bg: var(--gb-bg-alt);
--gb-modal-header-color: var(--gb-primary);
--gb-modal-title-size: 2em;
--gb-modal-body-size: 1.2em;
/* ------------------------------------------------------------------
* FORMULARIOS
* ------------------------------------------------------------------ */
--gb-input-height: 50px;
--gb-input-bg: transparent;
--gb-input-readonly-bg: transparent;
--gb-label-color: var(--gb-text-secondary);
--gb-label-icon-color: var(--gb-primary);
--gb-label-icon-opacity: 0.2;
--gb-error-color: var(--gb-danger);
--gb-error-size: 0.9em;
/* ------------------------------------------------------------------
* CARD HEADERS
* ------------------------------------------------------------------ */
--gb-card-header-bg: var(--gb-primary);
--gb-card-header-color: var(--gb-text-on-dark);
/* ------------------------------------------------------------------
* TRANSICIONES Y ANIMACIONES
* ------------------------------------------------------------------ */
--gb-transition-fast: 0.15s ease;
--gb-transition-base: 0.22s ease;
--gb-transition-slow: 0.35s ease;
/* ------------------------------------------------------------------
* Z-INDEX (capas)
* ------------------------------------------------------------------ */
--gb-z-base: 1;
--gb-z-content: 10;
--gb-z-header: 100;
--gb-z-footer: 100;
--gb-z-modal: 1050;
--gb-z-overlay: 10000;
/* ------------------------------------------------------------------
* BREAKPOINTS
* ------------------------------------------------------------------ */
--gb-bp-sm: 576px;
--gb-bp-md: 768px;
--gb-bp-lg: 992px;
--gb-bp-xl: 1200px;
/* ------------------------------------------------------------------
* TAMAÑOS RESPONSIVOS — Desktop grid de apps
* ------------------------------------------------------------------ */
--gb-apps-cols: 5;
--gb-apps-gap: 14px;
--gb-app-icon-size: 126px;
--gb-app-card-padding-v: 18px;
--gb-app-card-padding-h: 10px;
--gb-app-font-size: 11px;
/* ------------------------------------------------------------------
* TAMAÑOS RESPONSIVOS — Header / Footer
* ------------------------------------------------------------------ */
--gb-header-height: 56px;
--gb-header-height-sm: 48px;
--gb-footer-height: 52px;
--gb-footer-height-sm: 44px;
--gb-footer-diagonal: 44px;
/* ------------------------------------------------------------------
* TAMAÑOS RESPONSIVOS — Módulos list/detail
* ------------------------------------------------------------------ */
--gb-layout-list-header: 100px;
--gb-layout-list-options: 80px;
--gb-layout-list-footer: 50px;
--gb-layout-record-footer:60px;
--gb-btn-touch-min: 44px;
}
/*******************************************************************************
* ══════════════════════════════════════════════════════
* CLASES UTILITARIAS BASADAS EN TOKENS
* (clases listas para usar en HTML)
* ══════════════════════════════════════════════════════
******************************************************************************/
/* Textos */
.gb-text-primary { color: var(--gb-text-primary) !important; }
.gb-text-secondary { color: var(--gb-text-secondary) !important; }
.gb-text-muted { color: var(--gb-text-muted) !important; }
.gb-text-on-dark { color: var(--gb-text-on-dark) !important; }
.gb-text-white { color: var(--gb-white) !important; }
.gb-text-success { color: var(--gb-success) !important; }
.gb-text-info { color: var(--gb-info) !important; }
.gb-text-warning { color: var(--gb-warning) !important; }
.gb-text-danger { color: var(--gb-danger) !important; }
.gb-text-error { color: var(--gb-text-error) !important; }
/* Fondos */
.gb-bg-primary { background-color: var(--gb-primary) !important; }
.gb-bg-secondary { background-color: var(--gb-secondary) !important; }
.gb-bg-surface { background-color: var(--gb-bg-surface-solid) !important; }
.gb-bg-alt { background-color: var(--gb-bg-alt-solid) !important; }
.gb-bg-success { background-color: var(--gb-success-soft) !important; }
.gb-bg-info { background-color: var(--gb-info-soft) !important; }
.gb-bg-warning { background-color: var(--gb-warning-soft) !important; }
.gb-bg-danger { background-color: var(--gb-danger-soft) !important; }
/* Radios */
.gb-rounded-sm { border-radius: var(--gb-radius-sm) !important; }
.gb-rounded-md { border-radius: var(--gb-radius-md) !important; }
.gb-rounded-lg { border-radius: var(--gb-radius-lg) !important; }
.gb-rounded-full { border-radius: var(--gb-radius-full) !important; }
/* Sombras */
.gb-shadow-sm { box-shadow: var(--gb-shadow-sm) !important; }
.gb-shadow-md { box-shadow: var(--gb-shadow-md) !important; }
.gb-shadow-lg { box-shadow: var(--gb-shadow-lg) !important; }
.gb-no-shadow { box-shadow: none !important; }
/* Transiciones */
.gb-transition { transition: all var(--gb-transition-base) !important; }
/*******************************************************************************
* ══════════════════════════════════════════════════════
* OVERRIDE DE VARIABLES BOOTSTRAP / GESBOX
* Mapea los tokens gb-* sobre las variables existentes
* para que gesbox.3.css y Bootstrap los hereden
* ══════════════════════════════════════════════════════
******************************************************************************/
:root {
/* Sobreescribe las variables de gesbox.3.css con los tokens master */
--primary: var(--gb-primary);
--primary-soft: var(--gb-primary-hover);
--primary-dark: var(--gb-primary-dark);
--secondary: var(--gb-secondary);
--secondary-soft: var(--gb-secondary-hover);
--secondary-dark: var(--gb-secondary-dark);
--success: var(--gb-success);
--success-soft: var(--gb-success);
--success-dark: var(--gb-success-hover);
--info: var(--gb-info);
--info-soft: var(--gb-info);
--info-dark: var(--gb-info-hover);
--warning: var(--gb-warning);
--warning-soft: var(--gb-warning);
--warning-dark: var(--gb-warning-hover);
--danger: var(--gb-danger);
--danger-soft: var(--gb-danger);
--danger-dark: var(--gb-danger-hover);
--dark: #424649;
--dark-soft: #888;
--light: #e8e8e8;
--clear: var(--gb-bg-alt);
--clear-soft: var(--gb-bg-surface-solid);
}
/*******************************************************************************
* ══════════════════════════════════════════════════════
* MEDIA QUERIES BASE — Responsivo
* Estas reglas afectan a TODOS los módulos del ERP.
* Los custom.css de cada módulo pueden sobreescribir.
* ══════════════════════════════════════════════════════
******************************************************************************/
/* ── Tablet: ≥768px y <1200px ─────────────────────────────────────────────── */
@media (max-width: 1199px) {
/* Desktop: 4 columnas de apps */
.containerApps {
grid-template-columns: repeat(4, 1fr) !important;
}
/* Módulos: filtros en 2 columnas */
.layout-list .header .row > .col-2 {
flex: 0 0 25%;
max-width: 25%;
}
/* Detalle: cards side-by-side se ajustan */
.layout-record .record .card[style*="width: 59%"] {
width: 58% !important;
}
.layout-record .record .card[style*="width: 40%"] {
width: 40% !important;
}
}
/* ── Tablet pequeña / Landscape móvil: <992px ─────────────────────────────── */
@media (max-width: 991px) {
/* Desktop: 3 columnas de apps */
.containerApps {
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
}
/* App cards: icono más pequeño */
#myApps img {
width: 44px !important;
height: 44px !important;
}
/* Módulos list: columnas de filtros más anchas */
.layout-list .header .row > .col-2 {
flex: 0 0 33.333%;
max-width: 33.333%;
}
/* Módulos list: altura del header de filtros más generosa */
.layout-list {
grid-template-rows: 130px 60px 1fr 50px !important;
}
/* Detalle: cards apiladas */
.layout-record .record .card[style*="width: 59%"],
.layout-record .record .card[style*="width: 40%"] {
width: 100% !important;
float: none !important;
margin-right: 0 !important;
}
/* Detalle: footer-record — botones más compactos */
.footer-record .btn {
padding: 6px 10px !important;
font-size: 12px !important;
}
/* Tabla: ocultar columnas con clase .hiddenxs */
.hiddenxs {
display: none !important;
}
}
/* ── Móvil: <768px ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
/* ── Desktop ── */
/* Header: columna usuario más estrecha */
.header {
grid-template-columns: 40px 1fr 56px !important;
}
/* Ocultar nombre y empresa del usuario */
.header-user .user {
display: none !important;
}
/* Avatar más pequeño */
.header-user .avatar,
.header-user img {
width: 28px !important;
height: 28px !important;
}
/* 2 columnas de apps */
.containerApps {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
padding: 12px !important;
}
/* App card: más compacta */
.app > div {
padding: 12px 8px 10px !important;
border-radius: 14px !important;
gap: 6px !important;
}
#myApps img {
width: 40px !important;
height: 40px !important;
}
#myApps p {
font-size: 10px !important;
}
/* Footer diagonal: simplificar — sin clip-path en móvil */
.footer-left {
clip-path: none !important;
border-radius: 0 !important;
width: 70px !important;
}
.footer-right {
clip-path: none !important;
border-radius: 0 !important;
width: 160px !important;
}
.footer-right small {
font-size: 9px !important;
}
/* Marca de agua: más pequeña */
.watermark {
width: 220px !important;
height: 220px !important;
}
/* ── Módulos ── */
/* Filtros: todos a ancho completo */
.layout-list .header .row > [class*="col-"] {
flex: 0 0 100% !important;
max-width: 100% !important;
}
/* Layout list: más altura para el header de filtros */
.layout-list {
grid-template-rows: 180px 56px 1fr 50px !important;
}
/* Botones acción header (nuevo, limpiar) */
.layout-list .header .col-1 {
flex: 0 0 100% !important;
max-width: 100% !important;
display: flex !important;
gap: 6px !important;
margin-bottom: 6px !important;
}
.layout-list .header .btn-xl {
min-height: var(--gb-btn-touch-min) !important;
min-width: var(--gb-btn-touch-min) !important;
}
/* Footer-record: solo iconos en móvil */
.footer-record .btn span:not(.fa):not([class*="fa-"]) {
display: none !important;
}
.footer-record .btn i {
margin: 0 !important;
}
/* Modales: ancho completo */
.modal-dialog {
margin: 8px !important;
max-width: calc(100vw - 16px) !important;
}
.modal-dialog-big {
width: calc(100vw - 16px) !important;
max-width: none !important;
}
}
/* ── Móvil pequeño: <576px ─────────────────────────────────────────────────── */
@media (max-width: 575px) {
/* Desktop header: ocultar logo */
.header-info .logo {
display: none !important;
}
.header-info .title {
font-size: 12px !important;
font-style: normal !important;
}
/* 2 columnas compactas */
.containerApps {
grid-template-columns: repeat(2, 1fr) !important;
gap: 6px !important;
padding: 8px !important;
}
/* Módulos list: altura header ajustada */
.layout-list {
grid-template-rows: 200px 50px 1fr 50px !important;
}
/* Paginación: simplificar */
.pagina {
display: none !important;
}
/* Texto del botón "inicio" en paginación: ocultar */
.footer .btn-secondary:not(:first-child):not(:last-child) {
display: none !important;
}
}
/* ── Móvil muy pequeño: <400px ─────────────────────────────────────────────── */
@media (max-width: 399px) {
.containerApps {
grid-template-columns: repeat(2, 1fr) !important;
gap: 5px !important;
padding: 6px !important;
}
.app > div {
padding: 10px 6px 8px !important;
}
#myApps img {
width: 36px !important;
height: 36px !important;
}
}
/* ── Touch devices: mejorar interacción táctil ─────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
/* Touch targets mínimos */
.btn, button, .cursor, .pointer {
min-height: var(--gb-btn-touch-min) !important;
min-width: var(--gb-btn-touch-min) !important;
}
/* Excepción: botones circulares pequeños */
.btn-circle, .btn-circle-xs, .power-btn {
min-height: unset !important;
min-width: unset !important;
}
/* Deshabilitar hover animations en touch */
.app > div:hover,
.app-card:hover {
transform: none !important;
}
/* Scrollbar más fina en touch */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }
}