/** * NEUXA Design System — tokens de color (claro / oscuro) y componentes base. * Identidad: enterprise fleet + industrial technology. * Incluir ANTES de los CSS de cada módulo. * * Tokens semánticos: --bg-primary, --bg-card, --text-main, --text-muted, --border-color * Tema oscuro: clase .dark en o */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Nunito:wght@400;600;700;800&display=swap"); :root { /* Marca — igual en claro y oscuro */ --neuxa-navy-dark: #0B1120; --neuxa-navy: #0B1120; --neuxa-navy-mid: #111827; --neuxa-blue: #1E293B; --neuxa-orange: #FF6B00; --neuxa-orange-hover: #e85f00; --neuxa-success: #16A34A; --neuxa-warning: #FF7300; --neuxa-caution: #D97706; --neuxa-danger: #DC2626; --neuxa-info: #2563EB; /* Superficies — modo claro */ --bg-primary: #F1F5F9; --bg-card: #FFFFFF; --bg-elevated: #FFFFFF; --bg-topbar: rgba(255, 255, 255, 0.92); --bg-overlay-from: rgba(248, 250, 252, 0.92); --bg-overlay-to: rgba(248, 250, 252, 0.96); --bg-card-glass: rgba(255, 255, 255, 0.94); --text-main: #0F172A; --text-muted: #64748B; --border-color: #E2E8F0; --border-strong: #D5DCE6; --bg-hover: rgba(15, 23, 42, 0.04); /* Acentos: mismo naranja/azul, contenedores más suaves en claro */ --accent-orange: var(--neuxa-orange); --accent-navy: var(--neuxa-navy); --accent-orange-container: rgba(255, 115, 0, 0.12); --accent-blue-container: rgba(37, 99, 235, 0.10); color-scheme: light; /* Compatibilidad con tokens viejos */ --neuxa-white: #F5F7FA; --neuxa-canvas: var(--bg-primary); --neuxa-surface: var(--bg-card); --neuxa-text: var(--text-main); --neuxa-muted: var(--text-muted); --neuxa-muted-2: #94A3B8; --neuxa-muted-3: #CBD5E1; --neuxa-border: var(--border-color); --neuxa-border-strong: var(--border-strong); --bg: var(--bg-primary); --surface: var(--bg-card); --surface-2: #F8FAFC; --surface-3: #F1F5F9; --line: var(--border-color); --line-strong: var(--border-strong); --ink: var(--text-main); --ink-soft: var(--text-muted); --ink-mute: #94A3B8; --neuxa-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --neuxa-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --neuxa-radius-sm: 4px; --neuxa-radius: 6px; --neuxa-radius-lg: 8px; --neuxa-shadow-sm: none; --neuxa-shadow: none; --neuxa-shadow-lg: 0 8px 20px rgba(15, 23, 42, 0.08); --neuxa-ease: 180ms ease; --neuxa-title: 1.75rem; --neuxa-subtitle: 0.95rem; --neuxa-label: 0.72rem; --neuxa-kpi: 1.7rem; --nx-sidebar-w: 260px; --nx-sidebar-w-collapsed: 80px; --og-navy: var(--neuxa-navy); --og-orange: var(--neuxa-orange); --navy: var(--neuxa-navy); --orange: var(--neuxa-orange); --nx-orange: var(--neuxa-orange); --nx-navy: var(--neuxa-navy); } html.dark, :root.dark, body.dark { --bg-primary: #0B1120; --bg-card: #111827; --bg-elevated: #1E293B; --bg-topbar: rgba(11, 17, 32, 0.92); --bg-overlay-from: #0B1120; --bg-overlay-to: #0B1120; --bg-card-glass: #111827; --text-main: #F1F5F9; --text-muted: #94A3B8; --border-color: rgba(148, 163, 184, 0.16); --border-strong: rgba(148, 163, 184, 0.28); --bg-hover: rgba(255, 255, 255, 0.05); --accent-orange: var(--neuxa-orange); --accent-navy: var(--neuxa-navy); --accent-orange-container: rgba(255, 115, 0, 0.16); --accent-blue-container: rgba(37, 99, 235, 0.16); color-scheme: dark; --neuxa-white: #F1F5F9; --neuxa-canvas: var(--bg-primary); --neuxa-surface: var(--bg-card); --neuxa-text: var(--text-main); --neuxa-muted: var(--text-muted); --neuxa-muted-2: #94A3B8; --neuxa-muted-3: #64748B; --neuxa-border: var(--border-color); --neuxa-border-strong: var(--border-strong); --bg: var(--bg-primary); --surface: var(--bg-card); --surface-2: #0F172A; --surface-3: var(--bg-primary); --line: var(--border-color); --line-strong: var(--border-strong); --ink: var(--text-main); --ink-soft: var(--text-muted); --ink-mute: #94A3B8; --neuxa-shadow-sm: none; --neuxa-shadow: none; --neuxa-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.28); } html { font-family: var(--neuxa-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background-color: var(--bg-primary); background-image: radial-gradient(rgba(148, 163, 184, 0.09) 1px, transparent 1px); background-size: 18px 18px; color: var(--text-main); } /* Utilidades tipo Tailwind (mismas tokens) */ .bg-primary { background-color: var(--bg-primary) !important; } .bg-card { background-color: var(--bg-card) !important; } .text-main { color: var(--text-main) !important; } .text-muted { color: var(--text-muted) !important; } .border-color { border-color: var(--border-color) !important; } /* ── Botones ── */ .nx-btn, a.nx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--neuxa-radius); font-family: var(--neuxa-font); font-size: 0.875rem; font-weight: 600; line-height: 1.2; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background var(--neuxa-ease), border-color var(--neuxa-ease), color var(--neuxa-ease), box-shadow var(--neuxa-ease), transform var(--neuxa-ease); } .nx-btn:hover { transform: none; } .nx-btn:active { transform: translateY(0); } .nx-btn-primary { background: var(--neuxa-orange); color: #fff; border-color: var(--neuxa-orange); } .nx-btn-primary:hover { background: var(--neuxa-orange-hover); border-color: var(--neuxa-orange-hover); color: #fff; box-shadow: 0 6px 16px rgba(255, 115, 0, 0.28); } .nx-btn-ghost { background: transparent; color: var(--text-main); border-color: var(--border-color); } .nx-btn-ghost:hover { background: var(--accent-orange-container); border-color: var(--neuxa-orange); color: var(--text-main); } .nx-btn-navy { background: var(--neuxa-navy); color: #fff; border-color: var(--neuxa-navy); } .nx-btn-navy:hover { background: var(--neuxa-navy-mid); color: #fff; } .nx-btn-outline { background: var(--bg-card); color: var(--text-main); border-color: var(--border-strong); } .nx-btn-outline:hover { border-color: var(--neuxa-orange); color: var(--neuxa-orange); } /* ── Badges de estado: indicador punto, no pastilla brillante ── */ .nx-badge, .ops-badge { display: inline-flex; align-items: center; gap: 6px; padding: 0; border-radius: 0; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; background: transparent !important; transition: color var(--neuxa-ease); } .nx-badge::before, .ops-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: currentColor; } .nx-badge-ok, .ops-badge.programado, .ops-badge.vigente { color: #16A34A; } .nx-badge-warn, .ops-badge.pendiente { color: var(--neuxa-orange); } .nx-badge-caution, .ops-badge.proximo { color: #D97706; } .nx-badge-danger, .ops-badge.vencido { color: #DC2626; } .nx-badge-info, .ops-badge.proceso { color: #2563EB; } html.dark .nx-badge-ok, html.dark .ops-badge.programado, html.dark .ops-badge.vigente, body.dark .nx-badge-ok, body.dark .ops-badge.programado, body.dark .ops-badge.vigente { color: #4ADE80; } html.dark .nx-badge-warn, html.dark .ops-badge.pendiente, body.dark .nx-badge-warn, body.dark .ops-badge.pendiente { color: #FB923C; } html.dark .nx-badge-caution, html.dark .ops-badge.proximo, body.dark .nx-badge-caution, body.dark .ops-badge.proximo { color: #FBBF24; } html.dark .nx-badge-danger, html.dark .ops-badge.vencido, body.dark .nx-badge-danger, body.dark .ops-badge.vencido { color: #F87171; } html.dark .nx-badge-info, html.dark .ops-badge.proceso, body.dark .nx-badge-info, body.dark .ops-badge.proceso { color: #93C5FD; } /* ── Cards ── */ .nx-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--neuxa-radius); box-shadow: none; color: var(--text-main); transition: border-color var(--neuxa-ease); } .nx-card:hover { box-shadow: none; border-color: var(--border-strong); } /* ── Tablas ── */ .nx-table, .ops-table { width: 100%; border-collapse: collapse; } .nx-table th, .ops-table th { text-align: left; font-size: var(--neuxa-label); font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; padding: 10px 12px; border-bottom: 1px solid var(--border-color); background: var(--bg-primary); } .nx-table td, .ops-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-color); vertical-align: middle; color: var(--text-main); } .nx-table tbody tr:hover, .ops-table tbody tr:hover { background: var(--accent-blue-container); } /* SweetAlert alineado a NEUXA */ .swal2-popup { font-family: var(--neuxa-font) !important; border-radius: var(--neuxa-radius) !important; background: var(--bg-card) !important; color: var(--text-main) !important; } .swal2-title, .swal2-html-container { color: var(--text-main) !important; } .swal2-confirm { background: var(--neuxa-orange) !important; } .swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 3px rgba(255, 115, 0, 0.25) !important; } /* ── Preferencias de cuenta: fuente ── */ html[data-nx-font="inter"] { --neuxa-font: "Inter", system-ui, sans-serif; } html[data-nx-font="source"] { --neuxa-font: "Source Sans 3", "Segoe UI", sans-serif; } html[data-nx-font="ibm"] { --neuxa-font: "IBM Plex Sans", "Segoe UI", sans-serif; } html[data-nx-font="nunito"] { --neuxa-font: "Nunito", "Segoe UI", sans-serif; } html[data-nx-font="system"] { --neuxa-font: system-ui, -apple-system, "Segoe UI", sans-serif; } html[data-nx-font] body, html[data-nx-font] button, html[data-nx-font] input, html[data-nx-font] select, html[data-nx-font] textarea { font-family: var(--neuxa-font) !important; } /* ── Adaptador global: superficies de la app ── */ body:not(.nx-portal):not(.nx-ops) { background-color: var(--bg-primary); color: var(--text-main); } .topbar, .garaje-topbar, .main, .content, .garaje-main, .garaje-content { background-color: var(--bg-primary); color: var(--text-main); border-color: var(--border-color); } .garaje-topbar, .topbar { background: var(--bg-topbar); border-bottom: 1px solid var(--border-color); } .garaje-topbar-title, .topbar h1, .topbar h2 { color: var(--text-main); } .card, .glass-panel, .garaje-kpi, .ops-glass, .kpi-card, .det-accordion, .view .card { background: var(--bg-card); color: var(--text-main); border-color: var(--border-color); } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { background-color: var(--bg-card); color: var(--text-main); border-color: var(--border-color); } html.dark body:not(.nx-ops):not(.nx-portal) .topbar, html.dark body:not(.nx-ops):not(.nx-portal) .garaje-topbar, html.dark body:not(.nx-ops):not(.nx-portal) .main, html.dark body:not(.nx-ops):not(.nx-portal) .content, html.dark body:not(.nx-ops):not(.nx-portal) .garaje-main, html.dark body:not(.nx-ops):not(.nx-portal) .garaje-content, html.dark body.docs-app, html.dark .app .main { background: var(--bg-primary) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; } html.dark .card, html.dark .glass-panel, html.dark table, html.dark .kpi-grid > *, html.dark .det-accordion, html.dark .modal-card, html.dark .wa-modal-card { background: var(--bg-card) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; } html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html.dark select, html.dark textarea { background-color: var(--bg-elevated) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; } html.dark .topbar h1, html.dark .topbar h2, html.dark .garaje-topbar-title, html.dark .garaje-main h1, html.dark .garaje-main h2, html.dark .garaje-main h3, html.dark .garaje-main h4, html.dark .main h1, html.dark .main h2, html.dark .main h3, html.dark .main h4, html.dark .content h1, html.dark .content h2, html.dark .content h3, html.dark .content h4 { color: var(--text-main); } html.dark .garaje-main p, html.dark .garaje-main small, html.dark .garaje-main label, html.dark .garaje-main th, html.dark .main p, html.dark .main small, html.dark .main label, html.dark .main th, html.dark .content p, html.dark .content small, html.dark .content label, html.dark .content th { color: var(--text-muted); } html.dark .garaje-main td, html.dark .garaje-main strong, html.dark .main td, html.dark .main strong, html.dark .content td, html.dark .content strong { color: var(--text-main); } html.dark body.docs-app, html.dark .app { background-color: var(--bg-primary) !important; color: var(--text-main) !important; } html.dark .emp-card, html.dark .dash-nota-card, html.dark .dash-notas-empty, html.dark .table-wrapper, html.dark .hr-empty, html.dark .hr-saved, html.dark .guia-biblioteca-grupo, html.dark .chk-kpi, html.dark .calendario-panel, html.dark .kpi-box, html.dark .top-bottom-panel, html.dark .panel { background: var(--bg-card) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; } /* ── Piel industrial: densidad, radios bajos, números alineados ── */ .tabular-nums, .font-mono-num, .kpi-value, .garaje-kpi-val, .ops-kpi-sub, .ops-pat, .unit-card-patente, td.ops-pat, .ops-when { font-variant-numeric: tabular-nums; } .kpi-value, .garaje-kpi-val, .unit-card-patente, .ops-pat, td.ops-pat { font-family: var(--neuxa-mono); } body:not(.nx-portal) .kpi-card, body:not(.nx-portal) .filter-bar, body:not(.nx-portal) .panel, body:not(.nx-portal) .recurso-card, body:not(.nx-portal) .emp-card, body:not(.nx-portal) .calendario-panel, body:not(.nx-portal) .obs-panel, body:not(.nx-portal) .det-accordion, body:not(.nx-portal) .hab-op-header, body:not(.nx-portal) .hab-op-list, body:not(.nx-portal) .kpi-box, body:not(.nx-portal) .filtros-card, body:not(.nx-portal) .tarjeta-unidad, body:not(.nx-portal) .unidad-detalle, body:not(.nx-portal) .empty-state, body:not(.nx-portal) .glass-panel, body:not(.nx-portal) .chk-filter-card, body:not(.nx-portal) .chk-kpi-drill-sum { background: var(--bg-card) !important; color: var(--text-main); border: 1px solid var(--border-color) !important; border-radius: var(--neuxa-radius) !important; box-shadow: none !important; } body:not(.nx-portal) .kpi-card { border-left-width: 3px !important; } body:not(.nx-portal) .modal-card, body:not(.nx-portal) .wa-modal-card { border-radius: var(--neuxa-radius-lg) !important; } body:not(.nx-portal) .badge-doc, body:not(.nx-portal) .badge-estado, body:not(.nx-portal) .badge-stat, body:not(.nx-portal) .badge-sistema, body:not(.nx-portal) .vtv-badge, body:not(.nx-portal) .semaforo-grande { border-radius: 4px !important; font-weight: 600 !important; letter-spacing: 0.03em; } body:not(.nx-portal) .topbar h2 { color: var(--text-main) !important; } body:not(.nx-portal) .kpi-label { color: var(--text-muted) !important; } body:not(.nx-portal) .kpi-value { color: var(--text-main) !important; } html.dark .spinner-box, html.dark .chart-info-popup, html.dark .modal-criticidad-card { background: var(--bg-card) !important; color: var(--text-main) !important; }