/* ============================================================================ W-Flows — Sistema de diseño (Grupo Wende) ============================================================================ Un solo archivo, compartido por todas las pantallas. Referenciarlo desde cada página nueva con: y copiar en el , ANTES del link de arriba, el snippet bloqueante de tema que evita el flash de color (ver login.html): Componentes disponibles (clases listas para usar en cualquier pantalla): Layout .page-center (pantallas standalone: login) / .shell (pantallas con sidebar+topbar, ver assets/js/shell.js) Marca .brand / .brand-mark / .brand-word / .brand-tagline Texto .text-title / .text-subtitle / .text-muted / .text-eyebrow Tarjeta .card (+ .card--wide) Formulario .field / label / input / select / textarea / .file-field Botones .btn (+ .btn--primary / .btn--ghost / .btn--success / .btn--danger / .btn--warning / .btn--block / .btn--sm) Alertas .alert (+ .alert--danger / --success / --warning / --info) Badges .badge (+ .badge--success / --warning / --danger / --neutral) → success = aprobado, warning = pendiente, danger = rechazado Toggle .theme-switch (+ __icon --sun/--moon, __thumb, --inline para topbar; ver assets/js/theme.js) / .icon-btn (botón cuadrado genérico de topbar, ej. campanita) Shell .sidebar / .topbar / .nav-item / .nav-badge / .user-chip / .breadcrumb-bar (+ __sep, .breadcrumb__current) — ver WFlows.initShell Notif. .notif-wrap / .notif-badge / .notif-panel / .notif-item (+ --unread) — ver assets/js/notifications.js Listas .request-list / .request-row (+ .request-row__urgency--overdue / --soon / --normal) / .empty-state Timeline .timeline / .timeline-item (+ --future / --chat) / .timeline-dot (+ --success / --danger / --warning) / .timeline-comment / .timeline-chat-bubble / .mention-chip / .timeline-avatar--invite Detalle .detail-header / .detail-grid / .detail-sidebar / .detail-field (+ --amount) / .dp-adjunto (+ __row, __name, __download, -preview-wrap, -preview --pdf) / .timeline--avatar / .timeline-avatar (+ --success / --warning / --danger) — ver detalle-solicitud.html Tabs .tabs / .tab (+ .is-active) Tabla .data-table-wrap / .data-table / .toolbar Kanban .kanban / .kanban-column (+ __header/__title/__dot/__count/__list) / .kanban-card (+ __id/__title/__meta/__amount/__footer /__timestamp/__overdue) / .kanban-empty — var(--font-mono) Dashboard .stat-grid / .stat-card (+ __label/__value/__sub/--danger) / .chart-card / .segmented (+ .is-active) / .chart-legend / .quick-access-grid / .quick-access-card / .activity-feed / .activity-item / .activity-dot (+ --success/--danger/--warning) / .dashboard-columns / .perf-grid / .perf-card (+ --self) / .rank-list / .rank-row (+ --self, __pos --top, __info, __value) Selector .option-grid / .option-list / .option-card (+ .is-selected) / .step-back / .proceso-grid / .proceso-card (+ __icon, __cat, __title, __desc, colores --compras/--rrhh/--operaciones/--marketing/--general/--sin-categoria) / .proceso-grupo-header (+ __icon) Avatares .avatar-circle (+ --iniciales) / .avatar-picker-grid / .avatar-picker-option (+ .is-selected) / .tag-chip (+ --selectable/--empty, .is-selected) / .tag-chip-group / .approval-card (+ __header/__fields/__actions) / .user-row (+ __main/__name/__meta/__actions) Inbox .req-tile (+ --warning/--success/--danger/--primary, __avatar) / .filter-bar / .search-pill / .filter-pill-select / .count-pill Utilidad .visually-hidden ============================================================================ */ /* ---------------------------------------------------------------------------- 1. TOKENS — light (default) y dark ([data-theme="dark"]) ---------------------------------------------------------------------------- */ :root { /* Marca: violeta cálido, no el índigo genérico de plantilla SaaS */ --color-primary-rgb: 91, 52, 224; --color-primary: #5b34e0; --color-primary-hover: #4c29c7; --color-primary-active: #3f20ac; --color-primary-tint: #efe9fc; --color-on-primary: #ffffff; /* Neutros con leve tinte violeta (evita el gris frío "Bootstrap") */ --color-bg: #f8f6fc; --color-surface: #ffffff; --color-surface-alt: #f2eefa; --color-border: #e6e1f2; --color-border-strong: #d3cbea; --color-text: #201c31; --color-text-secondary: #6c6480; --color-text-tertiary: #9791ac; /* Semánticos de estado — clave en toda la plataforma de aprobaciones */ --color-success: #15803d; --color-success-bg: #e7f7ee; --color-success-border: #beebd1; --color-warning: #b45309; --color-warning-bg: #fef3df; --color-warning-border: #fbdfa6; --color-on-warning: #ffffff; --color-danger: #b91c1c; --color-danger-bg: #fdecec; --color-danger-border: #f6c6c6; /* Colores por categoría de proceso (Flujos, selector de proceso/plantilla) — paleta categórica, no semántica: cada una es solo "distinta de las demás", no significa éxito/alerta/error. */ --cat-compras: #2563eb; --cat-compras-bg: #eaf1fe; --cat-rrhh: #0d9488; --cat-rrhh-bg: #e6f6f4; --cat-operaciones: #7c3aed; --cat-operaciones-bg: #f2ebfd; --cat-marketing: #db2777; --cat-marketing-bg: #fce8f1; --cat-general: #475569; --cat-general-bg: #eceff2; /* Sombras con tinte cálido, no negro puro */ --shadow-sm: 0 1px 2px rgba(32, 20, 61, 0.06); --shadow-md: 0 4px 16px rgba(32, 20, 61, 0.08); --shadow-lg: 0 20px 48px rgba(32, 20, 61, 0.14); --decor-opacity: 0.14; /* Tipografía */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Solo para IDs/timestamps en el Kanban — pila del sistema, sin webfont nuevo, da la "sensación de sistema" (Linear/Vercel) sin pedir nada más. */ --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 1rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --lh-relaxed: 1.65; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Espaciado generoso */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* Radios y transiciones consistentes */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 22px; --radius-full: 999px; --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1); color-scheme: light; } :root[data-theme="dark"] { --color-primary-rgb: 132, 104, 242; --color-primary: #8468f2; --color-primary-hover: #9683f5; --color-primary-active: #6f52de; --color-primary-tint: #2c2350; --color-on-primary: #ffffff; --color-bg: #16121f; --color-surface: #1e1930; --color-surface-alt: #241e3a; --color-border: #342c4c; --color-border-strong: #453a66; --color-text: #f3f1fa; --color-text-secondary: #b4abcb; --color-text-tertiary: #857ba0; --color-success: #4ade80; --color-success-bg: #143323; --color-success-border: #1f5a3b; --color-warning: #fbbf24; --color-warning-bg: #3a2a0c; --color-warning-border: #6b4a11; --color-on-warning: #2b1a02; --color-danger: #f87171; --color-danger-bg: #3a1616; --color-danger-border: #6b2323; --cat-compras: #60a5fa; --cat-compras-bg: #17253f; --cat-rrhh: #2dd4bf; --cat-rrhh-bg: #123330; --cat-operaciones: #a78bfa; --cat-operaciones-bg: #271f42; --cat-marketing: #f472b6; --cat-marketing-bg: #3a1c2c; --cat-general: #94a3b8; --cat-general-bg: #232936; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.5); --decor-opacity: 0.22; color-scheme: dark; } /* ---------------------------------------------------------------------------- 2. RESET / BASE ---------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: var(--color-primary); } body { min-height: 100vh; min-height: 100dvh; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--color-text); background: var(--color-bg); transition: background var(--transition-base), color var(--transition-base); position: relative; overflow-x: hidden; isolation: isolate; } /* Decoración de marca: manchas suaves en violeta, muy sutiles */ body::before, body::after { content: ""; position: fixed; border-radius: 50%; filter: blur(70px); opacity: var(--decor-opacity); background: var(--color-primary); pointer-events: none; z-index: -1; transition: opacity var(--transition-slow); } body::before { width: 440px; height: 440px; top: -140px; left: -120px; } body::after { width: 380px; height: 380px; bottom: -160px; right: -100px; } @media (max-width: 480px) { body::before { width: 280px; height: 280px; top: -100px; left: -100px; } body::after { width: 240px; height: 240px; bottom: -120px; right: -90px; } } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------------------------- 3. LAYOUT ---------------------------------------------------------------------------- */ .page-center { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); } /* ---------------------------------------------------------------------------- 4. TIPOGRAFÍA ---------------------------------------------------------------------------- */ .text-eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-tertiary); } .text-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: var(--lh-tight); color: var(--color-text); } .text-subtitle { font-size: var(--fs-base); font-weight: var(--fw-regular); color: var(--color-text-secondary); line-height: var(--lh-relaxed); } .text-muted { color: var(--color-text-secondary); } @media (max-width: 380px) { .text-title { font-size: 1.3125rem; } } /* ---------------------------------------------------------------------------- 5. MARCA ---------------------------------------------------------------------------- */ .brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); } .brand-mark { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active) 100%); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; } .brand-mark svg { width: 22px; height: 22px; } .brand-word { font-size: 1.0625rem; font-weight: var(--fw-extrabold); letter-spacing: -0.02em; color: var(--color-text); line-height: 1.1; } .brand-tagline { margin-top: 2px; font-size: var(--fs-sm); color: var(--color-text-tertiary); } /* ---------------------------------------------------------------------------- 6. CARD ---------------------------------------------------------------------------- */ .card { width: 100%; max-width: 400px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-7) var(--space-6); transition: background var(--transition-base), border-color var(--transition-base); animation: wf-fade-slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } .card--wide { max-width: 560px; } @media (max-width: 420px) { .card { padding: var(--space-6) var(--space-4); border-radius: var(--radius-md); } } @keyframes wf-fade-slide-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ---------------------------------------------------------------------------- 7. FORMULARIO ---------------------------------------------------------------------------- */ form { display: flex; flex-direction: column; gap: var(--space-5); } .field { display: flex; flex-direction: column; gap: var(--space-2); } .field label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text-secondary); } input, select, textarea { min-height: 48px; padding: 0 var(--space-4); font-size: 1rem; /* >=16px evita el auto-zoom de iOS al enfocar */ border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-alt); color: var(--color-text); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-base); } textarea { min-height: 96px; padding: var(--space-3) var(--space-4); resize: vertical; } input::placeholder, textarea::placeholder { color: var(--color-text-tertiary); } input:hover, select:hover, textarea:hover { border-color: var(--color-border-strong); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.22); background: var(--color-surface); } input:disabled, select:disabled, textarea:disabled { opacity: 0.6; cursor: not-allowed; } /* ---------------------------------------------------------------------------- 7B. ARCHIVOS (input type=file estilizado como botón + nombre seleccionado) ---------------------------------------------------------------------------- */ .file-field { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .file-field input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; } .file-field__name { font-size: var(--fs-sm); color: var(--color-text-secondary); } /* ---------------------------------------------------------------------------- 8. BOTONES ---------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-5); font-size: 1rem; font-weight: var(--fw-semibold); border-radius: var(--radius-md); border: 1px solid transparent; transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform 100ms ease, opacity var(--transition-fast); } .btn:active { transform: translateY(1px); } .btn--block { width: 100%; } .btn--sm { min-height: 38px; padding: 0 var(--space-4); font-size: var(--fs-sm); } .btn--primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-sm); } .btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn--primary:active:not(:disabled) { background: var(--color-primary-active); box-shadow: var(--shadow-sm); transform: translateY(0); } .btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); } .btn--ghost:hover:not(:disabled) { border-color: var(--color-border-strong); background: var(--color-surface-alt); } /* Acciones de aprobar/rechazar (Detalle de solicitud, acciones rápidas en listas) */ .btn--success { background: var(--color-success); color: #ffffff; box-shadow: var(--shadow-sm); } .btn--success:hover:not(:disabled) { filter: brightness(1.08); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn--success:active:not(:disabled) { filter: brightness(0.94); box-shadow: var(--shadow-sm); transform: translateY(0); } .btn--danger { background: var(--color-danger); color: #ffffff; box-shadow: var(--shadow-sm); } .btn--danger:hover:not(:disabled) { filter: brightness(1.08); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn--danger:active:not(:disabled) { filter: brightness(0.94); box-shadow: var(--shadow-sm); transform: translateY(0); } /* Acciones "devolver" (Detalle de solicitud) — ni aprobación ni rechazo, un tercer tono a propósito para que se note que es otra clase de acción. */ .btn--warning { background: var(--color-warning); color: var(--color-on-warning); box-shadow: var(--shadow-sm); } .btn--warning:hover:not(:disabled) { filter: brightness(1.08); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn--warning:active:not(:disabled) { filter: brightness(0.94); box-shadow: var(--shadow-sm); transform: translateY(0); } .btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; } .btn__spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: currentColor; animation: wf-spin 0.6s linear infinite; } .btn.is-loading .btn__spinner { display: inline-block; } .btn.is-loading .btn__label { opacity: 0.9; } @keyframes wf-spin { to { transform: rotate(360deg); } } /* ---------------------------------------------------------------------------- 9. ALERTAS (feedback de estado — reutiliza los colores semánticos) ---------------------------------------------------------------------------- */ .alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; font-size: var(--fs-sm); line-height: var(--lh-normal); } .alert__icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; } .alert--danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger); } .alert--success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); } .alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); } .alert--info { background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text-secondary); } .alert.is-visible { animation: wf-fade-slide-in 0.25s ease both; } @keyframes wf-fade-slide-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ---------------------------------------------------------------------------- 10. BADGES DE ESTADO aprobado = success (verde) · pendiente = warning (ámbar) · rechazado = danger (rojo) ---------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); border: 1px solid transparent; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.02em; white-space: nowrap; } .badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .badge--success { color: var(--color-success); background: var(--color-success-bg); border-color: var(--color-success-border); } .badge--warning { color: var(--color-warning); background: var(--color-warning-bg); border-color: var(--color-warning-border); } .badge--danger { color: var(--color-danger); background: var(--color-danger-bg); border-color: var(--color-danger-border); } .badge--neutral { color: var(--color-text-secondary); background: var(--color-surface-alt); border-color: var(--color-border); } /* ---------------------------------------------------------------------------- 11. THEME TOGGLE — switch real (track + pulgar + sol/luna), no un botón cuadrado que cambia de ícono sin más indicación de estado. Doble variante: fijo en la esquina (pantallas standalone: login, signup) e --inline (dentro de la topbar del shell). Ver assets/js/theme.js. ---------------------------------------------------------------------------- */ .theme-switch { position: fixed; top: max(20px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); z-index: 10; width: 50px; height: 28px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface-alt); box-shadow: var(--shadow-sm); display: flex; align-items: center; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-base); } .theme-switch:hover { border-color: var(--color-primary); } .theme-switch:active .theme-switch__thumb { transform: scale(0.9); } [data-theme="dark"] .theme-switch:active .theme-switch__thumb { transform: translateX(22px) scale(0.9); } /* Variante para usar el mismo switch DENTRO de la topbar del shell, en vez de fijo en la esquina de una pantalla standalone. */ .theme-switch--inline { position: static; box-shadow: none; } .theme-switch__icon { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; justify-content: center; color: var(--color-text-tertiary); transition: color var(--transition-base); } .theme-switch__icon svg { width: 14px; height: 14px; } /* Claro (default): el sol está "activo" — color propio en vez de gris apagado, para que se note de un vistazo en qué estado está. */ .theme-switch__icon--sun { color: var(--color-warning); } .theme-switch__thumb { position: absolute; z-index: 1; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform var(--transition-slow), background var(--transition-base); } /* Oscuro: el pulgar se desliza a la derecha, la luna pasa a ser el ícono "activo" (blanco, sobre el pulgar violeta) y el sol se apaga. */ [data-theme="dark"] .theme-switch__thumb { transform: translateX(22px); background: var(--color-primary); } [data-theme="dark"] .theme-switch__icon--sun { color: var(--color-text-tertiary); } [data-theme="dark"] .theme-switch__icon--moon { color: #fff; } /* Botón cuadrado genérico de ícono para la topbar (campanita de notificaciones) — antes pedía prestadas las clases del theme toggle cuadrado; se separa en su propia clase para no romperse cuando el theme toggle pasó a ser un switch con otra forma. */ .icon-btn { width: 44px; height: 44px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); display: flex; align-items: center; justify-content: center; transition: border-color var(--transition-fast), transform 100ms ease; } .icon-btn:hover { border-color: var(--color-primary); } .icon-btn:active { transform: scale(0.94); } .icon-btn svg { width: 18px; height: 18px; } /* ---------------------------------------------------------------------------- 13. SHELL DE APP (sidebar + topbar) — ver assets/js/shell.js ---------------------------------------------------------------------------- */ .shell { display: flex; min-height: 100vh; min-height: 100dvh; } .sidebar { width: 252px; flex-shrink: 0; background: var(--color-surface); border-right: 1px solid var(--color-border); padding: var(--space-5) var(--space-3); display: flex; flex-direction: column; position: sticky; top: 0; align-self: flex-start; height: 100vh; height: 100dvh; overflow-y: auto; transition: background var(--transition-base), border-color var(--transition-base); } .sidebar__brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2); margin-bottom: var(--space-4); } .sidebar__nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2); } .nav-item { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-3); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: background var(--transition-fast), color var(--transition-fast); } .nav-item:hover { background: var(--color-surface-alt); color: var(--color-text); } .nav-item.is-active { background: var(--color-primary-tint); color: var(--color-primary); font-weight: var(--fw-semibold); } .nav-item__icon { display: flex; flex-shrink: 0; } .nav-item__icon svg { width: 18px; height: 18px; } .nav-item__label { flex: 1; } .nav-badge { background: var(--color-primary); color: var(--color-on-primary); font-size: 11px; font-weight: var(--fw-bold); min-width: 18px; height: 18px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; } .shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); background: var(--color-surface); position: sticky; top: 0; z-index: 5; transition: background var(--transition-base), border-color var(--transition-base); } .topbar__spacer { flex: 1; } /* Debajo del topbar, arriba del contenido — "Dashboard / Flujos / Nombre". La arma WFlows.initShell (assets/js/shell.js); las páginas que necesitan un nivel extra pasan breadcrumbExtra o lo actualizan después con WFlows.setBreadcrumbExtra() una vez que cargan su propio dato (nombre de un proceso, de una solicitud, etc). */ .breadcrumb-bar { max-width: 1100px; width: 100%; margin: 0 auto; padding: var(--space-3) var(--space-6) 0; display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); flex-wrap: wrap; } .breadcrumb-bar a { color: var(--color-text-tertiary); text-decoration: none; } .breadcrumb-bar a:hover { color: var(--color-text-secondary); text-decoration: underline; } .breadcrumb__current { color: var(--color-text-secondary); font-weight: var(--fw-medium); } .breadcrumb__sep { color: var(--color-border-strong); } .shell__content { flex: 1; padding: var(--space-6); max-width: 1100px; width: 100%; margin: 0 auto; } .sidebar-toggle { display: none; width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); align-items: center; justify-content: center; transition: border-color var(--transition-fast); } .sidebar-toggle svg { width: 18px; height: 18px; } .sidebar-toggle:hover { border-color: var(--color-primary); } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 10, 30, 0.45); z-index: 25; } .sidebar-overlay.is-visible { display: block; } @media (max-width: 860px) { .sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); z-index: 30; width: 264px; box-shadow: var(--shadow-lg); transition: transform var(--transition-base); } .sidebar.is-open { transform: translateX(0); } .sidebar-toggle { display: flex; } .shell__content { padding: var(--space-4); } .topbar { padding: var(--space-3) var(--space-4); } .user-chip__meta { display: none; } } /* ---------------------------------------------------------------------------- 14. USER CHIP (topbar) ---------------------------------------------------------------------------- */ .user-chip { display: flex; align-items: center; gap: var(--space-2); } .user-chip__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary-tint); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: var(--fs-sm); flex-shrink: 0; } .user-chip__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.2; white-space: nowrap; } .user-chip__meta { font-size: var(--fs-xs); color: var(--color-text-secondary); white-space: nowrap; } /* ---------------------------------------------------------------------------- 14B. CAMPANITA DE NOTIFICACIONES (topbar) — ver assets/js/notifications.js ---------------------------------------------------------------------------- */ .notif-wrap { position: relative; } .notif-badge { position: absolute; top: -4px; right: -4px; background: var(--color-danger); color: #fff; font-size: 10px; font-weight: var(--fw-bold); min-width: 16px; height: 16px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--color-surface); } .notif-panel { position: absolute; top: calc(100% + var(--space-2)); right: 0; width: 360px; max-width: calc(100vw - var(--space-6)); max-height: 70vh; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 30; display: flex; flex-direction: column; overflow: hidden; } .notif-panel__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); font-weight: var(--fw-semibold); flex-shrink: 0; } .notif-list { overflow-y: auto; } .notif-item { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); color: inherit; text-decoration: none; transition: background var(--transition-fast); } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--color-surface-alt); } .notif-item__icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--color-surface-alt); color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; } .notif-item__icon svg { width: 15px; height: 15px; } .notif-item.is-unread .notif-item__icon { background: var(--color-primary-tint); color: var(--color-primary); } .notif-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .notif-item__msg { font-size: var(--fs-sm); line-height: 1.4; } .notif-item.is-unread .notif-item__msg { font-weight: var(--fw-semibold); } .notif-item__time { font-size: var(--fs-xs); color: var(--color-text-tertiary); } @media (max-width: 560px) { .notif-panel { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: none; max-height: 80vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } } /* ---------------------------------------------------------------------------- 15. LISTAS DE SOLICITUDES (Bandeja, Mis Solicitudes, Todas las Solicitudes) ---------------------------------------------------------------------------- */ .request-list { display: flex; flex-direction: column; gap: var(--space-3); } .request-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: border-color var(--transition-fast), transform 100ms ease, box-shadow var(--transition-fast); } .request-row:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .request-row__avatar { flex-shrink: 0; } .request-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .request-row__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .request-row__meta { font-size: var(--fs-xs); color: var(--color-text-secondary); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; } .request-row__amount { font-size: var(--fs-md); font-weight: var(--fw-bold); white-space: nowrap; } .request-row__urgency { font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap; min-width: 100px; text-align: right; } .request-row__urgency--overdue { color: var(--color-danger); } .request-row__urgency--soon { color: var(--color-warning); } .request-row__urgency--normal { color: var(--color-text-tertiary); font-weight: var(--fw-regular); } @media (max-width: 640px) { .request-row { flex-direction: column; align-items: stretch; gap: var(--space-2); } .request-row__title { white-space: normal; } .request-row__amount { text-align: left; } .request-row__urgency { text-align: left; min-width: 0; } } .empty-state { text-align: center; padding: var(--space-7) var(--space-4); color: var(--color-text-secondary); font-size: var(--fs-sm); border: 1px dashed var(--color-border); border-radius: var(--radius-md); } /* ---------------------------------------------------------------------------- 16. TIMELINE (historial/auditoría — Detalle de solicitud) ---------------------------------------------------------------------------- */ .timeline { display: flex; flex-direction: column; } .timeline-item { display: flex; gap: var(--space-3); padding-bottom: var(--space-5); position: relative; } .timeline-item:last-child { padding-bottom: 0; } .timeline-item::before { content: ""; position: absolute; left: 5px; top: 20px; bottom: -4px; width: 2px; background: var(--color-border); } .timeline-item:last-child::before { display: none; } .timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-border-strong); flex-shrink: 0; margin-top: 4px; z-index: 1; } .timeline-dot--success { background: var(--color-success); } .timeline-dot--danger { background: var(--color-danger); } .timeline-dot--warning { background: var(--color-warning); } .timeline-content { flex: 1; min-width: 0; } .timeline-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); } .timeline-meta { font-size: var(--fs-xs); color: var(--color-text-secondary); margin-top: 2px; } .timeline-comment { margin-top: var(--space-2); font-size: var(--fs-sm); background: var(--color-surface-alt); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); } /* Paso todavía no creado (condicional a futuro) — visualmente de fondo */ .timeline-item--future { opacity: 0.55; } .timeline-item--future .timeline-dot { background: transparent; border: 2px dashed var(--color-border-strong); } /* Comentario de conversación intercalado en la timeline — tratamiento más liviano que una decisión formal (aprobar/rechazar, .timeline-comment): título sin negrita y burbuja más discreta, para no confundir "charla de contexto" con "decisión oficial" al primer vistazo. */ .timeline-item--chat .timeline-title { font-weight: var(--fw-regular); color: var(--color-text-secondary); } .timeline-chat-bubble { margin-top: var(--space-1); font-size: var(--fs-sm); color: var(--color-text); line-height: var(--lh-normal); white-space: pre-wrap; } .mention-chip { display: inline; padding: 1px 5px; border-radius: var(--radius-sm); background: var(--color-primary-tint); color: var(--color-primary); font-weight: var(--fw-medium); } /* Evento del sistema: se otorgó acceso a alguien por haberlo mencionado — trazable, nunca silencioso (ver instancia_invitados). */ .timeline-avatar--invite { background: var(--color-primary-tint); color: var(--color-primary); } /* ---------------------------------------------------------------------------- 17. TABS (segmentado por estado — Mis Solicitudes, Todas las Solicitudes) ---------------------------------------------------------------------------- */ .tabs { display: flex; gap: 4px; padding: 4px; background: var(--color-surface-alt); border-radius: var(--radius-md); width: fit-content; max-width: 100%; overflow-x: auto; margin-bottom: var(--space-5); } .tab { padding: 8px 16px; border-radius: calc(var(--radius-md) - 2px); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-secondary); white-space: nowrap; transition: background var(--transition-fast), color var(--transition-fast); } .tab:hover { color: var(--color-text); } .tab.is-active { background: var(--color-surface); color: var(--color-primary); font-weight: var(--fw-semibold); box-shadow: var(--shadow-sm); } /* ---------------------------------------------------------------------------- 18. TABLA DE DATOS (Todas las Solicitudes) ---------------------------------------------------------------------------- */ .data-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); } .data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .data-table th { text-align: left; padding: var(--space-3) var(--space-4); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-tertiary); background: var(--color-surface-alt); border-bottom: 1px solid var(--color-border); white-space: nowrap; } .data-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: middle; white-space: nowrap; } .data-table td.data-table__wrap-cell { white-space: normal; } .data-table tbody tr { cursor: pointer; transition: background var(--transition-fast); } .data-table tbody tr:hover { background: var(--color-surface-alt); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table .text-right { text-align: right; } .toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); } .toolbar input, .toolbar select { min-height: 40px; } .toolbar input { flex: 1; min-width: 200px; } /* ---------------------------------------------------------------------------- 19. SELECTOR DE OPCIONES (elegir marca / elegir proceso — Nueva Solicitud) ---------------------------------------------------------------------------- */ .option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); } .option-card { display: block; width: 100%; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); text-align: left; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast), transform 100ms ease, box-shadow var(--transition-fast); } .option-card:hover { border-color: var(--color-primary); background: var(--color-surface-alt); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .option-card.is-selected { border-color: var(--color-primary); background: var(--color-primary-tint); } .option-card__title { font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--color-text); } .option-card__meta { font-size: var(--fs-xs); color: var(--color-text-secondary); margin-top: 4px; } /* Variante apilada (una por fila) — queda para donde una lista angosta siga teniendo sentido; el selector de proceso/plantilla usa .proceso-grid (abajo) en vez de esto, para no obligar a scrollear una lista larga. */ .option-list { display: flex; flex-direction: column; gap: var(--space-3); } .option-list .option-card__meta { margin-top: 6px; line-height: var(--lh-normal); } /* Grilla de "carpetas" para elegir un proceso/plantilla (Nueva Solicitud, Crear Proceso paso 0) — reemplaza la lista vertical de antes, que se volvía un scroll interminable apenas había varios procesos. Cada card lleva el color de su categoría en el ícono y en la etiqueta, para poder escanear por categoría de un vistazo sin leer cada título. */ .proceso-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); } .proceso-card { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 148px; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); text-align: left; cursor: pointer; transition: border-color var(--transition-fast), transform 100ms ease, box-shadow var(--transition-fast); } .proceso-card:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); } .proceso-card.is-selected { border-color: var(--color-primary); background: var(--color-primary-tint); } .proceso-card__icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); } .proceso-card__icon svg { width: 19px; height: 19px; } .proceso-card__cat { font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; } .proceso-card__title { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--color-text); line-height: var(--lh-snug); } .proceso-card__desc { font-size: var(--fs-xs); color: var(--color-text-secondary); margin-top: 4px; line-height: var(--lh-normal); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Un color por categoría — mismas 5 + "sin categoría" que ya usa WFlows.CATEGORIA_ICONS/CATEGORIA_LABELS en wflows-utils.js. */ .proceso-card__icon--compras, .proceso-card__cat--compras { color: var(--cat-compras); } .proceso-card__icon--compras { background: var(--cat-compras-bg); } .proceso-card__icon--rrhh, .proceso-card__cat--rrhh { color: var(--cat-rrhh); } .proceso-card__icon--rrhh { background: var(--cat-rrhh-bg); } .proceso-card__icon--operaciones, .proceso-card__cat--operaciones { color: var(--cat-operaciones); } .proceso-card__icon--operaciones { background: var(--cat-operaciones-bg); } .proceso-card__icon--marketing, .proceso-card__cat--marketing { color: var(--cat-marketing); } .proceso-card__icon--marketing { background: var(--cat-marketing-bg); } .proceso-card__icon--general, .proceso-card__cat--general { color: var(--cat-general); } .proceso-card__icon--general { background: var(--cat-general-bg); } .proceso-card__icon--sin-categoria, .proceso-card__cat--sin-categoria { color: var(--color-text-tertiary); } .proceso-card__icon--sin-categoria { background: var(--color-surface-alt); } /* Encabezado de cada grupo (categoría / "usados recientemente") arriba de su .proceso-grid — mismo patrón que .text-eyebrow pero con el color de la categoría en el ícono, para que el agrupador ya ancle el color. */ .proceso-grupo-header { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-3); } .proceso-grupo-header__icon { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .proceso-grupo-header__icon svg { width: 12px; height: 12px; } .step-back { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); } .step-back:hover { color: var(--color-text); } /* ---------------------------------------------------------------------------- 20. WIZARD DE PROCESOS (armar campos/pasos — Crear/editar proceso) ---------------------------------------------------------------------------- */ .builder-row { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-alt); } .builder-row__fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); } .builder-row__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .builder-row__remove { flex-shrink: 0; } .builder-row__checkbox { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); } .builder-row__checkbox input { width: auto; min-height: 0; } /* Arrastrar para reordenar (Nuevo proceso, paso 2 — campos del formulario) */ .builder-row__drag-handle { flex-shrink: 0; display: flex; align-items: center; color: var(--color-text-tertiary); cursor: grab; padding-top: var(--space-1); } .builder-row__drag-handle:active { cursor: grabbing; } .builder-row.is-dragging { opacity: 0.4; } .builder-row.is-drop-target { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); } @media (max-width: 560px) { .builder-row__grid { grid-template-columns: 1fr; } .builder-row { flex-direction: column; } } .wizard-preview { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-4); } .wizard-steps { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); flex-wrap: wrap; } .wizard-step { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--color-text-tertiary); font-weight: var(--fw-medium); } .wizard-step__num { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--color-border-strong); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); } .wizard-step.is-active { color: var(--color-primary); } .wizard-step.is-active .wizard-step__num { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } .wizard-step.is-done .wizard-step__num { background: var(--color-success); border-color: var(--color-success); color: #fff; } /* ---------------------------------------------------------------------------- 21. DETALLE DE SOLICITUD (layout de 2 columnas + timeline con avatares) ---------------------------------------------------------------------------- */ .detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: 4px; } .detail-header__title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .detail-header__icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-primary-tint); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .detail-header__icon svg { width: 18px; height: 18px; } .detail-header__meta { font-size: var(--fs-sm); margin-bottom: var(--space-6); } .detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-6); align-items: start; } @media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; } } .detail-sidebar { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: calc(var(--space-4) + 60px); } @media (max-width: 860px) { .detail-sidebar { position: static; } } .detail-card { max-width: none; } .detail-field { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); } .detail-field:last-child { border-bottom: none; padding-bottom: 0; } .detail-field__label { color: var(--color-text-secondary); } .detail-field__value { font-weight: var(--fw-semibold); text-align: right; } .detail-field__value--amount { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); color: var(--color-primary); } /* Adjunto real (Storage) en el panel de detalle — por default solo se ve el nombre; la previsualización de imagen/PDF (pesada, ocupa lugar) recién se arma y se muestra al hacer click en el nombre (ver toggleAdjuntoPreview en detail-panel.js). El ícono de descarga es un link aparte, directo. */ .dp-adjunto { margin-bottom: var(--space-3); } .dp-adjunto:last-child { margin-bottom: 0; } .dp-adjunto__row { display: flex; align-items: center; gap: var(--space-2); } .dp-adjunto__name { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 6px 10px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface-alt); color: var(--color-text); font-size: var(--fs-xs); font-weight: var(--fw-medium); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); } .dp-adjunto__name:hover { border-color: var(--color-primary); } .dp-adjunto__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp-adjunto__download { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-border); color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; transition: border-color var(--transition-fast), color var(--transition-fast); } .dp-adjunto__download:hover { border-color: var(--color-primary); color: var(--color-primary); } .dp-adjunto-preview-wrap { margin-top: var(--space-2); } .dp-adjunto-preview { display: block; max-width: 100%; max-height: 220px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-alt); } .dp-adjunto-preview--pdf { width: 100%; height: 260px; } /* Timeline con avatar por persona en vez de un punto genérico */ .timeline--avatar .timeline-item { gap: var(--space-4); } .timeline--avatar .timeline-item::before { left: 17px; top: 40px; } .timeline-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: var(--fs-sm); flex-shrink: 0; z-index: 1; background: var(--color-surface-alt); color: var(--color-text-secondary); border: 2px solid var(--color-surface); box-shadow: 0 0 0 1px var(--color-border); } .timeline-avatar--success { background: var(--color-success-bg); color: var(--color-success); } .timeline-avatar--warning { background: var(--color-warning-bg); color: var(--color-warning); } .timeline-avatar--danger { background: var(--color-danger-bg); color: var(--color-danger); } .timeline--avatar .timeline-content { padding-top: 2px; } .timeline-role { color: var(--color-text-tertiary); font-weight: var(--fw-regular); } /* Comprobante/voucher de impresión (Detalle de solicitud) — documento formal aparte de la UI interactiva: pensado para alguien que no conoce el sistema (respaldo entre las partes), así que nunca muestra la timeline con comentarios/menciones, solo los pasos formales resueltos y el resultado final. Oculto en pantalla, es lo único visible al imprimir — ver ICON-less renderPrintVoucher() en detail-panel.js. */ .dp-print-voucher { display: none; } .dp-voucher__header { text-align: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid #000; } .dp-voucher__brand { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #555; } .dp-voucher__header h1 { font-size: 20px; margin: 4px 0; } .dp-voucher__id { font-size: 11px; color: #555; font-family: var(--font-mono); } .dp-voucher table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 12px; } .dp-voucher table td, .dp-voucher table th { padding: 6px 8px; border: 1px solid #ccc; text-align: left; vertical-align: top; } .dp-voucher table th { background: #f2f2f2; font-weight: 600; } .dp-voucher__meta td:first-child { width: 180px; font-weight: 600; background: #f9f9f9; } .dp-voucher h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; margin: 20px 0 8px; } .dp-voucher__resultado { font-size: 13px; font-weight: 700; padding: 8px 12px; border: 1px solid #000; display: inline-block; margin-bottom: 8px; } .dp-voucher__footer { margin-top: 32px; padding-top: 12px; border-top: 1px solid #ccc; font-size: 10px; color: #777; } /* Impresión: solo el voucher, nada más de la app */ @media print { .sidebar, .topbar, .breadcrumb-bar, .theme-toggle, .step-back, .dp-imprimir, .sidebar-overlay, .detail-header, .detail-header__meta, .detail-grid { display: none !important; } .shell, .shell__main, .shell__content { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; } body { background: #fff !important; color: #000 !important; } .dp-print-voucher { display: block !important; color: #000; } } /* ---------------------------------------------------------------------------- 22. KANBAN (tablero de solicitudes — estética densa tipo Linear/Vercel, mismos tokens de marca, sin reinventar el lenguaje visual) ---------------------------------------------------------------------------- */ .kanban { display: flex; gap: var(--space-5); align-items: flex-start; overflow-x: auto; padding-bottom: var(--space-3); } .kanban-column { flex: 1 1 300px; min-width: 280px; max-width: 380px; background: var(--color-surface-alt); border-radius: var(--radius-lg); padding: var(--space-3); } .kanban-column__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-2) var(--space-3); } .kanban-column__title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); } .kanban-column__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .kanban-column__dot--warning { background: var(--color-warning); } .kanban-column__dot--success { background: var(--color-success); } .kanban-column__dot--danger { background: var(--color-danger); } .kanban-column__count { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-tertiary); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 1px 8px; } .kanban-column__list { display: flex; flex-direction: column; gap: var(--space-2); max-height: calc(100vh - 300px); overflow-y: auto; padding: 2px; } .kanban-card { display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; transition: border-color var(--transition-fast), transform 100ms ease, box-shadow var(--transition-fast); } .kanban-card:hover { border-color: var(--color-border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .kanban-card__id { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-tertiary); letter-spacing: 0.02em; } .kanban-card__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin: 3px 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kanban-card__meta { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--color-text-secondary); } .kanban-card__meta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .kanban-card__amount { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--color-text); } .kanban-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--color-border); } .kanban-card__timestamp { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-tertiary); } .kanban-card__overdue { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: var(--fw-semibold); color: var(--color-danger); } .kanban-card__overdue svg { width: 10px; height: 10px; } .kanban-empty { padding: var(--space-5) var(--space-3); text-align: center; font-size: var(--fs-xs); color: var(--color-text-tertiary); border: 1px dashed var(--color-border); border-radius: var(--radius-md); } @media (max-width: 640px) { .kanban { flex-direction: column; overflow-x: visible; } .kanban-column { max-width: none; width: 100%; } .kanban-column__list { max-height: none; } } /* ---------------------------------------------------------------------------- 23. DASHBOARD (stat cards, gráfico de tendencia, accesos directos, actividad reciente — Dashboard general y Dashboard de rendimiento) ---------------------------------------------------------------------------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .stat-card { display: flex; flex-direction: column; gap: 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 20px 22px; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .stat-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); } .stat-card__icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--color-primary-tint); color: var(--color-primary); } .stat-card__icon svg { width: 18px; height: 18px; } .stat-card__icon--success { background: var(--color-success-bg); color: var(--color-success); } .stat-card__icon--warning { background: var(--color-warning-bg); color: var(--color-warning); } .stat-card__icon--danger { background: var(--color-danger-bg); color: var(--color-danger); } .stat-card__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-secondary); } .stat-card__value { font-family: var(--font-mono); font-size: 2rem; font-weight: var(--fw-bold); color: var(--color-text); line-height: var(--lh-tight); letter-spacing: -0.01em; } .stat-card__sub { display: inline-flex; align-items: center; width: fit-content; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-text-tertiary); } .stat-card__sub--danger { color: var(--color-danger); font-weight: var(--fw-semibold); background: var(--color-danger-bg); padding: 3px 10px; border-radius: var(--radius-full); } .stat-card__link { display: block; text-decoration: none; color: inherit; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); } .chart-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-5) var(--space-4); margin-bottom: var(--space-6); box-shadow: var(--shadow-sm); } .chart-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; } .segmented { display: inline-flex; background: var(--color-surface-alt); border-radius: var(--radius-full); padding: 3px; gap: 2px; } .segmented__option { padding: 5px 14px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-text-secondary); border-radius: var(--radius-full); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast); } .segmented__option.is-active { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); } .chart-legend { display: flex; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); } .chart-legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-text-secondary); } .chart-legend__dot { width: 9px; height: 9px; border-radius: var(--radius-full); display: inline-block; } .quick-access-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .quick-access-card { display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } .quick-access-card:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); } .quick-access-card__icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); color: var(--color-on-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(var(--color-primary-rgb), 0.28); } .quick-access-card__icon svg { width: 20px; height: 20px; } .quick-access-card__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); } .quick-access-card__sub { font-size: var(--fs-xs); color: var(--color-text-tertiary); margin-top: 2px; } .activity-feed { display: flex; flex-direction: column; } .activity-item { display: flex; align-items: center; gap: var(--space-3); padding: 11px 0; border-bottom: 1px solid var(--color-border); } .activity-item:last-child { border-bottom: none; padding-bottom: 2px; } .activity-item:first-child { padding-top: 2px; } .activity-icon { width: 30px; height: 30px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--color-surface-alt); color: var(--color-text-tertiary); } .activity-icon svg { width: 15px; height: 15px; } .activity-icon--success { background: var(--color-success-bg); color: var(--color-success); } .activity-icon--danger { background: var(--color-danger-bg); color: var(--color-danger); } .activity-icon--warning { background: var(--color-warning-bg); color: var(--color-warning); } .activity-item__text { font-size: var(--fs-sm); color: var(--color-text); line-height: var(--lh-snug); } .activity-item__text strong { font-weight: var(--fw-semibold); } .activity-time { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-tertiary); white-space: nowrap; margin-left: auto; padding-left: var(--space-2); } .dashboard-columns { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-5); align-items: start; } @media (max-width: 860px) { .dashboard-columns { grid-template-columns: 1fr; } } .perf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); } .perf-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .perf-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .perf-card__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); } .perf-card__avatar { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); color: var(--color-on-primary); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: var(--fs-sm); } .perf-card__name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); } .perf-card__role { font-size: var(--fs-xs); color: var(--color-text-tertiary); margin-top: 1px; } .perf-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-4); } .perf-stat__label { font-size: 10px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; } .perf-stat__value { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-top: 3px; letter-spacing: -0.01em; } .perf-card--self { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-sm); background: linear-gradient(180deg, var(--color-primary-tint) 0%, var(--color-surface) 140px); } .perf-card__sparkline { margin-top: var(--space-4); } /* Ranking (Rendimiento) — lista compacta ordenada por una métrica, con posición, avatar y valor a la derecha. Mismo .segmented de arriba para togglear entre "tasa de aprobación" y "% en plazo". */ .rank-list { display: flex; flex-direction: column; } .rank-row { display: flex; align-items: center; gap: var(--space-3); padding: 10px 6px; border-bottom: 1px solid var(--color-border); } .rank-row:last-child { border-bottom: none; } .rank-row--self { background: var(--color-primary-tint); border-radius: var(--radius-md); } .rank-row__pos { width: 22px; flex-shrink: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-tertiary); text-align: center; } .rank-row__pos--top { color: var(--color-primary); font-weight: var(--fw-bold); } .rank-row__info { flex: 1; min-width: 0; } .rank-row__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); } .rank-row__meta { font-size: var(--fs-xs); color: var(--color-text-tertiary); margin-top: 1px; } .rank-row__value { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-md); flex-shrink: 0; } /* ---------------------------------------------------------------------------- 24. AVATARES, ETIQUETAS Y ADMINISTRACIÓN DE CUENTAS (Mi Perfil, Usuarios, Etiquetas — foto/preset/iniciales, chips de etiqueta, cola de aprobación) ---------------------------------------------------------------------------- */ .avatar-circle { position: relative; flex-shrink: 0; border-radius: var(--radius-full); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface-alt); } .avatar-circle img, .avatar-circle svg { width: 100%; height: 100%; display: block; object-fit: cover; } .avatar-circle--iniciales { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); color: var(--color-on-primary); font-weight: var(--fw-bold); } /* Selector de avatar (Mi Perfil): grilla de presets + opción "subir foto". */ .avatar-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: var(--space-3); max-width: 420px; } .avatar-picker-option { padding: 0; border-radius: var(--radius-full); cursor: pointer; line-height: 0; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .avatar-picker-option:hover { transform: translateY(-2px); } .avatar-picker-option.is-selected { box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--color-primary); } /* Chips de etiqueta: mostrar (solo lectura) y elegir (checklist toggle). */ .tag-chip-group { display: flex; flex-wrap: wrap; gap: 8px; } .tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-medium); background: var(--color-surface-alt); color: var(--color-text-secondary); border: 1px solid var(--color-border); } .tag-chip--selectable { cursor: pointer; user-select: none; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .tag-chip--selectable:hover { border-color: var(--color-border-strong); } .tag-chip--selectable.is-selected { background: var(--color-primary-tint); color: var(--color-primary); border-color: var(--color-primary); font-weight: var(--fw-semibold); } .tag-chip--empty { color: var(--color-text-tertiary); font-style: italic; border-style: dashed; } /* Cola de aprobación de cuentas (usuarios.html). */ .approval-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--shadow-sm); margin-bottom: var(--space-4); } .approval-card__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); } .approval-card__name { font-weight: var(--fw-semibold); font-size: var(--fs-base); } .approval-card__meta { font-size: var(--fs-xs); color: var(--color-text-tertiary); margin-top: 1px; } .approval-card__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); } @media (max-width: 520px) { .approval-card__fields { grid-template-columns: 1fr; } } .approval-card__actions { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; } /* Fila de "Todos los usuarios" (usuarios.html, tab Todos). */ .user-row { display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-4); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; } .user-row:last-child { border-bottom: none; } .user-row__main { flex: 1 1 220px; min-width: 0; } .user-row__name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); } .user-row__meta { font-size: var(--fs-xs); color: var(--color-text-tertiary); margin-top: 1px; } .user-row__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } /* ---------------------------------------------------------------------------- 25. INBOX (Bandeja / Todas las Solicitudes) — icon-tile con avatar superpuesto, pills de filtro, layout de lista + panel de detalle ---------------------------------------------------------------------------- */ .req-tile { position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--color-surface-alt); color: var(--color-text-secondary); } .req-tile svg { width: 22px; height: 22px; } .req-tile--warning { background: var(--color-warning-bg); color: var(--color-warning); } .req-tile--success { background: var(--color-success-bg); color: var(--color-success); } .req-tile--danger { background: var(--color-danger-bg); color: var(--color-danger); } .req-tile--primary { background: var(--color-primary-tint); color: var(--color-primary); } .req-tile__avatar { position: absolute; bottom: -4px; right: -4px; width: 20px; height: 20px; border-radius: var(--radius-full); border: 2px solid var(--color-surface); overflow: hidden; background: var(--color-surface); } /* Variante chica — filas de tabla y tarjetas de tablero densas (Todas las Solicitudes), donde el req-tile de 44px de siempre no entra. Mismo radio proporcional (~0.31 del lado), no un valor suelto. */ .req-tile--sm { width: 36px; height: 36px; border-radius: 11px; } .req-tile--sm svg { width: 18px; height: 18px; } .req-tile--sm .req-tile__avatar { width: 16px; height: 16px; } /* Barra de filtros/búsqueda tipo pastilla. */ .filter-bar { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-5); } .search-pill { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface-alt); min-height: 40px; flex: 1 1 220px; transition: border-color var(--transition-fast), background var(--transition-fast); } .search-pill:focus-within { border-color: var(--color-primary); background: var(--color-surface); } .search-pill svg { width: 16px; height: 16px; color: var(--color-text-tertiary); flex-shrink: 0; } .search-pill input { border: none; background: none; padding: 0; min-height: auto; flex: 1; font-size: var(--fs-sm); } .search-pill input:focus { outline: none; box-shadow: none; background: none; } .filter-pill-select { appearance: none; -webkit-appearance: none; padding: 9px 32px 9px 14px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background-color: var(--color-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239791ac' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-secondary); min-height: 40px; cursor: pointer; flex-shrink: 0; } .filter-pill-select:hover { border-color: var(--color-border-strong); } .count-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-full); background: var(--color-surface-alt); font-size: 10px; font-weight: var(--fw-bold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; } /* ---------------------------------------------------------------------------- 26. UTILIDADES ---------------------------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; }