/* ==================================================================
COLORS-BASE.CSS - SISTEMA DE TOKENS DE DISEÑO
------------------------------------------------------------------
Capa base, neutra y configurable. Cada cliente tiene su overlay
${CSS_EMPRESA} (knauf.css, etc.) que solo sobreescribe los tokens
de marca (--brand-*) y, si es necesario, los tokens semanticos
que difieran de la base.
Convencion del sistema:
1. Tokens primitivos -> colores y unidades crudas (--blue-500,
--gray-100, --space-4...). No se usan directamente en
componentes.
2. Tokens semanticos -> intencion de uso (--surface-canvas,
--text-primary, --btn-primary-bg...). Es lo que consumen
standard.css y el resto de hojas.
3. Tokens de marca -> se inyectan por cliente (--brand-*).
Restyling "fresco y moderno" estilo Monday/Bizneo/Factorial:
- Lienzo gris muy suave, cards blancas, bordes ligeros.
- Sombras casi imperceptibles, radios generosos.
- Estados (success/warning/danger/info) con pills claras.
- Tipografia Inter (variable, self-hosted) sobre fallback nativo.
- Mobile-first, touch friendly, safe-area listo para WebView.
IMPORTANTE: nunca eliminar variables de este archivo aunque parezcan
no usadas - otras hojas de cliente y componentes pueden depender de
ellas. Solo se anaden o se reasignan.
================================================================== */
/* ==================================================================
TIPOGRAFIA SELF-HOSTED - Inter Variable
------------------------------------------------------------------
Coloca los siguientes archivos en assets/fonts/inter/ :
- InterVariable.woff2 (pesos 100-900, normal)
- InterVariable-Italic.woff2 (pesos 100-900, italic)
Descarga oficial: https://github.com/rsms/inter/releases/latest
(carpeta "Inter Variable" del zip).
Mientras los archivos no existan, el navegador hara fallback a
--font-family-sans (system-ui), no rompe nada.
================================================================== */
@font-face {
font-family: 'Inter';
src: url('../fonts/inter/InterVariable.woff2') format('woff2-variations'),
url('../fonts/inter/InterVariable.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/inter/InterVariable-Italic.woff2') format('woff2-variations'),
url('../fonts/inter/InterVariable-Italic.woff2') format('woff2');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
/* ==================================================================
Outfit Variable - display font Premium SaaS / CRM moderno
------------------------------------------------------------------
Skill ui-ux-pro-max recomienda "Premium Sans" / "Startup Bold"
pairing para CRMs y SaaS modernos. Outfit es la alternativa libre
en Google Fonts del Clash Display (premium pero pago).
Geometric, friendly, character distintivo en 7-9, perfect para
headings que tengan presencia sin gritar.
Si el archivo no esta en assets/fonts/outfit/ el navegador hara
fallback a la cadena --font-family-display: 'Inter Display',
Inter, system-ui, etc. La transicion es suave.
Descarga: https://fonts.google.com/specimen/Outfit
================================================================== */
/* Outfit cargado desde Google Fonts (NO local : evita 404 y permite que
el navegador haga fallback elegante a Inter si Google esta bloqueado).
Importacion mediante @import al inicio porque las @font-face en
colors-base se evaluan antes que el resto de archivos CSS. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
/* ==================================================================
TOKENS - :root (tema claro por defecto)
================================================================== */
:root {
/* ============================================================
1. MARCA (configurables por cliente via overlay)
============================================================ */
--brand-primary: #3f88c5;
--brand-primary-light: #6da5d4;
--brand-primary-dark: #2c5f87;
--brand-secondary: #2c5f87;
--brand-secondary-light: #4f7ea5;
--brand-secondary-dark: #1e445f;
--brand-accent: #c2405e;
--brand-accent-light: #e2a5b3;
--brand-accent-dark: #8c2c44;
/* Tintes suaves derivados (pills, hovers de marca, focus rings).
Usan color-mix - soportado en navegadores modernos y Chromium
WebView. Si en algun cliente fallase, se sobreescriben con un
valor fijo en su overlay. */
--brand-primary-soft: color-mix(in srgb, var(--brand-primary) 12%, #ffffff);
--brand-primary-softer: color-mix(in srgb, var(--brand-primary) 6%, #ffffff);
--brand-primary-bg: color-mix(in srgb, var(--brand-primary) 8%, #ffffff);
--brand-secondary-soft: color-mix(in srgb, var(--brand-secondary) 14%, #ffffff);
--brand-secondary-softer: color-mix(in srgb, var(--brand-secondary) 7%, #ffffff);
--brand-accent-soft: color-mix(in srgb, var(--brand-accent) 16%, #ffffff);
--brand-accent-softer: color-mix(in srgb, var(--brand-accent) 8%, #ffffff);
/* Gradientes de marca (degradado primary -> secondary) - usados en
bandas, botones primarios, barras de seleccion, glow accents. */
--gradient-brand: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
--gradient-brand-vertical: linear-gradient(180deg, var(--brand-primary), var(--brand-secondary));
--gradient-brand-radial: radial-gradient(circle at top left, var(--brand-secondary), var(--brand-primary));
--gradient-brand-soft: linear-gradient(90deg, var(--brand-primary-soft), transparent 60%);
--gradient-accent: linear-gradient(90deg, var(--brand-accent), var(--brand-accent-light));
--gradient-accent-soft: linear-gradient(90deg, var(--brand-accent-soft), transparent 60%);
/* Gradiente "tres colores" - mezcla los tres tokens de marca
(primary -> secondary -> accent) para bandas o detalles donde
se quiere ver explicitamente la paleta entera. */
--gradient-knauf-full: linear-gradient(90deg,
var(--brand-primary) 0%,
var(--brand-secondary) 65%,
var(--brand-accent) 100%);
/* Sombras coloreadas (glow de marca y de estados) - dan vida a
botones primarios, paginas activas, focus de pills. */
--glow-brand: 0 4px 14px color-mix(in srgb, var(--brand-primary) 35%, transparent);
--glow-brand-soft: 0 2px 8px color-mix(in srgb, var(--brand-primary) 20%, transparent);
--glow-accent: 0 4px 14px color-mix(in srgb, var(--brand-accent) 35%, transparent);
--glow-accent-soft: 0 2px 8px color-mix(in srgb, var(--brand-accent) 20%, transparent);
--glow-success: 0 4px 14px color-mix(in srgb, var(--success) 35%, transparent);
--glow-danger: 0 4px 14px color-mix(in srgb, var(--danger) 35%, transparent);
--glow-warning: 0 4px 14px color-mix(in srgb, var(--warning) 35%, transparent);
/* ============================================================
2. PALETA NEUTRA (primitivos)
============================================================ */
--white: #ffffff;
--black: #000000;
/* Escala de grises afinada (Monday-ish) */
--gray-25: #fafbfc;
--gray-50: #f6f7fb;
--gray-100: #eef0f5;
--gray-150: #e4e7ee;
--gray-200: #dde1ea;
--gray-300: #cbd2dd;
--gray-400: #aab1c0;
--gray-500: #8a93a3;
--gray-600: #6b7280;
--gray-700: #4a5161;
--gray-800: #323845;
--gray-900: #1c1f26;
/* Aliases legacy (no romper nada que ya los use) */
--neutral-dark: var(--gray-900);
--neutral-medium: var(--gray-700);
--neutral-light: var(--gray-600);
--neutral-lighter: var(--gray-400);
--neutral-lightest: var(--gray-100);
/* ============================================================
3. ESTADOS (success / warning / danger / info)
Paleta refrescada estilo Monday: mas viva pero con pills
suaves para no saturar pantallas con muchos badges.
============================================================ */
--success: #00ca72;
--success-light: #e3faef;
--success-dark: #0d8a52;
--warning: #ffae00;
--warning-light: #fff4d9;
--warning-dark: #a36a00;
--danger: #e2445c;
--danger-light: #fde6ea;
--danger-dark: #a32d3d;
--info: #3294f5;
--info-light: #e3f0fd;
--info-dark: #1d6ec2;
/* ============================================================
4. SUPERFICIES (lienzos y planos)
============================================================ */
--surface-canvas: var(--gray-50); /* fondo de pagina */
--surface-raised: var(--white); /* cards, paneles, modales */
--surface-sunken: var(--gray-100); /* areas embebidas */
--surface-hover: var(--gray-100); /* hover sobre canvas */
--surface-active: var(--gray-150); /* press / activo */
--surface-selected: var(--brand-primary-soft);
--surface-overlay: rgba(15, 23, 42, 0.45); /* backdrop modal */
/* ============================================================
5. BORDES Y SEPARADORES
============================================================ */
--border-subtle: var(--gray-100); /* separadores de bajo contraste */
--border-default: var(--gray-200); /* bordes de cards/inputs */
--border-strong: var(--gray-300); /* enfasis */
--border-focus: var(--brand-primary);
--border-accent: var(--brand-primary);
/* Alias legacy */
--border-color: var(--border-default);
/* ============================================================
6. TEXTO
============================================================ */
--text-primary: var(--gray-900);
--text-secondary: var(--gray-700);
--text-tertiary: var(--gray-600);
--text-muted: var(--gray-500);
--text-disabled: var(--gray-400);
--text-inverse: var(--white);
--text-light: var(--white); /* alias legacy */
--text-link: var(--brand-primary);
--text-link-hover: var(--brand-primary-dark);
--text-link-active: var(--brand-secondary);
--text-success: var(--success-dark);
--text-warning: var(--warning-dark);
--text-danger: var(--danger-dark);
--text-info: var(--info-dark);
/* Aliases legacy de enlaces */
--link-color: var(--text-link);
--link-hover: var(--text-link-hover);
--link-active: var(--text-link-active);
/* ============================================================
7. RADIOS
============================================================ */
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px; /* default cards / inputs / buttons */
--radius-lg: 12px; /* cards grandes, modales */
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-pill: 999px; /* botones secundarios, badges */
--radius-circle: 50%;
/* ============================================================
8. SOMBRAS (suaves, estilo Monday)
============================================================ */
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.06);
--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10);
--shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.14);
/* Shadows con tinte primary - dramatic elevation con identidad.
Para cards "elevated" opt-in, modal-content, mega-menu y
elementos protagonistas. La sombra adquiere tono frio (azul
Knauf) en lugar de gris neutral - se siente como el papel
sobre la mesa de un blueprint, no como un muro. */
--shadow-knauf-md: 0 2px 6px rgba(0, 55, 120, 0.06),
0 6px 16px rgba(0, 55, 120, 0.10);
--shadow-knauf-lg: 0 4px 12px rgba(0, 55, 120, 0.08),
0 12px 32px rgba(0, 55, 120, 0.14);
--shadow-knauf-xl: 0 8px 20px rgba(0, 55, 120, 0.10),
0 24px 56px rgba(0, 55, 120, 0.18),
0 0 1px rgba(0, 55, 120, 0.20) inset;
/* Glow ambar - hover/selected sutil para acento operational */
--shadow-accent-soft: 0 0 0 4px color-mix(in srgb, var(--brand-accent) 12%, transparent);
--shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-focus: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 25%, transparent);
/* Alias legacy */
--shadow: var(--shadow-md);
/* ============================================================
9. ESPACIADO (escala 4px)
============================================================ */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* ============================================================
10. TIPOGRAFIA
============================================================ */
--font-family-sans: 'Inter',
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji';
--font-family-mono: 'JetBrains Mono',
'SF Mono',
'Cascadia Code',
Consolas,
Monaco,
'Courier New',
monospace;
/* Display: Outfit para headings - sans geometric premium SaaS.
Cae a Inter (ya cargado como sans), system-ui. Skill recomienda
este pairing para CRMs y modern agencies. */
--font-family-display: 'Outfit',
'Inter',
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
sans-serif;
--font-size-xs: 12px;
--font-size-sm: 13px;
--font-size-base: 14px;
--font-size-md: 15px;
--font-size-lg: 17px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--font-size-3xl: 30px;
--font-size-4xl: 36px;
--font-size-5xl: 48px;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 1.875;
--letter-spacing-tight: -0.01em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.02em;
/* ============================================================
11. Z-INDEX (escala alineada con Bootstrap 5)
============================================================ */
--z-base: 0;
--z-raised: 1;
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-offcanvas: 1045;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
--z-toast: 1080;
/* ============================================================
12. TRANSICIONES
============================================================ */
--transition-fast: 120ms ease;
--transition-base: 180ms ease;
--transition-slow: 300ms ease;
--transition-bezier: cubic-bezier(0.4, 0, 0.2, 1);
/* ============================================================
13. RESPONSIVE / TOUCH
------------------------------------------------------------
Breakpoints (referencia, los @media usan literales):
sm: 576px md: 768px lg: 992px
xl: 1200px xxl:1400px
============================================================ */
--touch-target-min: 44px; /* iOS/Android HIG */
--touch-tap-highlight: transparent;
/* ============================================================
14. SAFE AREA (iOS WebView con notch / barra de gestos)
============================================================ */
--safe-top: env(safe-area-inset-top, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
/* ============================================================
15. APLICACIONES POR COMPONENTE (compat con codigo existente)
------------------------------------------------------------
Todo lo de aqui esta DERIVADO de los tokens semanticos. Si un
cliente quiere cambiarlo, lo redefine en su overlay.
============================================================ */
/* Fondos principales (legacy) */
--body-bg: var(--surface-canvas);
--content-bg: var(--surface-raised);
--panel-bg: var(--surface-raised);
--modal-bg: var(--surface-raised);
/* Navbar (shell de app) */
--navbar-bg: var(--surface-raised);
--navbar-text: var(--text-primary);
--navbar-brand: var(--text-primary);
--navbar-link: var(--text-secondary);
--navbar-link-hover: var(--brand-primary);
/* Sidebar */
--sidebar-bg: var(--gray-900);
--sidebar-text: var(--white);
--sidebar-active: var(--brand-primary);
--sidebar-hover: var(--gray-800);
/* Botones */
--btn-primary-bg: var(--brand-primary);
--btn-primary-hover: var(--brand-primary-dark);
--btn-primary-text: var(--white);
--btn-secondary-bg: var(--gray-100);
--btn-secondary-hover: var(--gray-200);
--btn-secondary-text: var(--text-primary);
--btn-outline-color: var(--brand-primary);
--btn-outline-hover-bg: var(--brand-primary);
/* Formularios */
--input-bg: var(--white);
--input-text: var(--text-primary);
--input-placeholder: var(--text-muted);
--input-border: var(--border-default);
--input-border-hover: var(--border-strong);
--input-focus: var(--brand-primary);
--input-disabled-bg: var(--gray-50);
/* Cards y paneles */
--card-bg: var(--surface-raised);
--card-border: var(--border-default);
--card-header-bg: var(--surface-raised);
--card-header-text: var(--text-primary);
--card-shadow: var(--shadow-sm);
/* Tablas */
--table-header-bg: var(--gray-50);
--table-header-text: var(--text-secondary);
--table-border: var(--border-subtle);
--table-stripe: var(--gray-25);
--table-hover: var(--gray-50);
--table-active: var(--brand-primary-soft);
/* Estados / feedback */
--selected-bg: var(--brand-primary);
--selected-text: var(--white);
--hover-bg: var(--surface-hover);
--active-bg: var(--surface-active);
/* DataTables */
--dt-header-bg: var(--table-header-bg);
--dt-header-text: var(--table-header-text);
--dt-selected-bg: var(--brand-primary-soft);
--dt-pagination-active: var(--brand-primary);
/* Stepper */
--stepper-active: var(--brand-primary);
--stepper-completed: var(--success);
--stepper-inactive: var(--gray-300);
/* Menu horizontal personalizado */
--menu-bg: var(--surface-raised);
--menu-text: var(--text-secondary);
--menu-active-border: var(--brand-primary);
}
/* ==================================================================
MODO OSCURO (scaffold)
------------------------------------------------------------------
Apagado por defecto. Para activar, anade data-theme="dark" al
(o body). No esta validado en pantalla aun; se pulira
cuando el cliente lo apruebe.
================================================================== */
[data-theme="dark"] {
--surface-canvas: #0f1115;
--surface-raised: #181b22;
--surface-sunken: #14161c;
--surface-hover: #1e2129;
--surface-active: #262a34;
--surface-overlay: rgba(0, 0, 0, 0.6);
--border-subtle: #232732;
--border-default: #2d323e;
--border-strong: #3a4050;
--text-primary: #e9eaef;
--text-secondary: #c0c5d1;
--text-tertiary: #9aa0ad;
--text-muted: #767c89;
--text-disabled: #565b66;
--text-inverse: var(--gray-900);
--table-header-bg: var(--surface-sunken);
--table-header-text: var(--text-secondary);
--table-stripe: var(--surface-sunken);
--table-hover: var(--surface-hover);
--input-bg: var(--surface-sunken);
--input-disabled-bg: var(--surface-canvas);
--card-bg: var(--surface-raised);
--card-border: var(--border-default);
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.55);
}
/* ==================================================================
UTILIDADES DE COLOR DE MARCA (existentes, conservadas)
================================================================== */
.bg-brand-primary { background-color: var(--brand-primary) !important; }
.bg-brand-secondary { background-color: var(--brand-secondary) !important; }
.bg-brand-accent { background-color: var(--brand-accent) !important; }
.text-brand-primary { color: var(--brand-primary) !important; }
.text-brand-secondary { color: var(--brand-secondary) !important; }
.text-brand-accent { color: var(--brand-accent) !important; }
.border-brand-primary { border-color: var(--brand-primary) !important; }
.border-brand-accent { border-color: var(--brand-accent) !important; }
/* ==================================================================
STATUS PILLS - badges suaves coloridos estilo Monday/Notion
------------------------------------------------------------------
Uso:
Activo
Pendiente
Bloqueado
Revision
En curso
Sin estado
Variantes:
- .badge-soft (default) -> con punto indicador a la izquierda
- .badge-soft.no-dot -> sin punto, solo texto
- .badge-soft.badge-solid -> fondo saturado y texto blanco (mas vivo)
================================================================== */
.badge-soft {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-family: var(--font-family-sans);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
line-height: 1.2;
letter-spacing: 0.02em;
white-space: nowrap;
vertical-align: middle;
transition: transform var(--transition-fast),
box-shadow var(--transition-fast);
}
.badge-soft::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.badge-soft.no-dot::before { display: none; }
/* Variantes "soft" (claro + texto saturado + borde sutil) */
.badge-soft.badge-success {
background: var(--success-light);
color: var(--success-dark);
border-color: color-mix(in srgb, var(--success) 35%, transparent);
}
.badge-soft.badge-warning {
background: var(--warning-light);
color: var(--warning-dark);
border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}
.badge-soft.badge-danger {
background: var(--danger-light);
color: var(--danger-dark);
border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}
.badge-soft.badge-info {
background: var(--info-light);
color: var(--info-dark);
border-color: color-mix(in srgb, var(--info) 35%, transparent);
}
.badge-soft.badge-brand {
background: var(--brand-primary-soft);
color: var(--brand-primary-dark);
border-color: color-mix(in srgb, var(--brand-primary) 35%, transparent);
}
.badge-soft.badge-accent {
background: var(--brand-accent-soft);
color: var(--brand-accent-dark);
border-color: color-mix(in srgb, var(--brand-accent) 40%, transparent);
}
.badge-soft.badge-neutral {
background: var(--gray-100);
color: var(--text-secondary);
border-color: var(--gray-200);
}
/* Variantes "solid" (relleno saturado + texto blanco - para destacar mas) */
.badge-soft.badge-solid { color: #fff !important; border-color: transparent; }
.badge-soft.badge-solid.badge-success { background: var(--success); }
.badge-soft.badge-solid.badge-warning { background: var(--warning); color: var(--warning-dark) !important; }
.badge-soft.badge-solid.badge-danger { background: var(--danger); }
.badge-soft.badge-solid.badge-info { background: var(--info); }
.badge-soft.badge-solid.badge-brand { background: var(--gradient-brand); }
.badge-soft.badge-solid.badge-accent { background: var(--gradient-accent); }
.badge-soft.badge-solid.badge-neutral { background: var(--gray-700); }
/* Hover sutil (solo si el pill es interactivo: o role=button) */
a.badge-soft:hover,
button.badge-soft:hover,
.badge-soft[role="button"]:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
text-decoration: none;
}