nexabase-report 0.20.0 → 0.20.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/{html2pdf-Bq1KgPtU.js → html2pdf-CBWNkR1H.js} +2 -2
  2. package/dist/{index-EAYZf8L5.js → index-BFBYTCbb.js} +3881 -3881
  3. package/dist/{index.es-BK7Z2Ps-.js → index.es-xiVt1ZAN.js} +2 -2
  4. package/dist/{jspdf.es.min-CZw-apMv.js → jspdf.es.min-BYOSyv7A.js} +1 -1
  5. package/dist/lib/styles/_designer.css +2604 -2549
  6. package/dist/nexabase-report.es.js +1 -1
  7. package/dist/nexabase-report.umd.js +186 -186
  8. package/dist/{pptxgen.es-D0ptodFw.js → pptxgen.es-CPSseWfW.js} +1 -1
  9. package/package.json +1 -1
package/dist/lib/styles/_designer.css CHANGED
@@ -1,2549 +1,2604 @@
1
- /* ============================================================
2
- DESIGNER COMPONENT STYLES
3
- ============================================================ */
4
-
5
- .nd-root {
6
- display: flex;
7
- flex-direction: column;
8
- height: 100vh;
9
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
10
- background: var(--nd-background);
11
- color: var(--nd-text);
12
- overflow: hidden;
13
- user-select: none;
14
- -webkit-font-smoothing: antialiased;
15
- }
16
-
17
- .nd-header {
18
- background: var(--nd-surface);
19
- border-bottom: 1px solid var(--nd-border);
20
- box-shadow: var(--shadow-sm);
21
- z-index: 50;
22
- }
23
-
24
- .nd-tab-bar {
25
- display: flex;
26
- padding: 6px 12px 0;
27
- gap: 2px;
28
- background: var(--nd-background);
29
- border-bottom: 1px solid var(--nd-border);
30
- align-items: flex-end;
31
- }
32
-
33
- .nd-brand {
34
- display: flex;
35
- align-items: center;
36
- gap: 8px;
37
- padding-bottom: 2px;
38
- margin-right: 8px;
39
- cursor: pointer;
40
- user-select: none;
41
- }
42
-
43
- .nd-brand-logo-ribbon {
44
- height: 32px;
45
- width: auto;
46
- flex-shrink: 0;
47
- filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
48
- }
49
-
50
- .nd-qat {
51
- display: flex;
52
- align-items: center;
53
- gap: 2px;
54
- padding-bottom: 2px;
55
- margin-right: 6px;
56
- }
57
-
58
- .nd-qat-btn {
59
- width: 26px;
60
- height: 24px;
61
- border-radius: var(--radius-sm);
62
- border: 1px solid transparent;
63
- background: transparent;
64
- color: var(--nd-text-secondary);
65
- cursor: pointer;
66
- display: inline-flex;
67
- align-items: center;
68
- justify-content: center;
69
- transition: all var(--transition);
70
- }
71
-
72
- .nd-qat-btn:hover:not(:disabled) {
73
- background: rgba(255, 255, 255, 0.6);
74
- border-color: var(--nd-border);
75
- color: var(--nd-text);
76
- }
77
-
78
- .nd-qat-btn:disabled {
79
- opacity: 0.45;
80
- cursor: not-allowed;
81
- }
82
-
83
- .nd-qat-sep {
84
- width: 1px;
85
- height: 18px;
86
- background: var(--nd-border);
87
- margin: 0 4px;
88
- }
89
-
90
- .nd-doc-type-toggle {
91
- display: flex;
92
- align-items: center;
93
- background: rgba(0, 0, 0, 0.05);
94
- padding: 3px;
95
- border-radius: 10px;
96
- margin: 0 16px;
97
- border: 1px solid rgba(0,0,0,0.05);
98
- margin-bottom: 2px;
99
- }
100
-
101
- .nd-type-btn {
102
- padding: 4px 14px;
103
- font-size: 11px;
104
- font-weight: 700;
105
- color: #64748b;
106
- background: transparent;
107
- border: none;
108
- border-radius: 7px;
109
- cursor: pointer;
110
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
111
- display: flex;
112
- align-items: center;
113
- gap: 6px;
114
- height: 24px;
115
- }
116
-
117
- .nd-type-btn i {
118
- font-size: 13px;
119
- opacity: 0.7;
120
- }
121
-
122
- .nd-type-btn:hover:not(.active) {
123
- background: rgba(255, 255, 255, 0.4);
124
- color: var(--nd-text);
125
- }
126
-
127
- .nd-type-btn.active {
128
- background: white;
129
- color: var(--nd-primary);
130
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
131
- }
132
-
133
- .nd-type-btn.active i {
134
- opacity: 1;
135
- }
136
-
137
- .nd-tab-report-name {
138
- margin-left: auto;
139
- padding-bottom: 2px;
140
- }
141
-
142
- .nd-top-right {
143
- display: flex;
144
- align-items: center;
145
- gap: 8px;
146
- }
147
-
148
- .nd-ribbon-toggle {
149
- width: 28px;
150
- height: 26px;
151
- border-radius: var(--radius-sm);
152
- border: 1px solid var(--nd-border);
153
- background: var(--nd-surface);
154
- color: var(--nd-text-secondary);
155
- cursor: pointer;
156
- display: inline-flex;
157
- align-items: center;
158
- justify-content: center;
159
- transition: all var(--transition);
160
- }
161
-
162
- .nd-ribbon-toggle:hover {
163
- background: rgba(255, 255, 255, 0.6);
164
- color: var(--nd-text);
165
- }
166
-
167
- .nd-conn {
168
- display: inline-flex;
169
- align-items: center;
170
- gap: 6px;
171
- padding: 0 8px;
172
- height: 26px;
173
- border-radius: 999px;
174
- border: 1px solid var(--nd-border);
175
- background: var(--nd-surface);
176
- color: var(--nd-text-secondary);
177
- font-size: 11px;
178
- font-weight: 500;
179
- }
180
-
181
- .nd-conn-dot {
182
- width: 8px;
183
- height: 8px;
184
- border-radius: 999px;
185
- background: #ef4444;
186
- box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
187
- }
188
-
189
- .nd-conn.active .nd-conn-dot {
190
- background: #22c55e;
191
- box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
192
- }
193
-
194
- .nd-conn-text { line-height: 1; }
195
-
196
- .nd-report-name-input {
197
- height: 26px;
198
- padding: 3px 10px;
199
- font-size: 12px;
200
- font-weight: 500;
201
- color: var(--nd-text);
202
- background: var(--nd-surface);
203
- border: 1px solid var(--nd-border);
204
- border-radius: var(--radius-sm);
205
- outline: none;
206
- transition: border-color var(--transition), box-shadow var(--transition);
207
- width: 220px;
208
- }
209
-
210
- .nd-report-name-input:focus {
211
- border-color: var(--nd-primary);
212
- box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
213
- }
214
-
215
- .nd-report-name-input::placeholder {
216
- color: var(--nd-text-muted);
217
- font-weight: 400;
218
- }
219
-
220
- .nd-tab {
221
- padding: 7px 18px;
222
- font-size: 12px;
223
- font-weight: 500;
224
- cursor: pointer;
225
- color: var(--nd-text-secondary);
226
- border-radius: var(--radius-sm) var(--radius-sm) 0 0;
227
- border: 1px solid transparent;
228
- border-bottom: none;
229
- transition: all var(--transition);
230
- }
231
-
232
- .nd-tab:hover {
233
- color: var(--nd-text);
234
- background: rgba(255, 255, 255, 0.6);
235
- }
236
-
237
- .nd-tab.active {
238
- color: var(--nd-primary);
239
- background: var(--nd-surface);
240
- border-color: var(--nd-border);
241
- border-bottom-color: var(--nd-surface);
242
- margin-bottom: -1px;
243
- font-weight: 600;
244
- }
245
-
246
- .nd-tab-archivo {
247
- background: var(--nd-primary) !important;
248
- color: #fff !important;
249
- font-weight: 600 !important;
250
- border-color: transparent !important;
251
- }
252
-
253
- .nd-tab-archivo:hover {
254
- background: var(--nd-primary-dark) !important;
255
- }
256
-
257
- .nd-tab-archivo.active {
258
- background: var(--nd-primary-dark) !important;
259
- color: #fff !important;
260
- border-color: var(--nd-primary) !important;
261
- }
262
-
263
- .nd-toolbar {
264
- display: flex;
265
- min-height: 96px;
266
- background: var(--nd-surface);
267
- padding: 8px 16px;
268
- gap: 4px;
269
- align-items: stretch;
270
- overflow-x: auto;
271
- }
272
-
273
- .nd-toolbar::-webkit-scrollbar { height: 4px; }
274
- .nd-toolbar::-webkit-scrollbar-thumb { background: var(--nd-border-strong); border-radius: 4px; }
275
-
276
- .nd-group {
277
- display: flex;
278
- flex-direction: column;
279
- background: transparent;
280
- padding: 4px 8px 20px;
281
- position: relative;
282
- gap: 2px;
283
- flex-shrink: 0;
284
- }
285
-
286
- .nd-group + .nd-group {
287
- border-left: 1px solid var(--nd-border);
288
- padding-left: 12px;
289
- margin-left: 4px;
290
- }
291
-
292
- .nd-group-body {
293
- display: flex;
294
- align-items: flex-start;
295
- justify-content: center;
296
- gap: 4px;
297
- }
298
-
299
- .nd-group-title {
300
- position: absolute;
301
- bottom: 2px;
302
- left: 0;
303
- right: 0;
304
- font-size: 10px;
305
- font-weight: 500;
306
- color: var(--nd-text-muted);
307
- text-align: center;
308
- text-transform: uppercase;
309
- letter-spacing: 0.04em;
310
- }
311
-
312
- .nd-btn-lg {
313
- display: flex;
314
- flex-direction: column;
315
- align-items: center;
316
- justify-content: center;
317
- gap: 3px;
318
- padding: 6px 10px;
319
- border-radius: var(--radius);
320
- cursor: pointer;
321
- min-width: 60px;
322
- height: 68px;
323
- border: 1px solid transparent;
324
- background: transparent;
325
- transition: all var(--transition);
326
- }
327
-
328
- .nd-btn-lg:hover {
329
- background: var(--nd-primary-ghost);
330
- border-color: var(--nd-primary-light);
331
- }
332
-
333
- .nd-btn-lg:active { background: var(--nd-primary-light); }
334
- .nd-btn-lg i { font-size: 24px !important; color: var(--nd-primary); }
335
-
336
- .nd-btn-lg span {
337
- font-size: 10.5px;
338
- font-weight: 500;
339
- color: var(--nd-text-secondary);
340
- line-height: 1.2;
341
- text-align: center;
342
- }
343
-
344
- .nd-btn-lg:hover i { color: var(--nd-primary-dark); }
345
-
346
- .nd-btn-sm-col {
347
- display: flex;
348
- flex-direction: column;
349
- justify-content: center;
350
- gap: 2px;
351
- }
352
-
353
- .nd-margins-group .nd-group-body {
354
- align-items: flex-end !important;
355
- justify-content: flex-end !important;
356
- }
357
-
358
- .nd-margins-group .nd-btn-sm-col {
359
- margin-top: auto !important;
360
- }
361
-
362
- /* Forzar ancho de los InputNumber dentro de márgenes */
363
- .nd-margins-group .p-inputnumber {
364
- width: 55px !important;
365
- min-width: 55px !important;
366
- max-width: 55px !important;
367
- flex-shrink: 0 !important;
368
- }
369
-
370
- .nd-margins-group .p-inputnumber .p-inputnumber-input {
371
- width: 55px !important;
372
- min-width: 55px !important;
373
- padding-left: 6px !important;
374
- padding-right: 6px !important;
375
- }
376
-
377
- .nd-btn-sm {
378
- display: flex;
379
- align-items: center;
380
- gap: 6px;
381
- padding: 3px 10px;
382
- border-radius: var(--radius-sm);
383
- cursor: pointer;
384
- height: 24px;
385
- min-width: 100px;
386
- border: 1px solid transparent;
387
- background: transparent;
388
- transition: all var(--transition);
389
- }
390
-
391
- .nd-btn-sm:hover {
392
- background: var(--nd-primary-ghost);
393
- border-color: var(--nd-primary-light);
394
- }
395
-
396
- .nd-btn-sm i { font-size: 13px !important; color: var(--nd-primary); }
397
- .nd-btn-sm span { font-size: 11px; color: var(--nd-text-secondary); }
398
-
399
- .nd-tbar-btn {
400
- display: flex;
401
- align-items: center;
402
- justify-content: center;
403
- width: 28px;
404
- height: 26px;
405
- border-radius: var(--radius-sm);
406
- cursor: pointer;
407
- transition: all var(--transition);
408
- color: var(--nd-text-secondary);
409
- border: 1px solid transparent;
410
- background: transparent;
411
- }
412
-
413
- .nd-tbar-btn:hover {
414
- background: var(--nd-primary-ghost);
415
- color: var(--nd-primary);
416
- }
417
-
418
- .nd-tbar-btn.active { background: var(--nd-primary); color: #fff; }
419
- .nd-tbar-btn i { font-size: 13px !important; }
420
-
421
- /* Botones de formato de texto (B, I) */
422
- .nd-format-btn {
423
- font-family: Georgia, 'Times New Roman', serif;
424
- }
425
-
426
- .nd-format-text-bold {
427
- font-weight: 900;
428
- font-size: 15px;
429
- line-height: 1;
430
- color: var(--nd-text-secondary);
431
- }
432
-
433
- .nd-format-text-italic {
434
- font-style: italic;
435
- font-weight: 700;
436
- font-size: 15px;
437
- line-height: 1;
438
- color: var(--nd-text-secondary);
439
- }
440
-
441
- .nd-tbar-btn.active .nd-format-text-bold,
442
- .nd-tbar-btn.active .nd-format-text-italic {
443
- color: #fff;
444
- }
445
-
446
- /* Botón de color de texto */
447
- .nd-color-btn {
448
- position: relative;
449
- }
450
-
451
- .nd-color-btn:hover {
452
- background: var(--nd-primary-ghost);
453
- }
454
-
455
- .nd-font-block { display: flex; flex-direction: column; gap: 4px; }
456
- .nd-font-block .nd-row { display: flex; gap: 4px; align-items: center; }
457
-
458
- .nd-body { flex: 1; display: flex; overflow: hidden; position: relative; }
459
-
460
- .nd-backstage {
461
- flex: 1;
462
- display: flex;
463
- overflow: hidden;
464
- background: var(--nd-background);
465
- min-height: 0;
466
- }
467
-
468
- .nd-backstage-left {
469
- width: 260px;
470
- flex-shrink: 0;
471
- background: #0f172a;
472
- color: #e2e8f0;
473
- display: flex;
474
- flex-direction: column;
475
- padding: 10px;
476
- gap: 6px;
477
- }
478
-
479
- .nd-backstage-back {
480
- height: 34px;
481
- border-radius: 10px;
482
- border: 1px solid rgba(255, 255, 255, 0.15);
483
- background: rgba(255, 255, 255, 0.06);
484
- color: #e2e8f0;
485
- display: flex;
486
- align-items: center;
487
- gap: 10px;
488
- padding: 0 12px;
489
- cursor: pointer;
490
- transition: all var(--transition);
491
- }
492
-
493
- .nd-backstage-back:hover {
494
- background: rgba(255, 255, 255, 0.12);
495
- border-color: rgba(255, 255, 255, 0.2);
496
- }
497
-
498
- .nd-backstage-section {
499
- margin-top: 10px;
500
- padding: 0 6px;
501
- font-size: 10px;
502
- font-weight: 800;
503
- letter-spacing: 0.08em;
504
- text-transform: uppercase;
505
- color: rgba(226, 232, 240, 0.7);
506
- }
507
-
508
- .nd-backstage-item {
509
- height: 34px;
510
- border-radius: 10px;
511
- border: 1px solid transparent;
512
- background: transparent;
513
- color: #e2e8f0;
514
- display: flex;
515
- align-items: center;
516
- gap: 10px;
517
- padding: 0 10px;
518
- cursor: pointer;
519
- transition: all var(--transition);
520
- }
521
-
522
- .nd-backstage-item:hover:not(:disabled) {
523
- background: rgba(59, 130, 246, 0.18);
524
- border-color: rgba(59, 130, 246, 0.25);
525
- }
526
-
527
- .nd-backstage-item.active {
528
- background: rgba(59, 130, 246, 0.26);
529
- border-color: rgba(59, 130, 246, 0.35);
530
- }
531
-
532
- .nd-backstage-item:disabled {
533
- opacity: 0.45;
534
- cursor: not-allowed;
535
- }
536
-
537
- .nd-backstage-spacer { flex: 1; }
538
-
539
- .nd-backstage-main {
540
- flex: 1;
541
- min-width: 0;
542
- padding: 22px 24px;
543
- overflow: auto;
544
- }
545
-
546
- .nd-backstage-header {
547
- padding: 0 2px 16px;
548
- }
549
-
550
- .nd-backstage-title {
551
- font-size: 20px;
552
- font-weight: 900;
553
- color: var(--nd-text);
554
- line-height: 1.2;
555
- }
556
-
557
- .nd-backstage-sub {
558
- font-size: 12px;
559
- color: var(--nd-text-secondary);
560
- margin-top: 4px;
561
- }
562
-
563
- .nd-backstage-grid {
564
- display: grid;
565
- grid-template-columns: repeat(3, minmax(0, 1fr));
566
- gap: 12px;
567
- }
568
-
569
- .nd-backstage-view {
570
- display: flex;
571
- flex-direction: column;
572
- gap: 12px;
573
- }
574
-
575
- .nd-bs-view {
576
- display: flex;
577
- align-items: flex-start;
578
- justify-content: flex-start;
579
- }
580
-
581
- .nd-bs-view-card {
582
- width: min(820px, 100%);
583
- border: 1px solid var(--nd-border);
584
- background: var(--nd-surface);
585
- border-radius: 12px;
586
- padding: 16px;
587
- box-shadow: var(--shadow-sm);
588
- }
589
-
590
- .nd-bs-view-title {
591
- font-size: 14px;
592
- font-weight: 900;
593
- color: var(--nd-text);
594
- }
595
-
596
- .nd-bs-view-desc {
597
- font-size: 12px;
598
- color: var(--nd-text-secondary);
599
- margin-top: 4px;
600
- }
601
-
602
- .nd-bs-view-actions {
603
- display: flex;
604
- flex-wrap: wrap;
605
- gap: 8px;
606
- margin-top: 12px;
607
- }
608
-
609
- .nd-bs-primary,
610
- .nd-bs-secondary {
611
- height: 34px;
612
- padding: 0 12px;
613
- border-radius: 10px;
614
- border: 1px solid #d1d5db;
615
- background: #ffffff;
616
- color: #0f172a;
617
- cursor: pointer;
618
- display: inline-flex;
619
- align-items: center;
620
- gap: 8px;
621
- transition: all var(--transition);
622
- }
623
-
624
- .nd-bs-primary {
625
- background: var(--nd-primary);
626
- border-color: var(--nd-primary-dark);
627
- color: #ffffff;
628
- }
629
-
630
- .nd-bs-primary:hover:not(:disabled) {
631
- background: var(--nd-primary-dark);
632
- }
633
-
634
- .nd-bs-secondary:hover:not(:disabled) {
635
- background: #f3f4f6;
636
- }
637
-
638
- .nd-bs-primary:disabled,
639
- .nd-bs-secondary:disabled {
640
- opacity: 0.55;
641
- cursor: not-allowed;
642
- }
643
-
644
- .nd-bs-form {
645
- margin-top: 12px;
646
- display: grid;
647
- grid-template-columns: 1fr;
648
- gap: 8px;
649
- }
650
-
651
- .nd-bs-label {
652
- font-size: 11px;
653
- font-weight: 700;
654
- color: var(--nd-text-secondary);
655
- }
656
-
657
- .nd-bs-input {
658
- height: 34px;
659
- border-radius: 10px;
660
- border: 1px solid var(--nd-border);
661
- padding: 0 10px;
662
- outline: none;
663
- font-size: 12px;
664
- background: #ffffff;
665
- transition: border-color var(--transition), box-shadow var(--transition);
666
- }
667
-
668
- .nd-bs-input:focus {
669
- border-color: var(--nd-primary);
670
- box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
671
- }
672
-
673
- .nd-bs-meta {
674
- margin-top: 12px;
675
- border: 1px solid var(--nd-border);
676
- border-radius: 12px;
677
- overflow: hidden;
678
- }
679
-
680
- .nd-bs-meta-row {
681
- display: flex;
682
- justify-content: space-between;
683
- gap: 12px;
684
- padding: 10px 12px;
685
- font-size: 12px;
686
- color: var(--nd-text);
687
- background: #ffffff;
688
- }
689
-
690
- .nd-bs-meta-row + .nd-bs-meta-row {
691
- border-top: 1px solid var(--nd-border);
692
- }
693
-
694
- .nd-bs-meta-row span:first-child {
695
- color: var(--nd-text-secondary);
696
- font-weight: 700;
697
- }
698
-
699
- .nd-bs-meta-row span:last-child {
700
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
701
- }
702
-
703
- .nd-bs-callout {
704
- margin-top: 12px;
705
- border: 1px solid var(--nd-border);
706
- border-radius: 12px;
707
- background: #f8fafc;
708
- padding: 12px;
709
- }
710
-
711
- .nd-bs-callout-title {
712
- font-size: 12px;
713
- font-weight: 900;
714
- color: var(--nd-text);
715
- }
716
-
717
- .nd-bs-callout-desc {
718
- font-size: 12px;
719
- color: var(--nd-text-secondary);
720
- margin-top: 4px;
721
- }
722
-
723
- .nd-bs-open {
724
- margin-top: 12px;
725
- }
726
-
727
- .nd-bs-open-top {
728
- display: flex;
729
- justify-content: flex-end;
730
- margin-bottom: 10px;
731
- }
732
-
733
- .nd-bs-open-list {
734
- position: relative;
735
- }
736
-
737
- .nd-bs-open-item {
738
- display: flex;
739
- flex-direction: column;
740
- gap: 2px;
741
- padding: 4px 0;
742
- }
743
-
744
- .nd-bs-open-name {
745
- display: flex;
746
- align-items: center;
747
- gap: 8px;
748
- font-size: 12px;
749
- font-weight: 700;
750
- color: var(--nd-text);
751
- }
752
-
753
- .nd-bs-pin {
754
- width: 24px;
755
- height: 22px;
756
- border-radius: 8px;
757
- border: 1px solid var(--nd-border);
758
- background: #ffffff;
759
- color: var(--nd-text-muted);
760
- cursor: pointer;
761
- display: inline-flex;
762
- align-items: center;
763
- justify-content: center;
764
- transition: all var(--transition);
765
- flex-shrink: 0;
766
- }
767
-
768
- .nd-bs-pin:hover {
769
- background: #f8fafc;
770
- color: var(--nd-text);
771
- }
772
-
773
- .nd-bs-recents {
774
- margin-bottom: 12px;
775
- display: grid;
776
- grid-template-columns: 1fr 1fr;
777
- gap: 10px;
778
- }
779
-
780
- .nd-bs-recents-block {
781
- border: 1px solid var(--nd-border);
782
- border-radius: 12px;
783
- background: #ffffff;
784
- overflow: hidden;
785
- }
786
-
787
- .nd-bs-recents-title {
788
- padding: 8px 10px;
789
- font-size: 11px;
790
- font-weight: 900;
791
- letter-spacing: 0.06em;
792
- text-transform: uppercase;
793
- background: #f8fafc;
794
- border-bottom: 1px solid var(--nd-border);
795
- color: var(--nd-text-secondary);
796
- }
797
-
798
- .nd-bs-recents-list {
799
- display: flex;
800
- flex-direction: column;
801
- }
802
-
803
- .nd-bs-recents-item {
804
- display: flex;
805
- justify-content: space-between;
806
- gap: 10px;
807
- padding: 8px 10px;
808
- border: none;
809
- background: transparent;
810
- cursor: pointer;
811
- text-align: left;
812
- transition: background var(--transition);
813
- }
814
-
815
- .nd-bs-recents-item:hover {
816
- background: var(--nd-primary-ghost);
817
- }
818
-
819
- .nd-bs-recents-name {
820
- font-size: 12px;
821
- font-weight: 700;
822
- color: var(--nd-text);
823
- overflow: hidden;
824
- text-overflow: ellipsis;
825
- white-space: nowrap;
826
- }
827
-
828
- .nd-bs-recents-meta {
829
- font-size: 11px;
830
- color: var(--nd-text-muted);
831
- flex-shrink: 0;
832
- }
833
-
834
- .nd-bs-open-meta {
835
- font-size: 11px;
836
- color: var(--nd-text-muted);
837
- }
838
-
839
- .nd-bs-empty {
840
- padding: 10px 4px 0;
841
- font-size: 12px;
842
- color: var(--nd-text-muted);
843
- }
844
- .nd-bs-card {
845
- text-align: left;
846
- border: 1px solid var(--nd-border);
847
- background: var(--nd-surface);
848
- border-radius: 12px;
849
- padding: 14px 14px 12px;
850
- cursor: pointer;
851
- transition: all var(--transition);
852
- box-shadow: var(--shadow-sm);
853
- }
854
-
855
- .nd-bs-card:hover:not(:disabled) {
856
- border-color: var(--nd-primary-light);
857
- box-shadow: var(--shadow);
858
- transform: translateY(-1px);
859
- }
860
-
861
- .nd-bs-card:disabled {
862
- opacity: 0.55;
863
- cursor: not-allowed;
864
- transform: none;
865
- }
866
-
867
- .nd-bs-card-ico {
868
- width: 34px;
869
- height: 34px;
870
- border-radius: 10px;
871
- background: var(--nd-primary-ghost);
872
- border: 1px solid var(--nd-primary-light);
873
- color: var(--nd-primary);
874
- display: flex;
875
- align-items: center;
876
- justify-content: center;
877
- margin-bottom: 10px;
878
- }
879
-
880
- .nd-bs-card-ico i { font-size: 16px; }
881
-
882
- .nd-bs-card-title {
883
- font-size: 13px;
884
- font-weight: 800;
885
- color: var(--nd-text);
886
- }
887
-
888
- .nd-bs-card-desc {
889
- font-size: 12px;
890
- color: var(--nd-text-secondary);
891
- margin-top: 2px;
892
- }
893
-
894
- .nd-backstage-meta {
895
- margin-top: 16px;
896
- border: 1px solid var(--nd-border);
897
- border-radius: 12px;
898
- overflow: hidden;
899
- background: var(--nd-surface);
900
- }
901
-
902
- .nd-backstage-meta-row {
903
- display: flex;
904
- justify-content: space-between;
905
- gap: 12px;
906
- padding: 10px 12px;
907
- font-size: 12px;
908
- color: var(--nd-text);
909
- }
910
-
911
- .nd-backstage-meta-row + .nd-backstage-meta-row {
912
- border-top: 1px solid var(--nd-border);
913
- }
914
-
915
- .nd-backstage-meta-row span:first-child {
916
- color: var(--nd-text-secondary);
917
- font-weight: 700;
918
- }
919
-
920
- .nd-backstage-meta-row span:last-child {
921
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
922
- }
923
-
924
- .nd-sidebar {
925
- background: var(--nd-surface);
926
- border-left: 1px solid var(--nd-border);
927
- display: flex;
928
- flex-direction: column;
929
- box-shadow: -2px 0 8px rgba(0, 0, 0, 0.04);
930
- }
931
-
932
- .nd-sidebar-panels {
933
- flex: 1;
934
- overflow-y: auto;
935
- overflow-x: hidden;
936
- }
937
-
938
- .nd-sidebar-panels::-webkit-scrollbar { width: 6px; }
939
- .nd-sidebar-panels::-webkit-scrollbar-thumb { background: var(--nd-border-strong); border-radius: 4px; }
940
-
941
- .nd-panel-title {
942
- padding: 10px 14px;
943
- background: var(--nd-background);
944
- font-weight: 700;
945
- font-size: 11px;
946
- color: var(--nd-text);
947
- border-bottom: 1px solid var(--nd-border);
948
- text-transform: uppercase;
949
- letter-spacing: 0.04em;
950
- position: sticky;
951
- top: 0;
952
- z-index: 10;
953
- }
954
-
955
- .nd-panel-subtitle {
956
- font-size: 10px;
957
- font-weight: 700;
958
- text-transform: uppercase;
959
- color: var(--nd-text-muted);
960
- margin: 14px 0 6px;
961
- padding: 0 12px;
962
- letter-spacing: 0.04em;
963
- }
964
-
965
- .nd-sidebar-tabs {
966
- height: 36px;
967
- display: flex;
968
- background: var(--nd-surface);
969
- border-top: 1px solid var(--nd-border);
970
- flex-shrink: 0;
971
- }
972
-
973
- .nd-side-tab {
974
- flex: 1;
975
- display: flex;
976
- align-items: center;
977
- justify-content: center;
978
- gap: 5px;
979
- font-size: 11px;
980
- font-weight: 500;
981
- cursor: pointer;
982
- border-right: 1px solid var(--nd-border);
983
- color: var(--nd-text-muted);
984
- transition: all var(--transition);
985
- background: transparent;
986
- }
987
-
988
- .nd-side-tab:last-child { border-right: none; }
989
- .nd-side-tab:hover { color: var(--nd-text); background: var(--nd-primary-ghost); }
990
-
991
- .nd-side-tab.active {
992
- color: var(--nd-primary);
993
- background: var(--nd-primary-light);
994
- font-weight: 600;
995
- }
996
-
997
- .nd-side-tab i { font-size: 13px; }
998
-
999
- .nd-coll-group { margin: 2px 6px; }
1000
-
1001
- .nd-coll-header {
1002
- display: flex;
1003
- align-items: center;
1004
- gap: 8px;
1005
- padding: 7px 10px;
1006
- cursor: pointer;
1007
- background: transparent;
1008
- border-radius: var(--radius-sm);
1009
- font-size: 12px;
1010
- font-weight: 500;
1011
- color: var(--nd-text);
1012
- transition: all var(--transition);
1013
- }
1014
-
1015
- .nd-coll-header:hover { background: var(--nd-primary-ghost); color: var(--nd-primary); }
1016
- .nd-coll-header i { font-size: 11px; color: var(--nd-text-muted); }
1017
- .nd-coll-header:hover i { color: var(--nd-primary); }
1018
-
1019
- .nd-field-list { padding: 2px 0 4px 26px; }
1020
-
1021
- .nd-field-item {
1022
- display: flex;
1023
- align-items: center;
1024
- gap: 8px;
1025
- padding: 5px 8px;
1026
- font-size: 12px;
1027
- color: var(--nd-text-secondary);
1028
- cursor: grab;
1029
- border-radius: var(--radius-sm);
1030
- transition: all var(--transition);
1031
- border: 1px solid transparent;
1032
- }
1033
-
1034
- .nd-field-item:hover {
1035
- background: var(--nd-primary-light);
1036
- color: var(--nd-primary);
1037
- border-color: var(--nd-primary-light);
1038
- }
1039
-
1040
- .nd-field-item:active { cursor: grabbing; }
1041
- .nd-field-item i { font-size: 10px; color: var(--nd-text-muted); }
1042
-
1043
- .nd-item {
1044
- padding: 9px 14px;
1045
- font-size: 12px;
1046
- cursor: pointer;
1047
- display: flex;
1048
- align-items: center;
1049
- gap: 10px;
1050
- color: var(--nd-text-secondary);
1051
- border-radius: var(--radius-sm);
1052
- margin: 1px 6px;
1053
- transition: all var(--transition);
1054
- }
1055
-
1056
- .nd-item:hover { background: var(--nd-primary-ghost); color: var(--nd-primary); }
1057
- .nd-item i { font-size: 13px; color: var(--nd-text-muted); }
1058
-
1059
- .nd-props { padding: 4px 0; }
1060
-
1061
- .nd-props-context {
1062
- display: flex;
1063
- align-items: center;
1064
- justify-content: space-between;
1065
- gap: 10px;
1066
- padding: 10px 12px;
1067
- border-bottom: 1px solid var(--nd-border);
1068
- background: var(--nd-surface);
1069
- }
1070
-
1071
- .nd-props-context-title {
1072
- font-size: 12px;
1073
- font-weight: 700;
1074
- color: var(--nd-text);
1075
- line-height: 1.1;
1076
- }
1077
-
1078
- .nd-props-context-sub {
1079
- font-size: 10px;
1080
- color: var(--nd-text-muted);
1081
- line-height: 1.1;
1082
- margin-top: 2px;
1083
- }
1084
-
1085
- .nd-props-context-actions {
1086
- display: flex;
1087
- align-items: center;
1088
- gap: 4px;
1089
- }
1090
-
1091
- .nd-props-section {
1092
- margin: 10px 10px 0;
1093
- border: 1px solid var(--nd-border);
1094
- border-radius: var(--radius);
1095
- overflow: hidden;
1096
- background: var(--nd-surface);
1097
- }
1098
-
1099
- .nd-props-section-head {
1100
- display: flex;
1101
- align-items: center;
1102
- gap: 8px;
1103
- padding: 8px 10px;
1104
- cursor: pointer;
1105
- user-select: none;
1106
- background: #f8fafc;
1107
- color: var(--nd-text);
1108
- font-size: 11px;
1109
- font-weight: 700;
1110
- text-transform: uppercase;
1111
- letter-spacing: 0.04em;
1112
- }
1113
-
1114
- .nd-props-section-head:hover {
1115
- background: var(--nd-primary-ghost);
1116
- color: var(--nd-primary);
1117
- }
1118
-
1119
- .nd-props-section-body {
1120
- padding: 10px 10px 2px;
1121
- }
1122
-
1123
- .nd-about-body {
1124
- padding: 4px 2px 2px;
1125
- }
1126
-
1127
- .nd-about-hero {
1128
- display: flex;
1129
- align-items: center;
1130
- gap: 12px;
1131
- padding: 10px 12px 8px;
1132
- border: 1px solid var(--nd-border);
1133
- border-radius: 12px;
1134
- background: #f8fafc;
1135
- }
1136
-
1137
- .nd-about-logo {
1138
- width: 48px;
1139
- height: 48px;
1140
- border-radius: 12px;
1141
- background: #ffffff;
1142
- border: 1px solid var(--nd-border);
1143
- display: flex;
1144
- align-items: center;
1145
- justify-content: center;
1146
- flex-shrink: 0;
1147
- }
1148
-
1149
- .nd-about-logo-img {
1150
- width: 100%;
1151
- height: 100%;
1152
- object-fit: contain;
1153
- }
1154
-
1155
- .nd-about-title {
1156
- font-size: 14px;
1157
- font-weight: 900;
1158
- color: var(--nd-text);
1159
- line-height: 1.2;
1160
- }
1161
-
1162
- .nd-about-sub {
1163
- font-size: 12px;
1164
- color: var(--nd-text-secondary);
1165
- margin-top: 2px;
1166
- }
1167
-
1168
- .nd-about-kv {
1169
- margin-top: 12px;
1170
- border: 1px solid var(--nd-border);
1171
- border-radius: 12px;
1172
- overflow: hidden;
1173
- }
1174
-
1175
- .nd-about-row {
1176
- display: flex;
1177
- justify-content: space-between;
1178
- gap: 12px;
1179
- padding: 10px 12px;
1180
- font-size: 12px;
1181
- color: var(--nd-text);
1182
- background: #ffffff;
1183
- }
1184
-
1185
- .nd-about-row + .nd-about-row {
1186
- border-top: 1px solid var(--nd-border);
1187
- }
1188
-
1189
- .nd-about-row span:first-child {
1190
- color: var(--nd-text-secondary);
1191
- font-weight: 600;
1192
- }
1193
-
1194
- .nd-about-row span:last-child {
1195
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1196
- color: var(--nd-text);
1197
- }
1198
-
1199
- .nd-about-footer {
1200
- display: flex;
1201
- justify-content: flex-end;
1202
- padding: 2px 0;
1203
- }
1204
-
1205
- /* ─── MANUAL FIELDS ─────────────────────────────────────────────────── */
1206
- .nd-manual-field {
1207
- position: relative;
1208
- background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
1209
- border-color: #c4b5fd;
1210
- }
1211
-
1212
- .nd-manual-field:hover {
1213
- background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
1214
- border-color: #8b5cf6;
1215
- }
1216
-
1217
- .nd-manual-badge {
1218
- font-size: 9px;
1219
- padding: 1px 5px;
1220
- background: #8b5cf6;
1221
- color: white;
1222
- border-radius: 3px;
1223
- margin-left: auto;
1224
- font-weight: 500;
1225
- }
1226
-
1227
- .nd-field-delete {
1228
- opacity: 0;
1229
- transition: opacity 0.15s;
1230
- }
1231
-
1232
- .nd-field-item:hover .nd-field-delete {
1233
- opacity: 1;
1234
- }
1235
-
1236
- .nd-empty-state {
1237
- padding: 12px;
1238
- text-align: center;
1239
- color: var(--nd-text-muted);
1240
- font-style: italic;
1241
- }
1242
-
1243
- /* ─── MANUAL FIELDS LIST IN TAB DATOS ──────────────────────────────── */
1244
- .nd-manual-fields-list {
1245
- display: flex;
1246
- flex-direction: column;
1247
- gap: 4px;
1248
- margin-top: 6px;
1249
- }
1250
-
1251
- .nd-manual-field-item {
1252
- display: flex;
1253
- align-items: center;
1254
- gap: 6px;
1255
- padding: 5px 8px;
1256
- background: #f9fafb;
1257
- border: 1px solid #e5e7eb;
1258
- border-radius: 4px;
1259
- font-size: 11px;
1260
- }
1261
-
1262
- .nd-manual-field-info {
1263
- flex: 1;
1264
- display: flex;
1265
- flex-direction: column;
1266
- gap: 1px;
1267
- }
1268
-
1269
- .nd-manual-field-name {
1270
- font-weight: 500;
1271
- color: var(--nd-text-primary);
1272
- }
1273
-
1274
- .nd-manual-field-type {
1275
- color: var(--nd-text-muted);
1276
- font-size: 9px;
1277
- }
1278
-
1279
- /* ─── DATA SOURCE RELATIONS ─────────────────────────────────────────── */
1280
- .nd-relations-list {
1281
- display: flex;
1282
- flex-direction: column;
1283
- gap: 4px;
1284
- margin-top: 6px;
1285
- }
1286
-
1287
- .nd-relation-item {
1288
- display: flex;
1289
- align-items: center;
1290
- gap: 6px;
1291
- padding: 5px 8px;
1292
- background: #fffbeb;
1293
- border: 1px solid #fde68a;
1294
- border-radius: 4px;
1295
- font-size: 11px;
1296
- }
1297
-
1298
- .nd-relation-info {
1299
- flex: 1;
1300
- display: flex;
1301
- flex-direction: column;
1302
- gap: 1px;
1303
- }
1304
-
1305
- .nd-relation-label {
1306
- font-weight: 500;
1307
- color: var(--nd-text-primary);
1308
- }
1309
-
1310
- .nd-relation-detail {
1311
- color: var(--nd-text-muted);
1312
- font-size: 9px;
1313
- font-family: monospace;
1314
- }
1315
-
1316
- /* ─── DATA SOURCE PREVIEW ──────────────────────────────────────────── */
1317
- .nd-ds-preview {
1318
- margin-top: 6px;
1319
- padding-top: 6px;
1320
- border-top: 1px dashed #e5e7eb;
1321
- }
1322
-
1323
- .nd-preview-table {
1324
- margin-top: 6px;
1325
- overflow-x: auto;
1326
- }
1327
-
1328
- .nd-preview-table-inner {
1329
- width: 100%;
1330
- font-size: 9px;
1331
- border-collapse: collapse;
1332
- }
1333
-
1334
- .nd-preview-table-inner th,
1335
- .nd-preview-table-inner td {
1336
- padding: 3px 5px;
1337
- border: 1px solid #e5e7eb;
1338
- text-align: left;
1339
- white-space: nowrap;
1340
- overflow: hidden;
1341
- text-overflow: ellipsis;
1342
- }
1343
-
1344
- .nd-preview-table-inner th {
1345
- background: #f3f4f6;
1346
- font-weight: 600;
1347
- color: var(--nd-text-primary);
1348
- }
1349
-
1350
- .nd-preview-table-inner td {
1351
- color: var(--nd-text-secondary);
1352
- }
1353
-
1354
- .nd-preview-count {
1355
- display: block;
1356
- margin-top: 3px;
1357
- font-size: 8px;
1358
- color: var(--nd-text-muted);
1359
- text-align: center;
1360
- }
1361
-
1362
- /* Tabla de preview completa en diálogo modal */
1363
- .nd-preview-table-full {
1364
- width: 100% !important;
1365
- border-collapse: collapse;
1366
- font-size: 12px;
1367
- }
1368
-
1369
- .nd-preview-table-full th,
1370
- .nd-preview-table-full td {
1371
- padding: 6px 10px;
1372
- border: 1px solid #e5e7eb;
1373
- text-align: left;
1374
- white-space: nowrap;
1375
- overflow: hidden;
1376
- text-overflow: ellipsis;
1377
- max-width: 200px;
1378
- }
1379
-
1380
- .nd-preview-table-full th {
1381
- background: #f3f4f6;
1382
- font-weight: 600;
1383
- color: var(--nd-text-primary);
1384
- position: sticky;
1385
- top: 0;
1386
- z-index: 1;
1387
- }
1388
-
1389
- .nd-preview-table-full td {
1390
- color: var(--nd-text-secondary);
1391
- }
1392
-
1393
- .nd-preview-table-full tbody tr:nth-child(even) {
1394
- background: #fafafa;
1395
- }
1396
-
1397
- .nd-preview-table-full tbody tr:hover {
1398
- background: #f0f7ff;
1399
- }
1400
-
1401
- /* ─── DRILLDOWN EDITOR ─────────────────────────────────────────────── */
1402
- .nd-param-mapping {
1403
- display: grid;
1404
- grid-template-columns: 1fr 1fr auto;
1405
- gap: 8px;
1406
- align-items: end;
1407
- padding: 8px;
1408
- background: #f9fafb;
1409
- border: 1px solid #e5e7eb;
1410
- border-radius: 6px;
1411
- margin-bottom: 8px;
1412
- }
1413
-
1414
- .nd-color-picker {
1415
- width: 32px;
1416
- height: 28px;
1417
- border: 1px solid #d1d5db;
1418
- border-radius: 4px;
1419
- cursor: pointer;
1420
- padding: 0;
1421
- }
1422
-
1423
- .nd-field {
1424
- padding: 6px 12px;
1425
- display: flex;
1426
- flex-direction: column;
1427
- gap: 4px;
1428
- box-sizing: border-box;
1429
- }
1430
-
1431
- .nd-field label {
1432
- font-size: 10px;
1433
- font-weight: 600;
1434
- color: var(--nd-text-muted);
1435
- text-transform: uppercase;
1436
- letter-spacing: 0.04em;
1437
- }
1438
-
1439
- .nd-field .p-inputtext,
1440
- .nd-field .p-inputtextarea,
1441
- .nd-field .p-dropdown {
1442
- width: 100%;
1443
- box-sizing: border-box;
1444
- display: flex;
1445
- align-items: center;
1446
- height: 30px;
1447
- padding-top: 0;
1448
- padding-bottom: 0;
1449
- }
1450
-
1451
- .nd-field textarea {
1452
- width: 100%;
1453
- box-sizing: border-box;
1454
- height: 30px;
1455
- padding-top: 4px;
1456
- padding-bottom: 4px;
1457
- }
1458
-
1459
- .nd-field .p-dropdown .p-dropdown-label {
1460
- padding: 4px 8px;
1461
- display: flex;
1462
- align-items: center;
1463
- }
1464
-
1465
- .nd-field .p-dropdown .p-dropdown-trigger {
1466
- height: 30px;
1467
- display: flex;
1468
- align-items: center;
1469
- }
1470
-
1471
- .nd-field-row { display: flex; gap: 8px; padding: 4px 12px; }
1472
-
1473
- .nd-val-badge {
1474
- display: inline-block;
1475
- padding: 2px 8px;
1476
- background: var(--nd-primary-light);
1477
- color: var(--nd-primary);
1478
- border-radius: var(--radius-sm);
1479
- font-size: 11px;
1480
- font-weight: 600;
1481
- }
1482
-
1483
- .nd-empty { padding: 30px 20px; text-align: center; color: var(--nd-text-muted); font-size: 12px; }
1484
- .nd-help-text { padding: 10px 12px; font-size: 11px; color: var(--nd-text-muted); line-height: 1.5; }
1485
-
1486
- .nd-connection-indicator {
1487
- display: flex;
1488
- align-items: center;
1489
- gap: 8px;
1490
- padding: 10px 12px;
1491
- margin: 8px;
1492
- background: #ecfdf5;
1493
- border-radius: var(--radius);
1494
- font-size: 11px;
1495
- color: var(--nd-success);
1496
- border: 1px solid #a7f3d0;
1497
- }
1498
-
1499
- .nd-connection-indicator i { font-size: 14px; }
1500
-
1501
- .nd-table-editor { padding: 0 12px; }
1502
-
1503
- .nd-col-edit-card {
1504
- background: var(--nd-background);
1505
- border: 1px solid var(--nd-border);
1506
- border-radius: var(--radius);
1507
- padding: 10px;
1508
- margin-bottom: 8px;
1509
- transition: border-color var(--transition);
1510
- }
1511
-
1512
- .nd-col-edit-card:hover { border-color: var(--nd-border-strong); }
1513
-
1514
- .nd-col-header {
1515
- display: flex;
1516
- justify-content: space-between;
1517
- align-items: center;
1518
- margin-bottom: 8px;
1519
- font-weight: 600;
1520
- font-size: 11px;
1521
- color: var(--nd-primary);
1522
- }
1523
-
1524
- .nd-actions { border-top: 1px solid var(--nd-border); padding-top: 12px; margin-top: 8px; }
1525
-
1526
- .nd-textarea { resize: none; font-size: 12px; line-height: 1.5; width: 100%; box-sizing: border-box; display: block; }
1527
-
1528
- .nd-workspace {
1529
- flex: 1;
1530
- display: grid;
1531
- grid-template-columns: 30px 1fr;
1532
- grid-template-rows: 28px 1fr;
1533
- background: var(--nd-background-canvas);
1534
- position: relative;
1535
- overflow: hidden;
1536
- }
1537
-
1538
- .nd-corner {
1539
- grid-area: 1 / 1;
1540
- background: var(--nd-surface);
1541
- border-right: 1px solid var(--nd-border);
1542
- border-bottom: 1px solid var(--nd-border);
1543
- z-index: 60;
1544
- }
1545
-
1546
- .nd-ruler-h {
1547
- grid-area: 1 / 2;
1548
- height: 28px;
1549
- background: var(--nd-surface);
1550
- border-bottom: 1px solid var(--nd-border);
1551
- position: relative;
1552
- z-index: 50;
1553
- overflow: hidden;
1554
- }
1555
-
1556
- .nd-ruler-h-inner {
1557
- width: 794px; /* A4 width — matches paper */
1558
- height: 100%;
1559
- position: relative;
1560
- margin: 0 auto;
1561
- }
1562
-
1563
- .nd-ruler-v {
1564
- grid-area: 2 / 1;
1565
- width: 34px;
1566
- background: var(--nd-surface);
1567
- border-right: 1px solid var(--nd-border);
1568
- position: relative;
1569
- z-index: 50;
1570
- overflow: visible;
1571
- }
1572
-
1573
- .nd-ruler-v-inner { width: 100%; height: 100%; position: relative; }
1574
-
1575
- .nd-tick-h {
1576
- position: absolute;
1577
- top: 0;
1578
- height: 100%;
1579
- width: 1px;
1580
- border-left: 1px solid var(--nd-border);
1581
- font-size: 9px;
1582
- color: var(--nd-text-muted);
1583
- font-weight: 500;
1584
- text-align: center;
1585
- padding-top: 14px;
1586
- padding-left: 0;
1587
- transform: translateX(-50%);
1588
- }
1589
-
1590
- .nd-tick-v {
1591
- position: absolute;
1592
- left: 0;
1593
- width: 100%;
1594
- height: 1px;
1595
- border-top: 1px solid var(--nd-border);
1596
- }
1597
-
1598
- .nd-v-lbl {
1599
- font-size: 9px;
1600
- color: var(--nd-text-muted);
1601
- font-weight: 500;
1602
- position: absolute;
1603
- left: 6px;
1604
- top: -5px;
1605
- white-space: nowrap;
1606
- transform: rotate(-90deg);
1607
- transform-origin: 0 0;
1608
- }
1609
-
1610
- .nd-scroller {
1611
- position: absolute;
1612
- inset: 0;
1613
- overflow: auto;
1614
- padding: 50px;
1615
- --nd-scale: 1;
1616
- }
1617
-
1618
- .nd-scroller::-webkit-scrollbar { width: 10px; height: 10px; }
1619
- .nd-scroller::-webkit-scrollbar-track { background: var(--nd-background); }
1620
- .nd-scroller::-webkit-scrollbar-thumb {
1621
- background: var(--nd-border-strong);
1622
- border-radius: 6px;
1623
- border: 2px solid var(--nd-background);
1624
- }
1625
- .nd-scroller::-webkit-scrollbar-thumb:hover { background: var(--nd-text-muted); }
1626
-
1627
- .nd-page-wrapper { width: fit-content; margin: 0 auto; padding-bottom: 100px; }
1628
-
1629
- .nd-page {
1630
- background: #fff;
1631
- position: relative;
1632
- box-shadow: var(--shadow-xl);
1633
- transform: scale(var(--nd-scale));
1634
- transform-origin: top center;
1635
- transition: transform 0.2s ease;
1636
- flex-shrink: 0;
1637
- }
1638
-
1639
- .nd-page-content {
1640
- position: absolute;
1641
- inset: 0;
1642
- box-sizing: border-box;
1643
- z-index: 5;
1644
- }
1645
-
1646
- .nd-page.a4.portrait { width: 794px; min-height: 1123px; }
1647
- .nd-page.a4.landscape { width: 1123px; min-height: 794px; }
1648
- .nd-page.letter.portrait { width: 816px; min-height: 1056px; }
1649
- .nd-page.letter.landscape { width: 1056px; min-height: 816px; }
1650
- .nd-page.ticket.portrait { width: 302px; min-height: 800px; }
1651
-
1652
- .nd-paper-grid {
1653
- position: absolute;
1654
- inset: 0;
1655
- background-image:
1656
- linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
1657
- linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
1658
- background-size: 37.8px 37.8px;
1659
- pointer-events: none;
1660
- z-index: 1;
1661
- }
1662
-
1663
- .nd-margin-guides { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
1664
-
1665
- .nd-guide-v,
1666
- .nd-guide-h {
1667
- position: absolute;
1668
- background: rgba(239, 68, 68, 0.25);
1669
- border: 1px dashed rgba(239, 68, 68, 0.5);
1670
- }
1671
-
1672
- .nd-guide-v { top: 0; bottom: 0; width: 1px; }
1673
- .nd-guide-h { left: 0; right: 0; height: 1px; }
1674
-
1675
- .nd-paper-bands { position: relative; z-index: 10; min-height: 100%; }
1676
-
1677
- /* Watermark en diseñador */
1678
- .nd-watermark-layer {
1679
- position: absolute;
1680
- top: 0;
1681
- left: 0;
1682
- right: 0;
1683
- bottom: 0;
1684
- display: flex;
1685
- align-items: center;
1686
- justify-content: center;
1687
- overflow: hidden;
1688
- pointer-events: none;
1689
- z-index: 0;
1690
- }
1691
-
1692
- .nd-watermark-single {
1693
- position: absolute;
1694
- }
1695
-
1696
- .nd-watermark-text {
1697
- display: block;
1698
- font-family: Arial, sans-serif;
1699
- font-weight: 900;
1700
- letter-spacing: 4px;
1701
- user-select: none;
1702
- text-transform: uppercase;
1703
- text-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
1704
- white-space: nowrap;
1705
- }
1706
-
1707
- .nd-band {
1708
- position: relative;
1709
- border-bottom: 1px dashed var(--nd-border);
1710
- transition: background var(--transition);
1711
- min-height: 20px;
1712
- z-index: 1;
1713
- }
1714
-
1715
- .nd-band:hover { background: rgba(37, 99, 235, 0.02); }
1716
- .nd-band.selected { background: rgba(37, 99, 235, 0.05); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3); }
1717
-
1718
- .nd-band-tag {
1719
- position: absolute;
1720
- left: calc(-96px - var(--nd-margin-left-px, 0px));
1721
- top: 3px;
1722
- width: 90px;
1723
- background: var(--nd-surface);
1724
- color: var(--nd-text-secondary);
1725
- font-size: 10px;
1726
- font-weight: 700;
1727
- padding: 3px 8px;
1728
- text-align: right;
1729
- border: 1px solid var(--nd-border);
1730
- border-right: none;
1731
- border-radius: var(--radius-sm) 0 0 var(--radius-sm);
1732
- cursor: pointer;
1733
- transition: all var(--transition);
1734
- white-space: nowrap;
1735
- overflow: hidden;
1736
- text-overflow: ellipsis;
1737
- display: flex;
1738
- align-items: center;
1739
- justify-content: flex-end;
1740
- gap: 4px;
1741
- z-index: 20;
1742
- }
1743
-
1744
- .nd-band-tag:hover {
1745
- color: var(--nd-primary);
1746
- background: var(--nd-primary-light);
1747
- border-color: var(--nd-primary-light);
1748
- }
1749
- .nd-band-tag.selected {
1750
- color: var(--nd-primary);
1751
- background: var(--nd-primary-light);
1752
- border-color: var(--nd-primary);
1753
- }
1754
-
1755
- .nd-band-source { color: var(--nd-text-muted); font-weight: 400; font-size: 9px; }
1756
- .nd-band-content { position: relative; margin-left: 0; }
1757
-
1758
- .nd-snap-guide {
1759
- position: absolute;
1760
- pointer-events: none;
1761
- z-index: 50;
1762
- background: rgba(59, 130, 246, 0.75);
1763
- }
1764
-
1765
- .nd-snap-guide.v { top: 0; bottom: 0; width: 1px; }
1766
- .nd-snap-guide.h { left: 0; right: 0; height: 1px; }
1767
- .nd-snap-guide.margin { background: rgba(239, 68, 68, 0.85); }
1768
-
1769
- .nd-drag-metrics {
1770
- position: absolute;
1771
- pointer-events: none;
1772
- z-index: 60;
1773
- background: rgba(15, 23, 42, 0.85);
1774
- color: #ffffff;
1775
- font-size: 10px;
1776
- padding: 3px 6px;
1777
- border-radius: 6px;
1778
- white-space: nowrap;
1779
- box-shadow: var(--shadow-md);
1780
- }
1781
-
1782
- .nd-distance-line {
1783
- position: absolute;
1784
- pointer-events: none;
1785
- z-index: 55;
1786
- background: rgba(59, 130, 246, 0.55);
1787
- }
1788
-
1789
- .nd-distance-line.h { height: 1px; }
1790
- .nd-distance-line.v { width: 1px; }
1791
-
1792
- .nd-distance-label {
1793
- position: absolute;
1794
- pointer-events: none;
1795
- z-index: 56;
1796
- transform: translate(-50%, -50%);
1797
- background: rgba(59, 130, 246, 0.85);
1798
- color: #ffffff;
1799
- font-size: 10px;
1800
- padding: 2px 6px;
1801
- border-radius: 999px;
1802
- white-space: nowrap;
1803
- }
1804
-
1805
- .nd-band-hint {
1806
- position: absolute;
1807
- inset: 0;
1808
- display: flex;
1809
- flex-direction: column;
1810
- align-items: center;
1811
- justify-content: center;
1812
- gap: 6px;
1813
- color: var(--nd-text-muted);
1814
- font-size: 12px;
1815
- pointer-events: none;
1816
- opacity: 0;
1817
- transition: opacity var(--transition);
1818
- }
1819
-
1820
- .nd-band:hover .nd-band-hint { opacity: 0.6; }
1821
- .nd-band-hint i { font-size: 20px; }
1822
-
1823
- .nd-band-resizer {
1824
- position: absolute;
1825
- bottom: -2px;
1826
- left: 0;
1827
- width: 100%;
1828
- height: 6px;
1829
- cursor: ns-resize;
1830
- z-index: 30;
1831
- transition: background var(--transition);
1832
- }
1833
-
1834
- .nd-band-resizer:hover { background: rgba(37, 99, 235, 0.15); }
1835
- .nd-band-resizer.active { background: var(--nd-primary); height: 3px; }
1836
-
1837
- /* Element Resize Handles */
1838
- .nd-resize-handle {
1839
- position: absolute;
1840
- width: 10px;
1841
- height: 10px;
1842
- background: #fff;
1843
- border: 2px solid var(--nd-primary);
1844
- border-radius: 50%;
1845
- z-index: 100;
1846
- opacity: 0;
1847
- transition: opacity var(--transition), transform var(--transition);
1848
- pointer-events: auto;
1849
- }
1850
-
1851
- .nd-el:hover .nd-resize-handle,
1852
- .nd-el.selected .nd-resize-handle {
1853
- opacity: 1;
1854
- }
1855
-
1856
- .nd-resize-handle:hover {
1857
- transform: scale(1.3);
1858
- background: var(--nd-primary);
1859
- box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
1860
- }
1861
-
1862
- .nd-resize-handle.top-left {
1863
- top: -5px;
1864
- left: -5px;
1865
- cursor: nwse-resize;
1866
- }
1867
-
1868
- .nd-resize-handle.top-right {
1869
- top: -5px;
1870
- right: -5px;
1871
- cursor: nesw-resize;
1872
- }
1873
-
1874
- .nd-resize-handle.bottom-left {
1875
- bottom: -5px;
1876
- left: -5px;
1877
- cursor: nesw-resize;
1878
- }
1879
-
1880
- .nd-resize-handle.bottom-right {
1881
- bottom: -5px;
1882
- right: -5px;
1883
- cursor: nwse-resize;
1884
- }
1885
-
1886
- .nd-el {
1887
- position: absolute;
1888
- box-sizing: border-box;
1889
- border: 1.5px solid transparent;
1890
- cursor: move;
1891
- transition: border-color var(--transition), box-shadow var(--transition);
1892
- z-index: 5;
1893
- display: flex;
1894
- align-items: center;
1895
- justify-content: center;
1896
- padding: 2px;
1897
- }
1898
-
1899
- .nd-el:hover {
1900
- border-color: var(--nd-primary-light);
1901
- background: rgba(37, 99, 235, 0.03);
1902
- }
1903
-
1904
- .nd-el.selected {
1905
- border-color: var(--nd-primary) !important;
1906
- background: rgba(37, 99, 235, 0.04);
1907
- box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
1908
- z-index: 15;
1909
- }
1910
-
1911
- .nd-el.multi-selected {
1912
- border-color: #8b5cf6 !important;
1913
- background: rgba(139, 92, 246, 0.06);
1914
- box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
1915
- z-index: 14;
1916
- }
1917
-
1918
- .nd-el.dragging { opacity: 0.85; z-index: 100; box-shadow: var(--shadow-lg); }
1919
-
1920
- /* Selection Box */
1921
- .nd-selection-box {
1922
- position: absolute;
1923
- border: 2px dashed #3b82f6;
1924
- background: rgba(59, 130, 246, 0.08);
1925
- pointer-events: none;
1926
- z-index: 9999;
1927
- border-radius: 2px;
1928
- }
1929
-
1930
- /* Shape Rendering */
1931
- .nd-shape-render {
1932
- display: flex;
1933
- align-items: center;
1934
- justify-content: center;
1935
- width: 100%;
1936
- height: 100%;
1937
- }
1938
-
1939
- .nd-shape-render svg {
1940
- width: 100%;
1941
- height: 100%;
1942
- overflow: visible;
1943
- }
1944
-
1945
- .nd-shape-label {
1946
- display: flex;
1947
- align-items: center;
1948
- gap: 4px;
1949
- font-size: 10px;
1950
- color: var(--nd-text-muted);
1951
- }
1952
-
1953
- /* QR Code placeholder */
1954
- .nd-qr-placeholder {
1955
- display: flex;
1956
- flex-direction: column;
1957
- align-items: center;
1958
- justify-content: center;
1959
- gap: 4px;
1960
- font-size: 10px;
1961
- color: var(--nd-text-muted);
1962
- }
1963
-
1964
- /* System Variables in Dictionary */
1965
- .nd-sysvar-category {
1966
- margin-top: 4px;
1967
- }
1968
-
1969
- .nd-sysvar-category-title {
1970
- font-size: 9px;
1971
- font-weight: 700;
1972
- color: var(--nd-text-muted);
1973
- text-transform: uppercase;
1974
- letter-spacing: 0.5px;
1975
- padding: 4px 8px 2px;
1976
- background: var(--nd-background);
1977
- border-radius: 3px;
1978
- }
1979
-
1980
- .nd-sysvar-item {
1981
- flex-direction: column;
1982
- align-items: flex-start;
1983
- gap: 1px;
1984
- padding: 4px 8px;
1985
- }
1986
-
1987
- .nd-sysvar-example {
1988
- font-size: 8px;
1989
- color: #9ca3af;
1990
- font-style: italic;
1991
- margin-left: 16px;
1992
- }
1993
-
1994
- /* Data Source List in Ribbon */
1995
- .nd-datasource-list {
1996
- margin-top: 8px;
1997
- }
1998
-
1999
- .nd-ds-grid {
2000
- display: flex;
2001
- flex-direction: row;
2002
- flex-wrap: wrap;
2003
- gap: 8px;
2004
- }
2005
-
2006
- .nd-datasource-item {
2007
- background: var(--nd-background);
2008
- border: 1px solid var(--nd-border);
2009
- border-radius: 6px;
2010
- padding: 6px 8px;
2011
- font-size: 10px;
2012
- min-width: 200px;
2013
- max-width: 240px;
2014
- flex: 0 1 auto;
2015
- }
2016
-
2017
- .nd-ds-primary {
2018
- border-color: #3b82f6;
2019
- background: #f0f7ff;
2020
- }
2021
-
2022
- .nd-ds-header {
2023
- display: flex;
2024
- align-items: center;
2025
- justify-content: space-between;
2026
- margin-bottom: 4px;
2027
- }
2028
-
2029
- .nd-ds-badge {
2030
- font-weight: 700;
2031
- color: #f59e0b;
2032
- font-size: 11px;
2033
- }
2034
-
2035
- .nd-ds-manual-badge {
2036
- font-size: 9px;
2037
- color: #8b5cf6;
2038
- background: #f3f0ff;
2039
- padding: 1px 6px;
2040
- border-radius: 4px;
2041
- font-weight: 500;
2042
- }
2043
-
2044
- .nd-ds-primary .nd-ds-badge {
2045
- color: #3b82f6;
2046
- }
2047
-
2048
- .nd-ds-fields {
2049
- display: flex;
2050
- gap: 4px;
2051
- align-items: center;
2052
- }
2053
-
2054
- .nd-ds-select {
2055
- flex: 1;
2056
- }
2057
-
2058
- .nd-ds-alias {
2059
- width: 70px !important;
2060
- padding: 2px 4px !important;
2061
- font-size: 9px !important;
2062
- border-radius: 3px !important;
2063
- }
2064
-
2065
- .p-dropdown-xs,
2066
- .p-dropdown-xs .p-dropdown-label {
2067
- font-size: 9px !important;
2068
- padding: 2px 4px !important;
2069
- min-height: 22px !important;
2070
- }
2071
-
2072
- .p-inputtext-xs {
2073
- font-size: 9px !important;
2074
- padding: 2px 4px !important;
2075
- min-height: 22px !important;
2076
- }
2077
-
2078
- .nd-placeholder-img {
2079
- display: flex;
2080
- align-items: center;
2081
- justify-content: center;
2082
- width: 100%;
2083
- height: 100%;
2084
- color: var(--nd-text-muted);
2085
- background: var(--nd-background);
2086
- }
2087
-
2088
- .nd-img-preview {
2089
- width: 100%;
2090
- height: 100%;
2091
- object-fit: contain;
2092
- display: block;
2093
- }
2094
-
2095
- .nd-placeholder-bar {
2096
- display: flex;
2097
- flex-direction: column;
2098
- align-items: center;
2099
- justify-content: center;
2100
- width: 100%;
2101
- height: 100%;
2102
- color: var(--nd-text-muted);
2103
- font-family: 'Courier New', monospace;
2104
- }
2105
-
2106
- .nd-bar-mock { font-size: 16px; letter-spacing: -1px; line-height: 1; }
2107
-
2108
- .nd-table-render {
2109
- display: flex;
2110
- flex-direction: column;
2111
- width: 100%;
2112
- height: 100%;
2113
- border: 1px solid var(--nd-border-strong);
2114
- background: inherit;
2115
- overflow: hidden;
2116
- border-radius: 2px;
2117
- font-size: inherit;
2118
- font-family: inherit;
2119
- color: inherit;
2120
- }
2121
-
2122
- .nd-table-header {
2123
- display: flex;
2124
- background: #f1f5f9;
2125
- border-bottom: 1px solid var(--nd-border-strong);
2126
- flex-shrink: 0;
2127
- }
2128
-
2129
- .nd-table-row { display: flex; flex: 1; background: inherit; }
2130
-
2131
- .nd-table-cell {
2132
- padding: 4px 8px;
2133
- border-right: 1px solid var(--nd-border);
2134
- font-size: inherit;
2135
- font-family: inherit;
2136
- color: inherit;
2137
- white-space: nowrap;
2138
- overflow: hidden;
2139
- text-overflow: ellipsis;
2140
- min-height: 22px;
2141
- display: flex;
2142
- align-items: center;
2143
- }
2144
-
2145
- .nd-table-cell:last-child { border-right: none; }
2146
-
2147
- .nd-table-cell.head { font-weight: 600; color: inherit; background: #f8fafc; }
2148
-
2149
- .nd-table-cell.body {
2150
- color: inherit;
2151
- opacity: 0.8;
2152
- font-family: inherit;
2153
- font-style: italic;
2154
- }
2155
-
2156
- .nd-footer {
2157
- height: 30px;
2158
- background: var(--nd-surface);
2159
- color: var(--nd-text-secondary);
2160
- display: flex;
2161
- align-items: center;
2162
- padding: 0 12px;
2163
- font-size: 11px;
2164
- border-top: 1px solid var(--nd-border);
2165
- gap: 0;
2166
- z-index: 50;
2167
- }
2168
-
2169
- .nd-f-seg {
2170
- height: 100%;
2171
- display: flex;
2172
- align-items: center;
2173
- padding: 0 12px;
2174
- border-right: 1px solid var(--nd-border);
2175
- white-space: nowrap;
2176
- gap: 6px;
2177
- color: var(--nd-text-secondary);
2178
- }
2179
-
2180
- .nd-f-seg:last-child { border-right: none; }
2181
- .nd-f-seg.main { flex: 1; }
2182
- .nd-f-seg i { font-size: 12px; color: var(--nd-text-muted); }
2183
-
2184
- .nd-f-lbl {
2185
- color: var(--nd-text-muted);
2186
- font-size: 9px;
2187
- text-transform: uppercase;
2188
- font-weight: 600;
2189
- letter-spacing: 0.04em;
2190
- }
2191
-
2192
- .nd-f-val { font-weight: 700; color: var(--nd-primary); }
2193
-
2194
- .nd-zoom {
2195
- display: flex;
2196
- align-items: center;
2197
- gap: 8px;
2198
- margin-left: auto;
2199
- padding: 0 12px;
2200
- border-left: 1px solid var(--nd-border);
2201
- }
2202
-
2203
- .nd-zoom span {
2204
- font-size: 11px;
2205
- font-weight: 600;
2206
- color: var(--nd-text-secondary);
2207
- min-width: 42px;
2208
- text-align: center;
2209
- }
2210
-
2211
- .nd-zoom input[type="range"] { width: 100px; cursor: pointer; accent-color: var(--nd-primary); }
2212
-
2213
- /* Utilities */
2214
- .w-full { width: 100% !important; }
2215
- .mt-2 { margin-top: 8px !important; }
2216
- .mb-2 { margin-bottom: 8px !important; }
2217
- .block { display: block !important; }
2218
- .flex { display: flex !important; }
2219
- .items-center { align-items: center !important; }
2220
- .gap-2 { gap: 8px !important; }
2221
- .text-center { text-align: center !important; }
2222
- .text-\[9px\] { font-size: 9px !important; }
2223
- .text-\[10px\] { font-size: 10px !important; }
2224
- .text-gray-400 { color: #9ca3af !important; }
2225
- .opacity-50 { opacity: 0.5 !important; }
2226
- .cursor-not-allowed { cursor: not-allowed !important; }
2227
-
2228
- /* ============================================================
2229
- WIDGET LIBRARY & DASHBOARD DESIGNER
2230
- ============================================================ */
2231
-
2232
- .nd-widget-groups {
2233
- padding: 12px;
2234
- display: flex;
2235
- flex-direction: column;
2236
- gap: 20px;
2237
- }
2238
-
2239
- .nd-cat-title {
2240
- font-size: 10px;
2241
- font-weight: 800;
2242
- color: var(--nd-text-muted);
2243
- text-transform: uppercase;
2244
- letter-spacing: 0.06em;
2245
- margin-bottom: 10px;
2246
- padding-left: 2px;
2247
- }
2248
-
2249
- .nd-widget-grid {
2250
- display: grid;
2251
- grid-template-columns: repeat(2, 1fr);
2252
- gap: 8px;
2253
- }
2254
-
2255
- .nd-widget-item {
2256
- background: #fff;
2257
- border: 1px solid var(--nd-border);
2258
- border-radius: 10px;
2259
- padding: 12px 8px;
2260
- display: flex;
2261
- flex-direction: column;
2262
- align-items: center;
2263
- justify-content: center;
2264
- gap: 8px;
2265
- cursor: grab;
2266
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2267
- text-align: center;
2268
- box-shadow: 0 1px 2px rgba(0,0,0,0.03);
2269
- }
2270
-
2271
- .nd-widget-item:hover {
2272
- border-color: var(--nd-primary);
2273
- background: var(--nd-primary-ghost);
2274
- transform: translateY(-2px);
2275
- box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
2276
- }
2277
-
2278
- .nd-widget-item:active {
2279
- cursor: grabbing;
2280
- }
2281
-
2282
- .nd-widget-item i {
2283
- font-size: 20px;
2284
- filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
2285
- }
2286
-
2287
- .nd-widget-item span {
2288
- font-size: 10px;
2289
- font-weight: 600;
2290
- color: var(--nd-text-secondary);
2291
- line-height: 1.2;
2292
- }
2293
-
2294
- /* ── Toolbox Grid ── */
2295
- .nd-toolbox-panel .nd-widget-category {
2296
- padding: 0 10px 10px 10px;
2297
- }
2298
- .nd-toolbox-grid {
2299
- display: grid;
2300
- grid-template-columns: 1fr 1fr;
2301
- gap: 6px;
2302
- margin-top: 6px;
2303
- }
2304
- .nd-toolbox-item {
2305
- display: flex;
2306
- flex-direction: column;
2307
- align-items: center;
2308
- justify-content: center;
2309
- gap: 4px;
2310
- padding: 10px 6px;
2311
- border: 1px solid var(--nd-border, #e2e8f0);
2312
- border-radius: 6px;
2313
- background: var(--nd-surface, #fff);
2314
- cursor: grab;
2315
- transition: all 0.15s;
2316
- user-select: none;
2317
- }
2318
- .nd-toolbox-item:hover {
2319
- border-color: var(--nd-primary-light, #dbeafe);
2320
- background: var(--nd-primary-ghost, rgba(37, 99, 235, 0.08));
2321
- box-shadow: 0 1px 3px rgba(0,0,0,0.06);
2322
- }
2323
- .nd-toolbox-item:active {
2324
- cursor: grabbing;
2325
- transform: scale(0.96);
2326
- }
2327
- .nd-toolbox-item i {
2328
- font-size: 1.2rem;
2329
- }
2330
- .nd-toolbox-item span {
2331
- font-size: 10px;
2332
- color: var(--nd-text-secondary, #64748b);
2333
- text-align: center;
2334
- line-height: 1.2;
2335
- }
2336
-
2337
- @media (max-width: 1200px) {
2338
- .nd-toolbox-grid {
2339
- grid-template-columns: repeat(3, 1fr) !important;
2340
- }
2341
- }
2342
-
2343
- /* ============================================================
2344
- CREATE REPORT WIZARD
2345
- ============================================================ */
2346
- .nd-wizard-header {
2347
- display: flex;
2348
- flex-direction: column;
2349
- gap: 12px;
2350
- padding: 8px 0;
2351
- }
2352
- .nd-wizard-title {
2353
- font-size: 16px;
2354
- font-weight: 600;
2355
- margin: 0;
2356
- color: #1e293b;
2357
- }
2358
- .nd-wizard-steps {
2359
- display: flex;
2360
- gap: 8px;
2361
- }
2362
- .nd-wizard-step {
2363
- display: flex;
2364
- align-items: center;
2365
- gap: 6px;
2366
- padding: 4px 10px;
2367
- border-radius: 6px;
2368
- font-size: 12px;
2369
- color: #94a3b8;
2370
- background: #f1f5f9;
2371
- }
2372
- .nd-wizard-step.active {
2373
- color: #3b82f6;
2374
- background: #dbeafe;
2375
- font-weight: 600;
2376
- }
2377
- .nd-wizard-step.done {
2378
- color: #10b981;
2379
- background: #d1fae5;
2380
- }
2381
- .nd-wiz-step-num {
2382
- width: 20px;
2383
- height: 20px;
2384
- border-radius: 50%;
2385
- display: flex;
2386
- align-items: center;
2387
- justify-content: center;
2388
- font-size: 11px;
2389
- font-weight: 700;
2390
- background: currentColor;
2391
- color: white;
2392
- }
2393
- .nd-wiz-step-label {
2394
- white-space: nowrap;
2395
- }
2396
- .nd-wiz-body {
2397
- min-height: 260px;
2398
- padding: 8px 0;
2399
- }
2400
- .nd-wiz-desc {
2401
- color: #64748b;
2402
- font-size: 13px;
2403
- margin: 0 0 16px 0;
2404
- }
2405
- .nd-wiz-cards {
2406
- display: flex;
2407
- gap: 12px;
2408
- }
2409
- .nd-wiz-card {
2410
- flex: 1;
2411
- border: 2px solid #e2e8f0;
2412
- border-radius: 10px;
2413
- padding: 20px 16px;
2414
- cursor: pointer;
2415
- transition: all 0.15s;
2416
- display: flex;
2417
- flex-direction: column;
2418
- align-items: center;
2419
- text-align: center;
2420
- gap: 8px;
2421
- }
2422
- .nd-wiz-card:hover {
2423
- border-color: #93c5fd;
2424
- background: #f0f9ff;
2425
- }
2426
- .nd-wiz-card.selected {
2427
- border-color: #3b82f6;
2428
- background: #eff6ff;
2429
- box-shadow: 0 0 0 1px #3b82f6;
2430
- }
2431
- .nd-wiz-card-icon {
2432
- font-size: 2.2rem;
2433
- }
2434
- .nd-wiz-card-title {
2435
- font-weight: 600;
2436
- font-size: 14px;
2437
- color: #1e293b;
2438
- }
2439
- .nd-wiz-card-desc {
2440
- font-size: 11px;
2441
- color: #64748b;
2442
- line-height: 1.4;
2443
- }
2444
- .nd-wiz-grid {
2445
- display: grid;
2446
- grid-template-columns: 1fr 1fr;
2447
- gap: 10px;
2448
- }
2449
- .nd-wiz-tpl {
2450
- border: 2px solid #e2e8f0;
2451
- border-radius: 10px;
2452
- padding: 16px 14px;
2453
- cursor: pointer;
2454
- transition: all 0.15s;
2455
- display: flex;
2456
- flex-direction: column;
2457
- gap: 6px;
2458
- }
2459
- .nd-wiz-tpl:hover {
2460
- border-color: #93c5fd;
2461
- background: #f0f9ff;
2462
- }
2463
- .nd-wiz-tpl.selected {
2464
- border-color: #3b82f6;
2465
- background: #eff6ff;
2466
- box-shadow: 0 0 0 1px #3b82f6;
2467
- }
2468
- .nd-wiz-tpl.disabled {
2469
- opacity: 0.4;
2470
- cursor: not-allowed;
2471
- pointer-events: none;
2472
- }
2473
- .nd-wiz-tpl-icon {
2474
- font-size: 1.4rem;
2475
- color: #3b82f6;
2476
- }
2477
- .nd-wiz-tpl-label {
2478
- font-weight: 600;
2479
- font-size: 13px;
2480
- color: #1e293b;
2481
- }
2482
- .nd-wiz-tpl-desc {
2483
- font-size: 11px;
2484
- color: #64748b;
2485
- line-height: 1.35;
2486
- }
2487
- .nd-wiz-radios {
2488
- display: flex;
2489
- flex-direction: column;
2490
- gap: 10px;
2491
- margin-bottom: 16px;
2492
- }
2493
- .nd-wiz-radio {
2494
- display: flex;
2495
- align-items: center;
2496
- gap: 10px;
2497
- padding: 10px 14px;
2498
- border: 1px solid #e2e8f0;
2499
- border-radius: 8px;
2500
- cursor: pointer;
2501
- transition: border-color 0.15s;
2502
- font-size: 13px;
2503
- }
2504
- .nd-wiz-radio:hover {
2505
- border-color: #93c5fd;
2506
- }
2507
- .nd-wiz-radio input[type="radio"] {
2508
- accent-color: #3b82f6;
2509
- }
2510
- .nd-wiz-field {
2511
- display: flex;
2512
- flex-direction: column;
2513
- gap: 6px;
2514
- }
2515
- .nd-wiz-field label {
2516
- font-size: 12px;
2517
- font-weight: 500;
2518
- color: #475569;
2519
- }
2520
- .nd-wiz-summary {
2521
- display: flex;
2522
- flex-direction: column;
2523
- gap: 10px;
2524
- }
2525
- .nd-wiz-summary-row {
2526
- display: flex;
2527
- align-items: center;
2528
- gap: 12px;
2529
- padding: 10px 12px;
2530
- background: #f8fafc;
2531
- border-radius: 8px;
2532
- font-size: 13px;
2533
- }
2534
- .nd-wiz-summary-label {
2535
- font-weight: 500;
2536
- color: #475569;
2537
- min-width: 80px;
2538
- }
2539
- .nd-wiz-footer {
2540
- display: flex;
2541
- justify-content: space-between;
2542
- align-items: center;
2543
- width: 100%;
2544
- }
2545
- .nd-wiz-footer-right {
2546
- display: flex;
2547
- gap: 8px;
2548
- margin-left: auto;
2549
- }
1
+ /* ============================================================
2
+ DESIGNER COMPONENT STYLES
3
+ ============================================================ */
4
+
5
+ .nd-root {
6
+ display: flex;
7
+ flex-direction: column;
8
+ height: 100vh;
9
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
10
+ background: var(--nd-background);
11
+ color: var(--nd-text);
12
+ overflow: hidden;
13
+ user-select: none;
14
+ -webkit-font-smoothing: antialiased;
15
+ }
16
+
17
+ .nd-header {
18
+ background: var(--nd-surface);
19
+ border-bottom: 1px solid var(--nd-border);
20
+ box-shadow: var(--shadow-sm);
21
+ z-index: 50;
22
+ }
23
+
24
+ .nd-tab-bar {
25
+ display: flex;
26
+ padding: 6px 12px 0;
27
+ gap: 2px;
28
+ background: var(--nd-background);
29
+ border-bottom: 1px solid var(--nd-border);
30
+ align-items: flex-end;
31
+ }
32
+
33
+ .nd-brand {
34
+ display: flex;
35
+ align-items: center;
36
+ gap: 8px;
37
+ padding-bottom: 2px;
38
+ margin-right: 8px;
39
+ cursor: pointer;
40
+ user-select: none;
41
+ }
42
+
43
+ .nd-brand-logo-ribbon {
44
+ height: 32px;
45
+ width: auto;
46
+ flex-shrink: 0;
47
+ filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
48
+ }
49
+
50
+ .nd-qat {
51
+ display: flex;
52
+ align-items: center;
53
+ gap: 2px;
54
+ padding-bottom: 2px;
55
+ margin-right: 6px;
56
+ }
57
+
58
+ .nd-qat-btn {
59
+ width: 26px;
60
+ height: 24px;
61
+ border-radius: var(--radius-sm);
62
+ border: 1px solid transparent;
63
+ background: transparent;
64
+ color: var(--nd-text-secondary);
65
+ cursor: pointer;
66
+ display: inline-flex;
67
+ align-items: center;
68
+ justify-content: center;
69
+ transition: all var(--transition);
70
+ }
71
+
72
+ .nd-qat-btn:hover:not(:disabled) {
73
+ background: rgba(255, 255, 255, 0.6);
74
+ border-color: var(--nd-border);
75
+ color: var(--nd-text);
76
+ }
77
+
78
+ .nd-qat-btn:disabled {
79
+ opacity: 0.45;
80
+ cursor: not-allowed;
81
+ }
82
+
83
+ .nd-qat-sep {
84
+ width: 1px;
85
+ height: 18px;
86
+ background: var(--nd-border);
87
+ margin: 0 4px;
88
+ }
89
+
90
+ .nd-doc-type-toggle {
91
+ display: flex;
92
+ align-items: center;
93
+ background: rgba(0, 0, 0, 0.05);
94
+ padding: 3px;
95
+ border-radius: 10px;
96
+ margin: 0 16px;
97
+ border: 1px solid rgba(0,0,0,0.05);
98
+ margin-bottom: 2px;
99
+ }
100
+
101
+ .nd-type-btn {
102
+ padding: 4px 14px;
103
+ font-size: 11px;
104
+ font-weight: 700;
105
+ color: #64748b;
106
+ background: transparent;
107
+ border: none;
108
+ border-radius: 7px;
109
+ cursor: pointer;
110
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
111
+ display: flex;
112
+ align-items: center;
113
+ gap: 6px;
114
+ height: 24px;
115
+ }
116
+
117
+ .nd-type-btn i {
118
+ font-size: 13px;
119
+ opacity: 0.7;
120
+ }
121
+
122
+ .nd-type-btn:hover:not(.active) {
123
+ background: rgba(255, 255, 255, 0.4);
124
+ color: var(--nd-text);
125
+ }
126
+
127
+ .nd-type-btn.active {
128
+ background: white;
129
+ color: var(--nd-primary);
130
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
131
+ }
132
+
133
+ .nd-type-btn.active i {
134
+ opacity: 1;
135
+ }
136
+
137
+ .nd-tab-report-name {
138
+ margin-left: auto;
139
+ padding-bottom: 2px;
140
+ }
141
+
142
+ .nd-top-right {
143
+ display: flex;
144
+ align-items: center;
145
+ gap: 8px;
146
+ }
147
+
148
+ .nd-ribbon-toggle {
149
+ width: 28px;
150
+ height: 26px;
151
+ border-radius: var(--radius-sm);
152
+ border: 1px solid var(--nd-border);
153
+ background: var(--nd-surface);
154
+ color: var(--nd-text-secondary);
155
+ cursor: pointer;
156
+ display: inline-flex;
157
+ align-items: center;
158
+ justify-content: center;
159
+ transition: all var(--transition);
160
+ }
161
+
162
+ .nd-ribbon-toggle:hover {
163
+ background: rgba(255, 255, 255, 0.6);
164
+ color: var(--nd-text);
165
+ }
166
+
167
+ .nd-conn {
168
+ display: inline-flex;
169
+ align-items: center;
170
+ gap: 6px;
171
+ padding: 0 8px;
172
+ height: 26px;
173
+ border-radius: 999px;
174
+ border: 1px solid var(--nd-border);
175
+ background: var(--nd-surface);
176
+ color: var(--nd-text-secondary);
177
+ font-size: 11px;
178
+ font-weight: 500;
179
+ }
180
+
181
+ .nd-conn-dot {
182
+ width: 8px;
183
+ height: 8px;
184
+ border-radius: 999px;
185
+ background: #ef4444;
186
+ box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
187
+ }
188
+
189
+ .nd-conn.active .nd-conn-dot {
190
+ background: #22c55e;
191
+ box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
192
+ }
193
+
194
+ .nd-conn-text { line-height: 1; }
195
+
196
+ .nd-report-name-input {
197
+ height: 26px;
198
+ padding: 3px 10px;
199
+ font-size: 12px;
200
+ font-weight: 500;
201
+ color: var(--nd-text);
202
+ background: var(--nd-surface);
203
+ border: 1px solid var(--nd-border);
204
+ border-radius: var(--radius-sm);
205
+ outline: none;
206
+ transition: border-color var(--transition), box-shadow var(--transition);
207
+ width: 220px;
208
+ }
209
+
210
+ .nd-report-name-input:focus {
211
+ border-color: var(--nd-primary);
212
+ box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
213
+ }
214
+
215
+ .nd-report-name-input::placeholder {
216
+ color: var(--nd-text-muted);
217
+ font-weight: 400;
218
+ }
219
+
220
+ .nd-tab {
221
+ padding: 7px 18px;
222
+ font-size: 12px;
223
+ font-weight: 500;
224
+ cursor: pointer;
225
+ color: var(--nd-text-secondary);
226
+ border-radius: var(--radius-sm) var(--radius-sm) 0 0;
227
+ border: 1px solid transparent;
228
+ border-bottom: none;
229
+ transition: all var(--transition);
230
+ }
231
+
232
+ .nd-tab:hover {
233
+ color: var(--nd-text);
234
+ background: rgba(255, 255, 255, 0.6);
235
+ }
236
+
237
+ .nd-tab.active {
238
+ color: var(--nd-primary);
239
+ background: var(--nd-surface);
240
+ border-color: var(--nd-border);
241
+ border-bottom-color: var(--nd-surface);
242
+ margin-bottom: -1px;
243
+ font-weight: 600;
244
+ }
245
+
246
+ .nd-tab-archivo {
247
+ background: var(--nd-primary) !important;
248
+ color: #fff !important;
249
+ font-weight: 600 !important;
250
+ border-color: transparent !important;
251
+ }
252
+
253
+ .nd-tab-archivo:hover {
254
+ background: var(--nd-primary-dark) !important;
255
+ }
256
+
257
+ .nd-tab-archivo.active {
258
+ background: var(--nd-primary-dark) !important;
259
+ color: #fff !important;
260
+ border-color: var(--nd-primary) !important;
261
+ }
262
+
263
+ .nd-toolbar {
264
+ display: flex;
265
+ min-height: 96px;
266
+ background: var(--nd-surface);
267
+ padding: 8px 16px;
268
+ gap: 4px;
269
+ align-items: stretch;
270
+ overflow-x: auto;
271
+ }
272
+
273
+ .nd-toolbar::-webkit-scrollbar { height: 4px; }
274
+ .nd-toolbar::-webkit-scrollbar-thumb { background: var(--nd-border-strong); border-radius: 4px; }
275
+
276
+ .nd-group {
277
+ display: flex;
278
+ flex-direction: column;
279
+ background: transparent;
280
+ padding: 4px 8px 20px;
281
+ position: relative;
282
+ gap: 2px;
283
+ flex-shrink: 0;
284
+ }
285
+
286
+ .nd-group + .nd-group {
287
+ border-left: 1px solid var(--nd-border);
288
+ padding-left: 12px;
289
+ margin-left: 4px;
290
+ }
291
+
292
+ .nd-group-body {
293
+ display: flex;
294
+ align-items: flex-start;
295
+ justify-content: center;
296
+ gap: 4px;
297
+ }
298
+
299
+ .nd-group-title {
300
+ position: absolute;
301
+ bottom: 2px;
302
+ left: 0;
303
+ right: 0;
304
+ font-size: 10px;
305
+ font-weight: 500;
306
+ color: var(--nd-text-muted);
307
+ text-align: center;
308
+ text-transform: uppercase;
309
+ letter-spacing: 0.04em;
310
+ }
311
+
312
+ .nd-btn-lg {
313
+ display: flex;
314
+ flex-direction: column;
315
+ align-items: center;
316
+ justify-content: center;
317
+ gap: 3px;
318
+ padding: 6px 10px;
319
+ border-radius: var(--radius);
320
+ cursor: pointer;
321
+ min-width: 60px;
322
+ height: 68px;
323
+ border: 1px solid transparent;
324
+ background: transparent;
325
+ transition: all var(--transition);
326
+ }
327
+
328
+ .nd-btn-lg:hover {
329
+ background: var(--nd-primary-ghost);
330
+ border-color: var(--nd-primary-light);
331
+ }
332
+
333
+ .nd-btn-lg:active { background: var(--nd-primary-light); }
334
+ .nd-btn-lg i { font-size: 24px !important; color: var(--nd-primary); }
335
+
336
+ .nd-btn-lg span {
337
+ font-size: 10.5px;
338
+ font-weight: 500;
339
+ color: var(--nd-text-secondary);
340
+ line-height: 1.2;
341
+ text-align: center;
342
+ }
343
+
344
+ .nd-btn-lg:hover i { color: var(--nd-primary-dark); }
345
+
346
+ .nd-btn-sm-col {
347
+ display: flex;
348
+ flex-direction: column;
349
+ justify-content: center;
350
+ gap: 2px;
351
+ }
352
+
353
+ .nd-margins-group .nd-group-body {
354
+ align-items: flex-end !important;
355
+ justify-content: flex-end !important;
356
+ }
357
+
358
+ .nd-margins-group .nd-btn-sm-col {
359
+ margin-top: auto !important;
360
+ }
361
+
362
+ /* Forzar ancho de los InputNumber dentro de márgenes */
363
+ .nd-margins-group .p-inputnumber {
364
+ width: 55px !important;
365
+ min-width: 55px !important;
366
+ max-width: 55px !important;
367
+ flex-shrink: 0 !important;
368
+ }
369
+
370
+ .nd-margins-group .p-inputnumber .p-inputnumber-input {
371
+ width: 55px !important;
372
+ min-width: 55px !important;
373
+ padding-left: 6px !important;
374
+ padding-right: 6px !important;
375
+ }
376
+
377
+ .nd-btn-sm {
378
+ display: flex;
379
+ align-items: center;
380
+ gap: 6px;
381
+ padding: 3px 10px;
382
+ border-radius: var(--radius-sm);
383
+ cursor: pointer;
384
+ height: 24px;
385
+ min-width: 100px;
386
+ border: 1px solid transparent;
387
+ background: transparent;
388
+ transition: all var(--transition);
389
+ }
390
+
391
+ .nd-btn-sm:hover {
392
+ background: var(--nd-primary-ghost);
393
+ border-color: var(--nd-primary-light);
394
+ }
395
+
396
+ .nd-btn-sm i { font-size: 13px !important; color: var(--nd-primary); }
397
+ .nd-btn-sm span { font-size: 11px; color: var(--nd-text-secondary); }
398
+
399
+ .nd-tbar-btn {
400
+ display: flex;
401
+ align-items: center;
402
+ justify-content: center;
403
+ width: 28px;
404
+ height: 26px;
405
+ border-radius: var(--radius-sm);
406
+ cursor: pointer;
407
+ transition: all var(--transition);
408
+ color: var(--nd-text-secondary);
409
+ border: 1px solid transparent;
410
+ background: transparent;
411
+ }
412
+
413
+ .nd-tbar-btn:hover {
414
+ background: var(--nd-primary-ghost);
415
+ color: var(--nd-primary);
416
+ }
417
+
418
+ .nd-tbar-btn.active { background: var(--nd-primary); color: #fff; }
419
+ .nd-tbar-btn i { font-size: 13px !important; }
420
+
421
+ /* Botones de formato de texto (B, I) */
422
+ .nd-format-btn {
423
+ font-family: Georgia, 'Times New Roman', serif;
424
+ }
425
+
426
+ .nd-format-text-bold {
427
+ font-weight: 900;
428
+ font-size: 15px;
429
+ line-height: 1;
430
+ color: var(--nd-text-secondary);
431
+ }
432
+
433
+ .nd-format-text-italic {
434
+ font-style: italic;
435
+ font-weight: 700;
436
+ font-size: 15px;
437
+ line-height: 1;
438
+ color: var(--nd-text-secondary);
439
+ }
440
+
441
+ .nd-tbar-btn.active .nd-format-text-bold,
442
+ .nd-tbar-btn.active .nd-format-text-italic {
443
+ color: #fff;
444
+ }
445
+
446
+ /* Botón de color de texto */
447
+ .nd-color-btn {
448
+ position: relative;
449
+ }
450
+
451
+ .nd-color-btn:hover {
452
+ background: var(--nd-primary-ghost);
453
+ }
454
+
455
+ .nd-font-block { display: flex; flex-direction: column; gap: 4px; }
456
+ .nd-font-block .nd-row { display: flex; gap: 4px; align-items: center; }
457
+
458
+ .nd-body { flex: 1; display: flex; overflow: hidden; position: relative; }
459
+
460
+ .nd-backstage {
461
+ flex: 1;
462
+ display: flex;
463
+ overflow: hidden;
464
+ background: var(--nd-background);
465
+ min-height: 0;
466
+ }
467
+
468
+ .nd-backstage-left {
469
+ width: 260px;
470
+ flex-shrink: 0;
471
+ background: #0f172a;
472
+ color: #e2e8f0;
473
+ display: flex;
474
+ flex-direction: column;
475
+ padding: 10px;
476
+ gap: 6px;
477
+ }
478
+
479
+ .nd-backstage-back {
480
+ height: 34px;
481
+ border-radius: 10px;
482
+ border: 1px solid rgba(255, 255, 255, 0.15);
483
+ background: rgba(255, 255, 255, 0.06);
484
+ color: #e2e8f0;
485
+ display: flex;
486
+ align-items: center;
487
+ gap: 10px;
488
+ padding: 0 12px;
489
+ cursor: pointer;
490
+ transition: all var(--transition);
491
+ }
492
+
493
+ .nd-backstage-back:hover {
494
+ background: rgba(255, 255, 255, 0.12);
495
+ border-color: rgba(255, 255, 255, 0.2);
496
+ }
497
+
498
+ .nd-backstage-section {
499
+ margin-top: 10px;
500
+ padding: 0 6px;
501
+ font-size: 10px;
502
+ font-weight: 800;
503
+ letter-spacing: 0.08em;
504
+ text-transform: uppercase;
505
+ color: rgba(226, 232, 240, 0.7);
506
+ }
507
+
508
+ .nd-backstage-item {
509
+ height: 34px;
510
+ border-radius: 10px;
511
+ border: 1px solid transparent;
512
+ background: transparent;
513
+ color: #e2e8f0;
514
+ display: flex;
515
+ align-items: center;
516
+ gap: 10px;
517
+ padding: 0 10px;
518
+ cursor: pointer;
519
+ transition: all var(--transition);
520
+ }
521
+
522
+ .nd-backstage-item:hover:not(:disabled) {
523
+ background: rgba(59, 130, 246, 0.18);
524
+ border-color: rgba(59, 130, 246, 0.25);
525
+ }
526
+
527
+ .nd-backstage-item.active {
528
+ background: rgba(59, 130, 246, 0.26);
529
+ border-color: rgba(59, 130, 246, 0.35);
530
+ }
531
+
532
+ .nd-backstage-item:disabled {
533
+ opacity: 0.45;
534
+ cursor: not-allowed;
535
+ }
536
+
537
+ .nd-backstage-spacer { flex: 1; }
538
+
539
+ .nd-backstage-main {
540
+ flex: 1;
541
+ min-width: 0;
542
+ padding: 22px 24px;
543
+ overflow: auto;
544
+ }
545
+
546
+ .nd-backstage-header {
547
+ padding: 0 2px 16px;
548
+ }
549
+
550
+ .nd-backstage-title {
551
+ font-size: 20px;
552
+ font-weight: 900;
553
+ color: var(--nd-text);
554
+ line-height: 1.2;
555
+ }
556
+
557
+ .nd-backstage-sub {
558
+ font-size: 12px;
559
+ color: var(--nd-text-secondary);
560
+ margin-top: 4px;
561
+ }
562
+
563
+ .nd-backstage-grid {
564
+ display: grid;
565
+ grid-template-columns: repeat(3, minmax(0, 1fr));
566
+ gap: 12px;
567
+ }
568
+
569
+ .nd-backstage-view {
570
+ display: flex;
571
+ flex-direction: column;
572
+ gap: 12px;
573
+ }
574
+
575
+ .nd-bs-view {
576
+ display: flex;
577
+ align-items: flex-start;
578
+ justify-content: flex-start;
579
+ }
580
+
581
+ .nd-bs-view-card {
582
+ width: min(820px, 100%);
583
+ border: 1px solid var(--nd-border);
584
+ background: var(--nd-surface);
585
+ border-radius: 12px;
586
+ padding: 16px;
587
+ box-shadow: var(--shadow-sm);
588
+ }
589
+
590
+ .nd-bs-view-title {
591
+ font-size: 14px;
592
+ font-weight: 900;
593
+ color: var(--nd-text);
594
+ }
595
+
596
+ .nd-bs-view-desc {
597
+ font-size: 12px;
598
+ color: var(--nd-text-secondary);
599
+ margin-top: 4px;
600
+ }
601
+
602
+ .nd-bs-view-actions {
603
+ display: flex;
604
+ flex-wrap: wrap;
605
+ gap: 8px;
606
+ margin-top: 12px;
607
+ }
608
+
609
+ .nd-bs-primary,
610
+ .nd-bs-secondary {
611
+ height: 34px;
612
+ padding: 0 12px;
613
+ border-radius: 10px;
614
+ border: 1px solid #d1d5db;
615
+ background: #ffffff;
616
+ color: #0f172a;
617
+ cursor: pointer;
618
+ display: inline-flex;
619
+ align-items: center;
620
+ gap: 8px;
621
+ transition: all var(--transition);
622
+ }
623
+
624
+ .nd-bs-primary {
625
+ background: var(--nd-primary);
626
+ border-color: var(--nd-primary-dark);
627
+ color: #ffffff;
628
+ }
629
+
630
+ .nd-bs-primary:hover:not(:disabled) {
631
+ background: var(--nd-primary-dark);
632
+ }
633
+
634
+ .nd-bs-secondary:hover:not(:disabled) {
635
+ background: #f3f4f6;
636
+ }
637
+
638
+ .nd-bs-primary:disabled,
639
+ .nd-bs-secondary:disabled {
640
+ opacity: 0.55;
641
+ cursor: not-allowed;
642
+ }
643
+
644
+ .nd-bs-form {
645
+ margin-top: 12px;
646
+ display: grid;
647
+ grid-template-columns: 1fr;
648
+ gap: 8px;
649
+ }
650
+
651
+ .nd-bs-label {
652
+ font-size: 11px;
653
+ font-weight: 700;
654
+ color: var(--nd-text-secondary);
655
+ }
656
+
657
+ .nd-bs-input {
658
+ height: 34px;
659
+ border-radius: 10px;
660
+ border: 1px solid var(--nd-border);
661
+ padding: 0 10px;
662
+ outline: none;
663
+ font-size: 12px;
664
+ background: #ffffff;
665
+ transition: border-color var(--transition), box-shadow var(--transition);
666
+ }
667
+
668
+ .nd-bs-input:focus {
669
+ border-color: var(--nd-primary);
670
+ box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
671
+ }
672
+
673
+ .nd-bs-meta {
674
+ margin-top: 12px;
675
+ border: 1px solid var(--nd-border);
676
+ border-radius: 12px;
677
+ overflow: hidden;
678
+ }
679
+
680
+ .nd-bs-meta-row {
681
+ display: flex;
682
+ justify-content: space-between;
683
+ gap: 12px;
684
+ padding: 10px 12px;
685
+ font-size: 12px;
686
+ color: var(--nd-text);
687
+ background: #ffffff;
688
+ }
689
+
690
+ .nd-bs-meta-row + .nd-bs-meta-row {
691
+ border-top: 1px solid var(--nd-border);
692
+ }
693
+
694
+ .nd-bs-meta-row span:first-child {
695
+ color: var(--nd-text-secondary);
696
+ font-weight: 700;
697
+ }
698
+
699
+ .nd-bs-meta-row span:last-child {
700
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
701
+ }
702
+
703
+ .nd-bs-callout {
704
+ margin-top: 12px;
705
+ border: 1px solid var(--nd-border);
706
+ border-radius: 12px;
707
+ background: #f8fafc;
708
+ padding: 12px;
709
+ }
710
+
711
+ .nd-bs-callout-title {
712
+ font-size: 12px;
713
+ font-weight: 900;
714
+ color: var(--nd-text);
715
+ }
716
+
717
+ .nd-bs-callout-desc {
718
+ font-size: 12px;
719
+ color: var(--nd-text-secondary);
720
+ margin-top: 4px;
721
+ }
722
+
723
+ .nd-bs-open {
724
+ margin-top: 12px;
725
+ }
726
+
727
+ .nd-bs-open-top {
728
+ display: flex;
729
+ justify-content: flex-end;
730
+ margin-bottom: 10px;
731
+ }
732
+
733
+ .nd-bs-open-list {
734
+ position: relative;
735
+ }
736
+
737
+ .nd-bs-open-item {
738
+ display: flex;
739
+ flex-direction: column;
740
+ gap: 2px;
741
+ padding: 4px 0;
742
+ }
743
+
744
+ .nd-bs-open-name {
745
+ display: flex;
746
+ align-items: center;
747
+ gap: 8px;
748
+ font-size: 12px;
749
+ font-weight: 700;
750
+ color: var(--nd-text);
751
+ }
752
+
753
+ .nd-bs-pin {
754
+ width: 24px;
755
+ height: 22px;
756
+ border-radius: 8px;
757
+ border: 1px solid var(--nd-border);
758
+ background: #ffffff;
759
+ color: var(--nd-text-muted);
760
+ cursor: pointer;
761
+ display: inline-flex;
762
+ align-items: center;
763
+ justify-content: center;
764
+ transition: all var(--transition);
765
+ flex-shrink: 0;
766
+ }
767
+
768
+ .nd-bs-pin:hover {
769
+ background: #f8fafc;
770
+ color: var(--nd-text);
771
+ }
772
+
773
+ .nd-bs-recents {
774
+ margin-bottom: 12px;
775
+ display: grid;
776
+ grid-template-columns: 1fr 1fr;
777
+ gap: 10px;
778
+ }
779
+
780
+ .nd-bs-recents-block {
781
+ border: 1px solid var(--nd-border);
782
+ border-radius: 12px;
783
+ background: #ffffff;
784
+ overflow: hidden;
785
+ }
786
+
787
+ .nd-bs-recents-title {
788
+ padding: 8px 10px;
789
+ font-size: 11px;
790
+ font-weight: 900;
791
+ letter-spacing: 0.06em;
792
+ text-transform: uppercase;
793
+ background: #f8fafc;
794
+ border-bottom: 1px solid var(--nd-border);
795
+ color: var(--nd-text-secondary);
796
+ }
797
+
798
+ .nd-bs-recents-list {
799
+ display: flex;
800
+ flex-direction: column;
801
+ }
802
+
803
+ .nd-bs-recents-item {
804
+ display: flex;
805
+ justify-content: space-between;
806
+ gap: 10px;
807
+ padding: 8px 10px;
808
+ border: none;
809
+ background: transparent;
810
+ cursor: pointer;
811
+ text-align: left;
812
+ transition: background var(--transition);
813
+ }
814
+
815
+ .nd-bs-recents-item:hover {
816
+ background: var(--nd-primary-ghost);
817
+ }
818
+
819
+ .nd-bs-recents-name {
820
+ font-size: 12px;
821
+ font-weight: 700;
822
+ color: var(--nd-text);
823
+ overflow: hidden;
824
+ text-overflow: ellipsis;
825
+ white-space: nowrap;
826
+ }
827
+
828
+ .nd-bs-recents-meta {
829
+ font-size: 11px;
830
+ color: var(--nd-text-muted);
831
+ flex-shrink: 0;
832
+ }
833
+
834
+ .nd-bs-open-meta {
835
+ font-size: 11px;
836
+ color: var(--nd-text-muted);
837
+ }
838
+
839
+ .nd-bs-empty {
840
+ padding: 10px 4px 0;
841
+ font-size: 12px;
842
+ color: var(--nd-text-muted);
843
+ }
844
+ .nd-bs-card {
845
+ text-align: left;
846
+ border: 1px solid var(--nd-border);
847
+ background: var(--nd-surface);
848
+ border-radius: 12px;
849
+ padding: 14px 14px 12px;
850
+ cursor: pointer;
851
+ transition: all var(--transition);
852
+ box-shadow: var(--shadow-sm);
853
+ }
854
+
855
+ .nd-bs-card:hover:not(:disabled) {
856
+ border-color: var(--nd-primary-light);
857
+ box-shadow: var(--shadow);
858
+ transform: translateY(-1px);
859
+ }
860
+
861
+ .nd-bs-card:disabled {
862
+ opacity: 0.55;
863
+ cursor: not-allowed;
864
+ transform: none;
865
+ }
866
+
867
+ .nd-bs-card-ico {
868
+ width: 34px;
869
+ height: 34px;
870
+ border-radius: 10px;
871
+ background: var(--nd-primary-ghost);
872
+ border: 1px solid var(--nd-primary-light);
873
+ color: var(--nd-primary);
874
+ display: flex;
875
+ align-items: center;
876
+ justify-content: center;
877
+ margin-bottom: 10px;
878
+ }
879
+
880
+ .nd-bs-card-ico i { font-size: 16px; }
881
+
882
+ .nd-bs-card-title {
883
+ font-size: 13px;
884
+ font-weight: 800;
885
+ color: var(--nd-text);
886
+ }
887
+
888
+ .nd-bs-card-desc {
889
+ font-size: 12px;
890
+ color: var(--nd-text-secondary);
891
+ margin-top: 2px;
892
+ }
893
+
894
+ .nd-backstage-meta {
895
+ margin-top: 16px;
896
+ border: 1px solid var(--nd-border);
897
+ border-radius: 12px;
898
+ overflow: hidden;
899
+ background: var(--nd-surface);
900
+ }
901
+
902
+ .nd-backstage-meta-row {
903
+ display: flex;
904
+ justify-content: space-between;
905
+ gap: 12px;
906
+ padding: 10px 12px;
907
+ font-size: 12px;
908
+ color: var(--nd-text);
909
+ }
910
+
911
+ .nd-backstage-meta-row + .nd-backstage-meta-row {
912
+ border-top: 1px solid var(--nd-border);
913
+ }
914
+
915
+ .nd-backstage-meta-row span:first-child {
916
+ color: var(--nd-text-secondary);
917
+ font-weight: 700;
918
+ }
919
+
920
+ .nd-backstage-meta-row span:last-child {
921
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
922
+ }
923
+
924
+ .nd-sidebar {
925
+ background: var(--nd-surface);
926
+ border-left: 1px solid var(--nd-border);
927
+ display: flex;
928
+ flex-direction: column;
929
+ box-shadow: -2px 0 8px rgba(0, 0, 0, 0.04);
930
+ }
931
+
932
+ .nd-sidebar-panels {
933
+ flex: 1;
934
+ overflow-y: auto;
935
+ overflow-x: hidden;
936
+ }
937
+
938
+ .nd-sidebar-panels::-webkit-scrollbar { width: 6px; }
939
+ .nd-sidebar-panels::-webkit-scrollbar-thumb { background: var(--nd-border-strong); border-radius: 4px; }
940
+
941
+ .nd-panel-title {
942
+ padding: 10px 14px;
943
+ background: var(--nd-background);
944
+ font-weight: 700;
945
+ font-size: 11px;
946
+ color: var(--nd-text);
947
+ border-bottom: 1px solid var(--nd-border);
948
+ text-transform: uppercase;
949
+ letter-spacing: 0.04em;
950
+ position: sticky;
951
+ top: 0;
952
+ z-index: 10;
953
+ }
954
+
955
+ .nd-panel-subtitle {
956
+ font-size: 10px;
957
+ font-weight: 700;
958
+ text-transform: uppercase;
959
+ color: var(--nd-text-muted);
960
+ margin: 14px 0 6px;
961
+ padding: 0 12px;
962
+ letter-spacing: 0.04em;
963
+ }
964
+
965
+ .nd-sidebar-tabs {
966
+ height: 36px;
967
+ display: flex;
968
+ background: var(--nd-surface);
969
+ border-top: 1px solid var(--nd-border);
970
+ flex-shrink: 0;
971
+ }
972
+
973
+ .nd-side-tab {
974
+ flex: 1;
975
+ display: flex;
976
+ align-items: center;
977
+ justify-content: center;
978
+ gap: 5px;
979
+ font-size: 11px;
980
+ font-weight: 500;
981
+ cursor: pointer;
982
+ border-right: 1px solid var(--nd-border);
983
+ color: var(--nd-text-muted);
984
+ transition: all var(--transition);
985
+ background: transparent;
986
+ }
987
+
988
+ .nd-side-tab:last-child { border-right: none; }
989
+ .nd-side-tab:hover { color: var(--nd-text); background: var(--nd-primary-ghost); }
990
+
991
+ .nd-side-tab.active {
992
+ color: var(--nd-primary);
993
+ background: var(--nd-primary-light);
994
+ font-weight: 600;
995
+ }
996
+
997
+ .nd-side-tab i { font-size: 13px; }
998
+
999
+ .nd-coll-group { margin: 2px 6px; }
1000
+
1001
+ .nd-coll-header {
1002
+ display: flex;
1003
+ align-items: center;
1004
+ gap: 8px;
1005
+ padding: 7px 10px;
1006
+ cursor: pointer;
1007
+ background: transparent;
1008
+ border-radius: var(--radius-sm);
1009
+ font-size: 12px;
1010
+ font-weight: 500;
1011
+ color: var(--nd-text);
1012
+ transition: all var(--transition);
1013
+ }
1014
+
1015
+ .nd-coll-header:hover { background: var(--nd-primary-ghost); color: var(--nd-primary); }
1016
+ .nd-coll-header i { font-size: 11px; color: var(--nd-text-muted); }
1017
+ .nd-coll-header:hover i { color: var(--nd-primary); }
1018
+
1019
+ .nd-field-list { padding: 2px 0 4px 26px; }
1020
+
1021
+ .nd-field-item {
1022
+ display: flex;
1023
+ align-items: center;
1024
+ gap: 8px;
1025
+ padding: 5px 8px;
1026
+ font-size: 12px;
1027
+ color: var(--nd-text-secondary);
1028
+ cursor: grab;
1029
+ border-radius: var(--radius-sm);
1030
+ transition: all var(--transition);
1031
+ border: 1px solid transparent;
1032
+ }
1033
+
1034
+ .nd-field-item:hover {
1035
+ background: var(--nd-primary-light);
1036
+ color: var(--nd-primary);
1037
+ border-color: var(--nd-primary-light);
1038
+ }
1039
+
1040
+ .nd-field-item:active { cursor: grabbing; }
1041
+ .nd-field-item i { font-size: 10px; color: var(--nd-text-muted); }
1042
+
1043
+ .nd-item {
1044
+ padding: 9px 14px;
1045
+ font-size: 12px;
1046
+ cursor: pointer;
1047
+ display: flex;
1048
+ align-items: center;
1049
+ gap: 10px;
1050
+ color: var(--nd-text-secondary);
1051
+ border-radius: var(--radius-sm);
1052
+ margin: 1px 6px;
1053
+ transition: all var(--transition);
1054
+ }
1055
+
1056
+ .nd-item:hover { background: var(--nd-primary-ghost); color: var(--nd-primary); }
1057
+ .nd-item i { font-size: 13px; color: var(--nd-text-muted); }
1058
+
1059
+ .nd-props { padding: 4px 0; }
1060
+
1061
+ .nd-props-context {
1062
+ display: flex;
1063
+ align-items: center;
1064
+ justify-content: space-between;
1065
+ gap: 10px;
1066
+ padding: 10px 12px;
1067
+ border-bottom: 1px solid var(--nd-border);
1068
+ background: var(--nd-surface);
1069
+ }
1070
+
1071
+ .nd-props-context-title {
1072
+ font-size: 12px;
1073
+ font-weight: 700;
1074
+ color: var(--nd-text);
1075
+ line-height: 1.1;
1076
+ }
1077
+
1078
+ .nd-props-context-sub {
1079
+ font-size: 10px;
1080
+ color: var(--nd-text-muted);
1081
+ line-height: 1.1;
1082
+ margin-top: 2px;
1083
+ }
1084
+
1085
+ .nd-props-context-actions {
1086
+ display: flex;
1087
+ align-items: center;
1088
+ gap: 4px;
1089
+ }
1090
+
1091
+ .nd-props-section {
1092
+ margin: 10px 10px 0;
1093
+ border: 1px solid var(--nd-border);
1094
+ border-radius: var(--radius);
1095
+ overflow: hidden;
1096
+ background: var(--nd-surface);
1097
+ }
1098
+
1099
+ .nd-props-section-head {
1100
+ display: flex;
1101
+ align-items: center;
1102
+ gap: 8px;
1103
+ padding: 8px 10px;
1104
+ cursor: pointer;
1105
+ user-select: none;
1106
+ background: #f8fafc;
1107
+ color: var(--nd-text);
1108
+ font-size: 11px;
1109
+ font-weight: 700;
1110
+ text-transform: uppercase;
1111
+ letter-spacing: 0.04em;
1112
+ }
1113
+
1114
+ .nd-props-section-head:hover {
1115
+ background: var(--nd-primary-ghost);
1116
+ color: var(--nd-primary);
1117
+ }
1118
+
1119
+ .nd-props-section-body {
1120
+ padding: 10px 10px 2px;
1121
+ }
1122
+
1123
+ .nd-about-body {
1124
+ padding: 4px 2px 2px;
1125
+ }
1126
+
1127
+ .nd-about-hero {
1128
+ display: flex;
1129
+ align-items: center;
1130
+ gap: 12px;
1131
+ padding: 10px 12px 8px;
1132
+ border: 1px solid var(--nd-border);
1133
+ border-radius: 12px;
1134
+ background: #f8fafc;
1135
+ }
1136
+
1137
+ .nd-about-logo {
1138
+ width: 48px;
1139
+ height: 48px;
1140
+ border-radius: 12px;
1141
+ background: #ffffff;
1142
+ border: 1px solid var(--nd-border);
1143
+ display: flex;
1144
+ align-items: center;
1145
+ justify-content: center;
1146
+ flex-shrink: 0;
1147
+ }
1148
+
1149
+ .nd-about-logo-img {
1150
+ width: 100%;
1151
+ height: 100%;
1152
+ object-fit: contain;
1153
+ }
1154
+
1155
+ .nd-about-title {
1156
+ font-size: 14px;
1157
+ font-weight: 900;
1158
+ color: var(--nd-text);
1159
+ line-height: 1.2;
1160
+ }
1161
+
1162
+ .nd-about-sub {
1163
+ font-size: 12px;
1164
+ color: var(--nd-text-secondary);
1165
+ margin-top: 2px;
1166
+ }
1167
+
1168
+ .nd-about-kv {
1169
+ margin-top: 12px;
1170
+ border: 1px solid var(--nd-border);
1171
+ border-radius: 12px;
1172
+ overflow: hidden;
1173
+ }
1174
+
1175
+ .nd-about-row {
1176
+ display: flex;
1177
+ justify-content: space-between;
1178
+ gap: 12px;
1179
+ padding: 10px 12px;
1180
+ font-size: 12px;
1181
+ color: var(--nd-text);
1182
+ background: #ffffff;
1183
+ }
1184
+
1185
+ .nd-about-row + .nd-about-row {
1186
+ border-top: 1px solid var(--nd-border);
1187
+ }
1188
+
1189
+ .nd-about-row span:first-child {
1190
+ color: var(--nd-text-secondary);
1191
+ font-weight: 600;
1192
+ }
1193
+
1194
+ .nd-about-row span:last-child {
1195
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1196
+ color: var(--nd-text);
1197
+ }
1198
+
1199
+ .nd-about-footer {
1200
+ display: flex;
1201
+ justify-content: flex-end;
1202
+ padding: 2px 0;
1203
+ }
1204
+
1205
+ /* ─── MANUAL FIELDS ─────────────────────────────────────────────────── */
1206
+ .nd-manual-field {
1207
+ position: relative;
1208
+ background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
1209
+ border-color: #c4b5fd;
1210
+ }
1211
+
1212
+ .nd-manual-field:hover {
1213
+ background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
1214
+ border-color: #8b5cf6;
1215
+ }
1216
+
1217
+ .nd-manual-badge {
1218
+ font-size: 9px;
1219
+ padding: 1px 5px;
1220
+ background: #8b5cf6;
1221
+ color: white;
1222
+ border-radius: 3px;
1223
+ margin-left: auto;
1224
+ font-weight: 500;
1225
+ }
1226
+
1227
+ .nd-field-delete {
1228
+ opacity: 0;
1229
+ transition: opacity 0.15s;
1230
+ }
1231
+
1232
+ .nd-field-item:hover .nd-field-delete {
1233
+ opacity: 1;
1234
+ }
1235
+
1236
+ .nd-empty-state {
1237
+ padding: 12px;
1238
+ text-align: center;
1239
+ color: var(--nd-text-muted);
1240
+ font-style: italic;
1241
+ }
1242
+
1243
+ /* ─── MANUAL FIELDS LIST IN TAB DATOS ──────────────────────────────── */
1244
+ .nd-manual-fields-list {
1245
+ display: flex;
1246
+ flex-direction: column;
1247
+ gap: 4px;
1248
+ margin-top: 6px;
1249
+ }
1250
+
1251
+ .nd-manual-field-item {
1252
+ display: flex;
1253
+ align-items: center;
1254
+ gap: 6px;
1255
+ padding: 5px 8px;
1256
+ background: #f9fafb;
1257
+ border: 1px solid #e5e7eb;
1258
+ border-radius: 4px;
1259
+ font-size: 11px;
1260
+ }
1261
+
1262
+ .nd-manual-field-info {
1263
+ flex: 1;
1264
+ display: flex;
1265
+ flex-direction: column;
1266
+ gap: 1px;
1267
+ }
1268
+
1269
+ .nd-manual-field-name {
1270
+ font-weight: 500;
1271
+ color: var(--nd-text-primary);
1272
+ }
1273
+
1274
+ .nd-manual-field-type {
1275
+ color: var(--nd-text-muted);
1276
+ font-size: 9px;
1277
+ }
1278
+
1279
+ /* ─── DATA SOURCE RELATIONS ─────────────────────────────────────────── */
1280
+ .nd-relations-list {
1281
+ display: flex;
1282
+ flex-direction: column;
1283
+ gap: 4px;
1284
+ margin-top: 6px;
1285
+ }
1286
+
1287
+ .nd-relation-item {
1288
+ display: flex;
1289
+ align-items: center;
1290
+ gap: 6px;
1291
+ padding: 5px 8px;
1292
+ background: #fffbeb;
1293
+ border: 1px solid #fde68a;
1294
+ border-radius: 4px;
1295
+ font-size: 11px;
1296
+ }
1297
+
1298
+ .nd-relation-info {
1299
+ flex: 1;
1300
+ display: flex;
1301
+ flex-direction: column;
1302
+ gap: 1px;
1303
+ }
1304
+
1305
+ .nd-relation-label {
1306
+ font-weight: 500;
1307
+ color: var(--nd-text-primary);
1308
+ }
1309
+
1310
+ .nd-relation-detail {
1311
+ color: var(--nd-text-muted);
1312
+ font-size: 9px;
1313
+ font-family: monospace;
1314
+ }
1315
+
1316
+ /* ─── DATA SOURCE PREVIEW ──────────────────────────────────────────── */
1317
+ .nd-ds-preview {
1318
+ margin-top: 6px;
1319
+ padding-top: 6px;
1320
+ border-top: 1px dashed #e5e7eb;
1321
+ }
1322
+
1323
+ .nd-preview-table {
1324
+ margin-top: 6px;
1325
+ overflow-x: auto;
1326
+ }
1327
+
1328
+ .nd-preview-table-inner {
1329
+ width: 100%;
1330
+ font-size: 9px;
1331
+ border-collapse: collapse;
1332
+ }
1333
+
1334
+ .nd-preview-table-inner th,
1335
+ .nd-preview-table-inner td {
1336
+ padding: 3px 5px;
1337
+ border: 1px solid #e5e7eb;
1338
+ text-align: left;
1339
+ white-space: nowrap;
1340
+ overflow: hidden;
1341
+ text-overflow: ellipsis;
1342
+ }
1343
+
1344
+ .nd-preview-table-inner th {
1345
+ background: #f3f4f6;
1346
+ font-weight: 600;
1347
+ color: var(--nd-text-primary);
1348
+ }
1349
+
1350
+ .nd-preview-table-inner td {
1351
+ color: var(--nd-text-secondary);
1352
+ }
1353
+
1354
+ .nd-preview-count {
1355
+ display: block;
1356
+ margin-top: 3px;
1357
+ font-size: 8px;
1358
+ color: var(--nd-text-muted);
1359
+ text-align: center;
1360
+ }
1361
+
1362
+ /* Tabla de preview completa en diálogo modal */
1363
+ .nd-preview-table-full {
1364
+ width: 100% !important;
1365
+ border-collapse: collapse;
1366
+ font-size: 12px;
1367
+ }
1368
+
1369
+ .nd-preview-table-full th,
1370
+ .nd-preview-table-full td {
1371
+ padding: 6px 10px;
1372
+ border: 1px solid #e5e7eb;
1373
+ text-align: left;
1374
+ white-space: nowrap;
1375
+ overflow: hidden;
1376
+ text-overflow: ellipsis;
1377
+ max-width: 200px;
1378
+ }
1379
+
1380
+ .nd-preview-table-full th {
1381
+ background: #f3f4f6;
1382
+ font-weight: 600;
1383
+ color: var(--nd-text-primary);
1384
+ position: sticky;
1385
+ top: 0;
1386
+ z-index: 1;
1387
+ }
1388
+
1389
+ .nd-preview-table-full td {
1390
+ color: var(--nd-text-secondary);
1391
+ }
1392
+
1393
+ .nd-preview-table-full tbody tr:nth-child(even) {
1394
+ background: #fafafa;
1395
+ }
1396
+
1397
+ .nd-preview-table-full tbody tr:hover {
1398
+ background: #f0f7ff;
1399
+ }
1400
+
1401
+ /* ─── DRILLDOWN EDITOR ─────────────────────────────────────────────── */
1402
+ .nd-param-mapping {
1403
+ display: grid;
1404
+ grid-template-columns: 1fr 1fr auto;
1405
+ gap: 8px;
1406
+ align-items: end;
1407
+ padding: 8px;
1408
+ background: #f9fafb;
1409
+ border: 1px solid #e5e7eb;
1410
+ border-radius: 6px;
1411
+ margin-bottom: 8px;
1412
+ }
1413
+
1414
+ .nd-color-picker {
1415
+ width: 32px;
1416
+ height: 28px;
1417
+ border: 1px solid #d1d5db;
1418
+ border-radius: 4px;
1419
+ cursor: pointer;
1420
+ padding: 0;
1421
+ }
1422
+
1423
+ .nd-field {
1424
+ padding: 6px 12px;
1425
+ display: flex;
1426
+ flex-direction: column;
1427
+ gap: 4px;
1428
+ box-sizing: border-box;
1429
+ }
1430
+
1431
+ .nd-field label {
1432
+ font-size: 10px;
1433
+ font-weight: 600;
1434
+ color: var(--nd-text-muted);
1435
+ text-transform: uppercase;
1436
+ letter-spacing: 0.04em;
1437
+ }
1438
+
1439
+ .nd-field .p-inputtext,
1440
+ .nd-field .p-inputtextarea,
1441
+ .nd-field .p-dropdown {
1442
+ width: 100%;
1443
+ box-sizing: border-box;
1444
+ display: flex;
1445
+ align-items: center;
1446
+ height: 30px;
1447
+ padding-top: 0;
1448
+ padding-bottom: 0;
1449
+ }
1450
+
1451
+ .nd-field textarea {
1452
+ width: 100%;
1453
+ box-sizing: border-box;
1454
+ height: 30px;
1455
+ padding-top: 4px;
1456
+ padding-bottom: 4px;
1457
+ }
1458
+
1459
+ .nd-field .p-dropdown .p-dropdown-label {
1460
+ padding: 4px 8px;
1461
+ display: flex;
1462
+ align-items: center;
1463
+ }
1464
+
1465
+ .nd-field .p-dropdown .p-dropdown-trigger {
1466
+ height: 30px;
1467
+ display: flex;
1468
+ align-items: center;
1469
+ }
1470
+
1471
+ .nd-field-row { display: flex; gap: 8px; padding: 4px 12px; }
1472
+
1473
+ .nd-val-badge {
1474
+ display: inline-block;
1475
+ padding: 2px 8px;
1476
+ background: var(--nd-primary-light);
1477
+ color: var(--nd-primary);
1478
+ border-radius: var(--radius-sm);
1479
+ font-size: 11px;
1480
+ font-weight: 600;
1481
+ }
1482
+
1483
+ .nd-empty { padding: 30px 20px; text-align: center; color: var(--nd-text-muted); font-size: 12px; }
1484
+ .nd-help-text { padding: 10px 12px; font-size: 11px; color: var(--nd-text-muted); line-height: 1.5; }
1485
+
1486
+ .nd-connection-indicator {
1487
+ display: flex;
1488
+ align-items: center;
1489
+ gap: 8px;
1490
+ padding: 10px 12px;
1491
+ margin: 8px;
1492
+ background: #ecfdf5;
1493
+ border-radius: var(--radius);
1494
+ font-size: 11px;
1495
+ color: var(--nd-success);
1496
+ border: 1px solid #a7f3d0;
1497
+ }
1498
+
1499
+ .nd-connection-indicator i { font-size: 14px; }
1500
+
1501
+ .nd-table-editor { padding: 0 12px; }
1502
+
1503
+ .nd-col-edit-card {
1504
+ background: var(--nd-background);
1505
+ border: 1px solid var(--nd-border);
1506
+ border-radius: var(--radius);
1507
+ padding: 10px;
1508
+ margin-bottom: 8px;
1509
+ transition: border-color var(--transition);
1510
+ }
1511
+
1512
+ .nd-col-edit-card:hover { border-color: var(--nd-border-strong); }
1513
+
1514
+ .nd-col-header {
1515
+ display: flex;
1516
+ justify-content: space-between;
1517
+ align-items: center;
1518
+ margin-bottom: 8px;
1519
+ font-weight: 600;
1520
+ font-size: 11px;
1521
+ color: var(--nd-primary);
1522
+ }
1523
+
1524
+ .nd-actions { border-top: 1px solid var(--nd-border); padding-top: 12px; margin-top: 8px; }
1525
+
1526
+ .nd-textarea { resize: none; font-size: 12px; line-height: 1.5; width: 100%; box-sizing: border-box; display: block; }
1527
+
1528
+ .nd-workspace {
1529
+ flex: 1;
1530
+ display: grid;
1531
+ grid-template-columns: 30px 1fr;
1532
+ grid-template-rows: 28px 1fr;
1533
+ background: var(--nd-background-canvas);
1534
+ position: relative;
1535
+ overflow: hidden;
1536
+ }
1537
+
1538
+ .nd-corner {
1539
+ grid-area: 1 / 1;
1540
+ background: var(--nd-surface);
1541
+ border-right: 1px solid var(--nd-border);
1542
+ border-bottom: 1px solid var(--nd-border);
1543
+ z-index: 60;
1544
+ }
1545
+
1546
+ .nd-ruler-h {
1547
+ grid-area: 1 / 2;
1548
+ height: 28px;
1549
+ background: var(--nd-surface);
1550
+ border-bottom: 1px solid var(--nd-border);
1551
+ position: relative;
1552
+ z-index: 50;
1553
+ overflow: hidden;
1554
+ }
1555
+
1556
+ .nd-ruler-h-inner {
1557
+ width: 794px; /* A4 width — matches paper */
1558
+ height: 100%;
1559
+ position: relative;
1560
+ margin: 0 auto;
1561
+ }
1562
+
1563
+ .nd-ruler-v {
1564
+ grid-area: 2 / 1;
1565
+ width: 34px;
1566
+ background: var(--nd-surface);
1567
+ border-right: 1px solid var(--nd-border);
1568
+ position: relative;
1569
+ z-index: 50;
1570
+ overflow: visible;
1571
+ }
1572
+
1573
+ .nd-ruler-v-inner { width: 100%; height: 100%; position: relative; }
1574
+
1575
+ .nd-tick-h {
1576
+ position: absolute;
1577
+ top: 0;
1578
+ height: 100%;
1579
+ width: 1px;
1580
+ border-left: 1px solid var(--nd-border);
1581
+ font-size: 9px;
1582
+ color: var(--nd-text-muted);
1583
+ font-weight: 500;
1584
+ text-align: center;
1585
+ padding-top: 14px;
1586
+ padding-left: 0;
1587
+ transform: translateX(-50%);
1588
+ }
1589
+
1590
+ .nd-tick-v {
1591
+ position: absolute;
1592
+ left: 0;
1593
+ width: 100%;
1594
+ height: 1px;
1595
+ border-top: 1px solid var(--nd-border);
1596
+ }
1597
+
1598
+ .nd-v-lbl {
1599
+ font-size: 9px;
1600
+ color: var(--nd-text-muted);
1601
+ font-weight: 500;
1602
+ position: absolute;
1603
+ left: 6px;
1604
+ top: -5px;
1605
+ white-space: nowrap;
1606
+ transform: rotate(-90deg);
1607
+ transform-origin: 0 0;
1608
+ }
1609
+
1610
+ .nd-scroller {
1611
+ position: absolute;
1612
+ inset: 0;
1613
+ overflow: auto;
1614
+ padding: 50px;
1615
+ --nd-scale: 1;
1616
+ }
1617
+
1618
+ .nd-scroller::-webkit-scrollbar { width: 10px; height: 10px; }
1619
+ .nd-scroller::-webkit-scrollbar-track { background: var(--nd-background); }
1620
+ .nd-scroller::-webkit-scrollbar-thumb {
1621
+ background: var(--nd-border-strong);
1622
+ border-radius: 6px;
1623
+ border: 2px solid var(--nd-background);
1624
+ }
1625
+ .nd-scroller::-webkit-scrollbar-thumb:hover { background: var(--nd-text-muted); }
1626
+
1627
+ .nd-page-wrapper { width: fit-content; margin: 0 auto; padding-bottom: 100px; }
1628
+
1629
+ .nd-page {
1630
+ background: #fff;
1631
+ position: relative;
1632
+ box-shadow: var(--shadow-xl);
1633
+ transform: scale(var(--nd-scale));
1634
+ transform-origin: top center;
1635
+ transition: transform 0.2s ease;
1636
+ flex-shrink: 0;
1637
+ }
1638
+
1639
+ .nd-page-content {
1640
+ position: absolute;
1641
+ inset: 0;
1642
+ box-sizing: border-box;
1643
+ z-index: 5;
1644
+ }
1645
+
1646
+ .nd-page.a4.portrait { width: 794px; min-height: 1123px; }
1647
+ .nd-page.a4.landscape { width: 1123px; min-height: 794px; }
1648
+ .nd-page.letter.portrait { width: 816px; min-height: 1056px; }
1649
+ .nd-page.letter.landscape { width: 1056px; min-height: 816px; }
1650
+ .nd-page.ticket.portrait { width: 302px; min-height: 800px; }
1651
+
1652
+ .nd-paper-grid {
1653
+ position: absolute;
1654
+ inset: 0;
1655
+ background-image:
1656
+ linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
1657
+ linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
1658
+ background-size: 37.8px 37.8px;
1659
+ pointer-events: none;
1660
+ z-index: 1;
1661
+ }
1662
+
1663
+ .nd-margin-guides { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
1664
+
1665
+ .nd-guide-v,
1666
+ .nd-guide-h {
1667
+ position: absolute;
1668
+ background: rgba(239, 68, 68, 0.25);
1669
+ border: 1px dashed rgba(239, 68, 68, 0.5);
1670
+ }
1671
+
1672
+ .nd-guide-v { top: 0; bottom: 0; width: 1px; }
1673
+ .nd-guide-h { left: 0; right: 0; height: 1px; }
1674
+
1675
+ .nd-paper-bands { position: relative; z-index: 10; min-height: 100%; }
1676
+
1677
+ /* Watermark en diseñador */
1678
+ .nd-watermark-layer {
1679
+ position: absolute;
1680
+ top: 0;
1681
+ left: 0;
1682
+ right: 0;
1683
+ bottom: 0;
1684
+ display: flex;
1685
+ align-items: center;
1686
+ justify-content: center;
1687
+ overflow: hidden;
1688
+ pointer-events: none;
1689
+ z-index: 0;
1690
+ }
1691
+
1692
+ .nd-watermark-single {
1693
+ position: absolute;
1694
+ }
1695
+
1696
+ .nd-watermark-text {
1697
+ display: block;
1698
+ font-family: Arial, sans-serif;
1699
+ font-weight: 900;
1700
+ letter-spacing: 4px;
1701
+ user-select: none;
1702
+ text-transform: uppercase;
1703
+ text-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
1704
+ white-space: nowrap;
1705
+ }
1706
+
1707
+ .nd-band {
1708
+ position: relative;
1709
+ border-bottom: 1px dashed var(--nd-border);
1710
+ transition: background var(--transition);
1711
+ min-height: 20px;
1712
+ z-index: 1;
1713
+ }
1714
+
1715
+ .nd-band:hover { background: rgba(37, 99, 235, 0.02); }
1716
+ .nd-band.selected { background: rgba(37, 99, 235, 0.05); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3); }
1717
+
1718
+ .nd-band-tag {
1719
+ position: absolute;
1720
+ left: calc(-96px - var(--nd-margin-left-px, 0px));
1721
+ top: 3px;
1722
+ width: 90px;
1723
+ background: var(--nd-surface);
1724
+ color: var(--nd-text-secondary);
1725
+ font-size: 10px;
1726
+ font-weight: 700;
1727
+ padding: 3px 8px;
1728
+ text-align: right;
1729
+ border: 1px solid var(--nd-border);
1730
+ border-right: none;
1731
+ border-radius: var(--radius-sm) 0 0 var(--radius-sm);
1732
+ cursor: pointer;
1733
+ transition: all var(--transition);
1734
+ white-space: nowrap;
1735
+ overflow: hidden;
1736
+ text-overflow: ellipsis;
1737
+ display: flex;
1738
+ align-items: center;
1739
+ justify-content: flex-end;
1740
+ gap: 4px;
1741
+ z-index: 20;
1742
+ }
1743
+
1744
+ .nd-band-tag:hover {
1745
+ color: var(--nd-primary);
1746
+ background: var(--nd-primary-light);
1747
+ border-color: var(--nd-primary-light);
1748
+ }
1749
+ .nd-band-tag.selected {
1750
+ color: var(--nd-primary);
1751
+ background: var(--nd-primary-light);
1752
+ border-color: var(--nd-primary);
1753
+ }
1754
+
1755
+ .nd-band-source { color: var(--nd-text-muted); font-weight: 400; font-size: 9px; }
1756
+ .nd-band-content { position: relative; margin-left: 0; }
1757
+
1758
+ .nd-snap-guide {
1759
+ position: absolute;
1760
+ pointer-events: none;
1761
+ z-index: 50;
1762
+ background: rgba(59, 130, 246, 0.75);
1763
+ }
1764
+
1765
+ .nd-snap-guide.v { top: 0; bottom: 0; width: 1px; }
1766
+ .nd-snap-guide.h { left: 0; right: 0; height: 1px; }
1767
+ .nd-snap-guide.margin { background: rgba(239, 68, 68, 0.85); }
1768
+
1769
+ .nd-drag-metrics {
1770
+ position: absolute;
1771
+ pointer-events: none;
1772
+ z-index: 60;
1773
+ background: rgba(15, 23, 42, 0.85);
1774
+ color: #ffffff;
1775
+ font-size: 10px;
1776
+ padding: 3px 6px;
1777
+ border-radius: 6px;
1778
+ white-space: nowrap;
1779
+ box-shadow: var(--shadow-md);
1780
+ }
1781
+
1782
+ .nd-distance-line {
1783
+ position: absolute;
1784
+ pointer-events: none;
1785
+ z-index: 55;
1786
+ background: rgba(59, 130, 246, 0.55);
1787
+ }
1788
+
1789
+ .nd-distance-line.h { height: 1px; }
1790
+ .nd-distance-line.v { width: 1px; }
1791
+
1792
+ .nd-distance-label {
1793
+ position: absolute;
1794
+ pointer-events: none;
1795
+ z-index: 56;
1796
+ transform: translate(-50%, -50%);
1797
+ background: rgba(59, 130, 246, 0.85);
1798
+ color: #ffffff;
1799
+ font-size: 10px;
1800
+ padding: 2px 6px;
1801
+ border-radius: 999px;
1802
+ white-space: nowrap;
1803
+ }
1804
+
1805
+ .nd-band-hint {
1806
+ position: absolute;
1807
+ inset: 0;
1808
+ display: flex;
1809
+ flex-direction: column;
1810
+ align-items: center;
1811
+ justify-content: center;
1812
+ gap: 6px;
1813
+ color: var(--nd-text-muted);
1814
+ font-size: 12px;
1815
+ pointer-events: none;
1816
+ opacity: 0;
1817
+ transition: opacity var(--transition);
1818
+ }
1819
+
1820
+ .nd-band:hover .nd-band-hint { opacity: 0.6; }
1821
+ .nd-band-hint i { font-size: 20px; }
1822
+
1823
+ .nd-band-resizer {
1824
+ position: absolute;
1825
+ bottom: -2px;
1826
+ left: 0;
1827
+ width: 100%;
1828
+ height: 6px;
1829
+ cursor: ns-resize;
1830
+ z-index: 30;
1831
+ transition: background var(--transition);
1832
+ }
1833
+
1834
+ .nd-band-resizer:hover { background: rgba(37, 99, 235, 0.15); }
1835
+ .nd-band-resizer.active { background: var(--nd-primary); height: 3px; }
1836
+
1837
+ /* Element Resize Handles */
1838
+ .nd-resize-handle {
1839
+ position: absolute;
1840
+ width: 10px;
1841
+ height: 10px;
1842
+ background: #fff;
1843
+ border: 2px solid var(--nd-primary);
1844
+ border-radius: 50%;
1845
+ z-index: 100;
1846
+ opacity: 0;
1847
+ transition: opacity var(--transition), transform var(--transition);
1848
+ pointer-events: auto;
1849
+ }
1850
+
1851
+ .nd-el:hover .nd-resize-handle,
1852
+ .nd-el.selected .nd-resize-handle {
1853
+ opacity: 1;
1854
+ }
1855
+
1856
+ .nd-resize-handle:hover {
1857
+ transform: scale(1.3);
1858
+ background: var(--nd-primary);
1859
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
1860
+ }
1861
+
1862
+ .nd-resize-handle.top-left {
1863
+ top: -5px;
1864
+ left: -5px;
1865
+ cursor: nwse-resize;
1866
+ }
1867
+
1868
+ .nd-resize-handle.top-right {
1869
+ top: -5px;
1870
+ right: -5px;
1871
+ cursor: nesw-resize;
1872
+ }
1873
+
1874
+ .nd-resize-handle.bottom-left {
1875
+ bottom: -5px;
1876
+ left: -5px;
1877
+ cursor: nesw-resize;
1878
+ }
1879
+
1880
+ .nd-resize-handle.bottom-right {
1881
+ bottom: -5px;
1882
+ right: -5px;
1883
+ cursor: nwse-resize;
1884
+ }
1885
+
1886
+ .nd-el {
1887
+ position: absolute;
1888
+ box-sizing: border-box;
1889
+ border: 1.5px solid transparent;
1890
+ cursor: move;
1891
+ transition: border-color var(--transition), box-shadow var(--transition);
1892
+ z-index: 5;
1893
+ display: flex;
1894
+ align-items: center;
1895
+ justify-content: center;
1896
+ padding: 2px;
1897
+ }
1898
+
1899
+ .nd-el:hover {
1900
+ border-color: var(--nd-primary-light);
1901
+ background: rgba(37, 99, 235, 0.03);
1902
+ }
1903
+
1904
+ .nd-el.selected {
1905
+ border-color: var(--nd-primary) !important;
1906
+ background: rgba(37, 99, 235, 0.04);
1907
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
1908
+ z-index: 15;
1909
+ }
1910
+
1911
+ .nd-el.multi-selected {
1912
+ border-color: #8b5cf6 !important;
1913
+ background: rgba(139, 92, 246, 0.06);
1914
+ box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
1915
+ z-index: 14;
1916
+ }
1917
+
1918
+ .nd-el.dragging { opacity: 0.85; z-index: 100; box-shadow: var(--shadow-lg); }
1919
+
1920
+ /* Selection Box */
1921
+ .nd-selection-box {
1922
+ position: absolute;
1923
+ border: 2px dashed #3b82f6;
1924
+ background: rgba(59, 130, 246, 0.08);
1925
+ pointer-events: none;
1926
+ z-index: 9999;
1927
+ border-radius: 2px;
1928
+ }
1929
+
1930
+ /* Shape Rendering */
1931
+ .nd-shape-render {
1932
+ display: flex;
1933
+ align-items: center;
1934
+ justify-content: center;
1935
+ width: 100%;
1936
+ height: 100%;
1937
+ }
1938
+
1939
+ .nd-shape-render svg {
1940
+ width: 100%;
1941
+ height: 100%;
1942
+ overflow: visible;
1943
+ }
1944
+
1945
+ .nd-shape-label {
1946
+ display: flex;
1947
+ align-items: center;
1948
+ gap: 4px;
1949
+ font-size: 10px;
1950
+ color: var(--nd-text-muted);
1951
+ }
1952
+
1953
+ /* QR Code placeholder */
1954
+ .nd-qr-placeholder {
1955
+ display: flex;
1956
+ flex-direction: column;
1957
+ align-items: center;
1958
+ justify-content: center;
1959
+ gap: 4px;
1960
+ font-size: 10px;
1961
+ color: var(--nd-text-muted);
1962
+ }
1963
+
1964
+ /* System Variables in Dictionary */
1965
+ .nd-sysvar-category {
1966
+ margin-top: 4px;
1967
+ }
1968
+
1969
+ .nd-sysvar-category-title {
1970
+ font-size: 9px;
1971
+ font-weight: 700;
1972
+ color: var(--nd-text-muted);
1973
+ text-transform: uppercase;
1974
+ letter-spacing: 0.5px;
1975
+ padding: 4px 8px 2px;
1976
+ background: var(--nd-background);
1977
+ border-radius: 3px;
1978
+ }
1979
+
1980
+ .nd-sysvar-item {
1981
+ flex-direction: column;
1982
+ align-items: flex-start;
1983
+ gap: 1px;
1984
+ padding: 4px 8px;
1985
+ }
1986
+
1987
+ .nd-sysvar-example {
1988
+ font-size: 8px;
1989
+ color: #9ca3af;
1990
+ font-style: italic;
1991
+ margin-left: 16px;
1992
+ }
1993
+
1994
+ /* Data Source List in Ribbon */
1995
+ .nd-datasource-list {
1996
+ margin-top: 8px;
1997
+ }
1998
+
1999
+ .nd-ds-grid {
2000
+ display: flex;
2001
+ flex-direction: row;
2002
+ flex-wrap: wrap;
2003
+ gap: 8px;
2004
+ }
2005
+
2006
+ .nd-datasource-item {
2007
+ background: var(--nd-background);
2008
+ border: 1px solid var(--nd-border);
2009
+ border-radius: 6px;
2010
+ padding: 6px 8px;
2011
+ font-size: 10px;
2012
+ min-width: 200px;
2013
+ max-width: 240px;
2014
+ flex: 0 1 auto;
2015
+ }
2016
+
2017
+ .nd-ds-primary {
2018
+ border-color: #3b82f6;
2019
+ background: #f0f7ff;
2020
+ }
2021
+
2022
+ .nd-ds-header {
2023
+ display: flex;
2024
+ align-items: center;
2025
+ justify-content: space-between;
2026
+ margin-bottom: 4px;
2027
+ }
2028
+
2029
+ .nd-ds-badge {
2030
+ font-weight: 700;
2031
+ color: #f59e0b;
2032
+ font-size: 11px;
2033
+ }
2034
+
2035
+ .nd-ds-manual-badge {
2036
+ font-size: 9px;
2037
+ color: #8b5cf6;
2038
+ background: #f3f0ff;
2039
+ padding: 1px 6px;
2040
+ border-radius: 4px;
2041
+ font-weight: 500;
2042
+ }
2043
+
2044
+ .nd-ds-primary .nd-ds-badge {
2045
+ color: #3b82f6;
2046
+ }
2047
+
2048
+ .nd-ds-fields {
2049
+ display: flex;
2050
+ gap: 4px;
2051
+ align-items: center;
2052
+ }
2053
+
2054
+ .nd-ds-select {
2055
+ flex: 1;
2056
+ }
2057
+
2058
+ .nd-ds-alias {
2059
+ width: 70px !important;
2060
+ padding: 2px 4px !important;
2061
+ font-size: 9px !important;
2062
+ border-radius: 3px !important;
2063
+ }
2064
+
2065
+ .p-dropdown-xs,
2066
+ .p-dropdown-xs .p-dropdown-label {
2067
+ font-size: 9px !important;
2068
+ padding: 2px 4px !important;
2069
+ min-height: 22px !important;
2070
+ }
2071
+
2072
+ .p-inputtext-xs {
2073
+ font-size: 9px !important;
2074
+ padding: 2px 4px !important;
2075
+ min-height: 22px !important;
2076
+ }
2077
+
2078
+ .nd-placeholder-img {
2079
+ display: flex;
2080
+ align-items: center;
2081
+ justify-content: center;
2082
+ width: 100%;
2083
+ height: 100%;
2084
+ color: var(--nd-text-muted);
2085
+ background: var(--nd-background);
2086
+ }
2087
+
2088
+ .nd-img-preview {
2089
+ width: 100%;
2090
+ height: 100%;
2091
+ object-fit: contain;
2092
+ display: block;
2093
+ }
2094
+
2095
+ .nd-placeholder-bar {
2096
+ display: flex;
2097
+ flex-direction: column;
2098
+ align-items: center;
2099
+ justify-content: center;
2100
+ width: 100%;
2101
+ height: 100%;
2102
+ color: var(--nd-text-muted);
2103
+ font-family: 'Courier New', monospace;
2104
+ }
2105
+
2106
+ .nd-bar-mock { font-size: 16px; letter-spacing: -1px; line-height: 1; }
2107
+
2108
+ .nd-table-render {
2109
+ display: flex;
2110
+ flex-direction: column;
2111
+ width: 100%;
2112
+ height: 100%;
2113
+ border: 1px solid var(--nd-border-strong);
2114
+ background: inherit;
2115
+ overflow: hidden;
2116
+ border-radius: 2px;
2117
+ font-size: inherit;
2118
+ font-family: inherit;
2119
+ color: inherit;
2120
+ }
2121
+
2122
+ .nd-table-header {
2123
+ display: flex;
2124
+ background: #f1f5f9;
2125
+ border-bottom: 1px solid var(--nd-border-strong);
2126
+ flex-shrink: 0;
2127
+ }
2128
+
2129
+ .nd-table-row { display: flex; flex: 1; background: inherit; }
2130
+
2131
+ .nd-table-cell {
2132
+ padding: 4px 8px;
2133
+ border-right: 1px solid var(--nd-border);
2134
+ font-size: inherit;
2135
+ font-family: inherit;
2136
+ color: inherit;
2137
+ white-space: nowrap;
2138
+ overflow: hidden;
2139
+ text-overflow: ellipsis;
2140
+ min-height: 22px;
2141
+ display: flex;
2142
+ align-items: center;
2143
+ }
2144
+
2145
+ .nd-table-cell:last-child { border-right: none; }
2146
+
2147
+ .nd-table-cell.head { font-weight: 600; color: inherit; background: #f8fafc; }
2148
+
2149
+ .nd-table-cell.body {
2150
+ color: inherit;
2151
+ opacity: 0.8;
2152
+ font-family: inherit;
2153
+ font-style: italic;
2154
+ }
2155
+
2156
+ .nd-footer {
2157
+ height: 30px;
2158
+ background: var(--nd-surface);
2159
+ color: var(--nd-text-secondary);
2160
+ display: flex;
2161
+ align-items: center;
2162
+ padding: 0 12px;
2163
+ font-size: 11px;
2164
+ border-top: 1px solid var(--nd-border);
2165
+ gap: 0;
2166
+ z-index: 50;
2167
+ }
2168
+
2169
+ .nd-f-seg {
2170
+ height: 100%;
2171
+ display: flex;
2172
+ align-items: center;
2173
+ padding: 0 12px;
2174
+ border-right: 1px solid var(--nd-border);
2175
+ white-space: nowrap;
2176
+ gap: 6px;
2177
+ color: var(--nd-text-secondary);
2178
+ }
2179
+
2180
+ .nd-f-seg:last-child { border-right: none; }
2181
+ .nd-f-seg.main { flex: 1; }
2182
+ .nd-f-seg i { font-size: 12px; color: var(--nd-text-muted); }
2183
+
2184
+ .nd-f-lbl {
2185
+ color: var(--nd-text-muted);
2186
+ font-size: 9px;
2187
+ text-transform: uppercase;
2188
+ font-weight: 600;
2189
+ letter-spacing: 0.04em;
2190
+ }
2191
+
2192
+ .nd-f-val { font-weight: 700; color: var(--nd-primary); }
2193
+
2194
+ .nd-zoom {
2195
+ display: flex;
2196
+ align-items: center;
2197
+ gap: 8px;
2198
+ margin-left: auto;
2199
+ padding: 0 12px;
2200
+ border-left: 1px solid var(--nd-border);
2201
+ }
2202
+
2203
+ .nd-zoom span {
2204
+ font-size: 11px;
2205
+ font-weight: 600;
2206
+ color: var(--nd-text-secondary);
2207
+ min-width: 42px;
2208
+ text-align: center;
2209
+ }
2210
+
2211
+ .nd-zoom input[type="range"] { width: 100px; cursor: pointer; accent-color: var(--nd-primary); }
2212
+
2213
+ /* Utilities */
2214
+ .w-full { width: 100% !important; }
2215
+ .mt-2 { margin-top: 8px !important; }
2216
+ .mb-2 { margin-bottom: 8px !important; }
2217
+ .block { display: block !important; }
2218
+ .flex { display: flex !important; }
2219
+ .items-center { align-items: center !important; }
2220
+ .gap-2 { gap: 8px !important; }
2221
+ .text-center { text-align: center !important; }
2222
+ .text-\[9px\] { font-size: 9px !important; }
2223
+ .text-\[10px\] { font-size: 10px !important; }
2224
+ .text-gray-400 { color: #9ca3af !important; }
2225
+ .opacity-50 { opacity: 0.5 !important; }
2226
+ .cursor-not-allowed { cursor: not-allowed !important; }
2227
+
2228
+ /* ============================================================
2229
+ WIDGET LIBRARY & DASHBOARD DESIGNER
2230
+ ============================================================ */
2231
+
2232
+ .nd-widget-groups {
2233
+ padding: 12px;
2234
+ display: flex;
2235
+ flex-direction: column;
2236
+ gap: 20px;
2237
+ }
2238
+
2239
+ .nd-cat-title {
2240
+ font-size: 10px;
2241
+ font-weight: 800;
2242
+ color: var(--nd-text-muted);
2243
+ text-transform: uppercase;
2244
+ letter-spacing: 0.06em;
2245
+ margin-bottom: 10px;
2246
+ padding-left: 2px;
2247
+ }
2248
+
2249
+ .nd-widget-grid {
2250
+ display: grid;
2251
+ grid-template-columns: repeat(2, 1fr);
2252
+ gap: 8px;
2253
+ }
2254
+
2255
+ .nd-widget-item {
2256
+ background: #fff;
2257
+ border: 1px solid var(--nd-border);
2258
+ border-radius: 10px;
2259
+ padding: 12px 8px;
2260
+ display: flex;
2261
+ flex-direction: column;
2262
+ align-items: center;
2263
+ justify-content: center;
2264
+ gap: 8px;
2265
+ cursor: grab;
2266
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2267
+ text-align: center;
2268
+ box-shadow: 0 1px 2px rgba(0,0,0,0.03);
2269
+ }
2270
+
2271
+ .nd-widget-item:hover {
2272
+ border-color: var(--nd-primary);
2273
+ background: var(--nd-primary-ghost);
2274
+ transform: translateY(-2px);
2275
+ box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
2276
+ }
2277
+
2278
+ .nd-widget-item:active {
2279
+ cursor: grabbing;
2280
+ }
2281
+
2282
+ .nd-widget-item i {
2283
+ font-size: 20px;
2284
+ filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
2285
+ }
2286
+
2287
+ .nd-widget-item span {
2288
+ font-size: 10px;
2289
+ font-weight: 600;
2290
+ color: var(--nd-text-secondary);
2291
+ line-height: 1.2;
2292
+ }
2293
+
2294
+ /* ── Toolbox Grid ── */
2295
+ .nd-toolbox-panel .nd-widget-category {
2296
+ padding: 0 10px 10px 10px;
2297
+ }
2298
+ .nd-toolbox-grid {
2299
+ display: grid;
2300
+ grid-template-columns: 1fr 1fr;
2301
+ gap: 6px;
2302
+ margin-top: 6px;
2303
+ }
2304
+ .nd-toolbox-item {
2305
+ display: flex;
2306
+ flex-direction: column;
2307
+ align-items: center;
2308
+ justify-content: center;
2309
+ gap: 4px;
2310
+ padding: 10px 6px;
2311
+ border: 1px solid var(--nd-border, #e2e8f0);
2312
+ border-radius: 6px;
2313
+ background: var(--nd-surface, #fff);
2314
+ cursor: grab;
2315
+ transition: all 0.15s;
2316
+ user-select: none;
2317
+ }
2318
+ .nd-toolbox-item:hover {
2319
+ border-color: var(--nd-primary-light, #dbeafe);
2320
+ background: var(--nd-primary-ghost, rgba(37, 99, 235, 0.08));
2321
+ box-shadow: 0 1px 3px rgba(0,0,0,0.06);
2322
+ }
2323
+ .nd-toolbox-item:active {
2324
+ cursor: grabbing;
2325
+ transform: scale(0.96);
2326
+ }
2327
+ .nd-toolbox-item i {
2328
+ font-size: 1.2rem;
2329
+ }
2330
+ .nd-toolbox-item span {
2331
+ font-size: 10px;
2332
+ color: var(--nd-text-secondary, #64748b);
2333
+ text-align: center;
2334
+ line-height: 1.2;
2335
+ }
2336
+
2337
+ @media (max-width: 1200px) {
2338
+ .nd-toolbox-grid {
2339
+ grid-template-columns: repeat(3, 1fr) !important;
2340
+ }
2341
+ }
2342
+
2343
+ /* ============================================================
2344
+ CREATE REPORT WIZARD
2345
+ ============================================================ */
2346
+ .nd-wizard-header {
2347
+ display: flex;
2348
+ flex-direction: column;
2349
+ gap: 12px;
2350
+ padding: 8px 0;
2351
+ }
2352
+ .nd-wizard-title {
2353
+ font-size: 16px;
2354
+ font-weight: 600;
2355
+ margin: 0;
2356
+ color: #1e293b;
2357
+ }
2358
+ .nd-wizard-steps {
2359
+ display: flex;
2360
+ gap: 8px;
2361
+ }
2362
+ .nd-wizard-step {
2363
+ display: flex;
2364
+ align-items: center;
2365
+ gap: 6px;
2366
+ padding: 4px 10px;
2367
+ border-radius: 6px;
2368
+ font-size: 12px;
2369
+ color: #94a3b8;
2370
+ background: #f1f5f9;
2371
+ }
2372
+ .nd-wizard-step.active {
2373
+ color: #3b82f6;
2374
+ background: #dbeafe;
2375
+ font-weight: 600;
2376
+ }
2377
+ .nd-wizard-step.done {
2378
+ color: #10b981;
2379
+ background: #d1fae5;
2380
+ }
2381
+ .nd-wiz-step-num {
2382
+ width: 20px;
2383
+ height: 20px;
2384
+ border-radius: 50%;
2385
+ display: flex;
2386
+ align-items: center;
2387
+ justify-content: center;
2388
+ font-size: 11px;
2389
+ font-weight: 700;
2390
+ background: currentColor;
2391
+ color: white;
2392
+ }
2393
+ .nd-wiz-step-label {
2394
+ white-space: nowrap;
2395
+ }
2396
+ .nd-wiz-body {
2397
+ min-height: 260px;
2398
+ padding: 8px 0;
2399
+ }
2400
+ .nd-wiz-desc {
2401
+ color: #64748b;
2402
+ font-size: 13px;
2403
+ margin: 0 0 16px 0;
2404
+ }
2405
+ .nd-wiz-cards {
2406
+ display: flex;
2407
+ gap: 12px;
2408
+ }
2409
+ .nd-wiz-card {
2410
+ flex: 1;
2411
+ border: 2px solid #e2e8f0;
2412
+ border-radius: 10px;
2413
+ padding: 20px 16px;
2414
+ cursor: pointer;
2415
+ transition: all 0.15s;
2416
+ display: flex;
2417
+ flex-direction: column;
2418
+ align-items: center;
2419
+ text-align: center;
2420
+ gap: 8px;
2421
+ }
2422
+ .nd-wiz-card:hover {
2423
+ border-color: #93c5fd;
2424
+ background: #f0f9ff;
2425
+ }
2426
+ .nd-wiz-card.selected {
2427
+ border-color: #3b82f6;
2428
+ background: #eff6ff;
2429
+ box-shadow: 0 0 0 1px #3b82f6;
2430
+ }
2431
+ .nd-wiz-card-icon {
2432
+ font-size: 2.2rem;
2433
+ }
2434
+ .nd-wiz-card-title {
2435
+ font-weight: 600;
2436
+ font-size: 14px;
2437
+ color: #1e293b;
2438
+ }
2439
+ .nd-wiz-card-desc {
2440
+ font-size: 11px;
2441
+ color: #64748b;
2442
+ line-height: 1.4;
2443
+ }
2444
+ .nd-wiz-grid {
2445
+ display: grid;
2446
+ grid-template-columns: 1fr 1fr;
2447
+ gap: 10px;
2448
+ }
2449
+ .nd-wiz-tpl {
2450
+ border: 2px solid #e2e8f0;
2451
+ border-radius: 10px;
2452
+ padding: 16px 14px;
2453
+ cursor: pointer;
2454
+ transition: all 0.15s;
2455
+ display: flex;
2456
+ flex-direction: column;
2457
+ gap: 6px;
2458
+ }
2459
+ .nd-wiz-tpl:hover {
2460
+ border-color: #93c5fd;
2461
+ background: #f0f9ff;
2462
+ }
2463
+ .nd-wiz-tpl.selected {
2464
+ border-color: #3b82f6;
2465
+ background: #eff6ff;
2466
+ box-shadow: 0 0 0 1px #3b82f6;
2467
+ }
2468
+ .nd-wiz-tpl.disabled {
2469
+ opacity: 0.4;
2470
+ cursor: not-allowed;
2471
+ pointer-events: none;
2472
+ }
2473
+ .nd-wiz-tpl-icon {
2474
+ font-size: 1.4rem;
2475
+ color: #3b82f6;
2476
+ }
2477
+ .nd-wiz-tpl-label {
2478
+ font-weight: 600;
2479
+ font-size: 13px;
2480
+ color: #1e293b;
2481
+ }
2482
+ .nd-wiz-tpl-desc {
2483
+ font-size: 11px;
2484
+ color: #64748b;
2485
+ line-height: 1.35;
2486
+ }
2487
+ .nd-wiz-radios {
2488
+ display: flex;
2489
+ flex-direction: column;
2490
+ gap: 10px;
2491
+ margin-bottom: 16px;
2492
+ }
2493
+ .nd-wiz-radio {
2494
+ display: flex;
2495
+ align-items: center;
2496
+ gap: 10px;
2497
+ padding: 10px 14px;
2498
+ border: 1px solid #e2e8f0;
2499
+ border-radius: 8px;
2500
+ cursor: pointer;
2501
+ transition: border-color 0.15s;
2502
+ font-size: 13px;
2503
+ }
2504
+ .nd-wiz-radio:hover {
2505
+ border-color: #93c5fd;
2506
+ }
2507
+ .nd-wiz-radio input[type="radio"] {
2508
+ accent-color: #3b82f6;
2509
+ }
2510
+ .nd-wiz-field {
2511
+ display: flex;
2512
+ flex-direction: column;
2513
+ gap: 6px;
2514
+ }
2515
+ .nd-wiz-field label {
2516
+ font-size: 12px;
2517
+ font-weight: 500;
2518
+ color: #475569;
2519
+ }
2520
+ .nd-wiz-summary {
2521
+ display: flex;
2522
+ flex-direction: column;
2523
+ gap: 10px;
2524
+ }
2525
+ .nd-wiz-summary-row {
2526
+ display: flex;
2527
+ align-items: center;
2528
+ gap: 12px;
2529
+ padding: 10px 12px;
2530
+ background: #f8fafc;
2531
+ border-radius: 8px;
2532
+ font-size: 13px;
2533
+ }
2534
+ .nd-wiz-summary-label {
2535
+ font-weight: 500;
2536
+ color: #475569;
2537
+ min-width: 80px;
2538
+ }
2539
+ .nd-wiz-footer {
2540
+ display: flex;
2541
+ justify-content: space-between;
2542
+ align-items: center;
2543
+ width: 100%;
2544
+ }
2545
+ .nd-wiz-footer-right {
2546
+ display: flex;
2547
+ gap: 8px;
2548
+ margin-left: auto;
2549
+ }
2550
+
2551
+ /* ─── Editor de texto enriquecido ─────────────────────────────────────
2552
+ Vive aquí y no en el <style scoped> de NexaDesigner.vue: ese bloque no llega
2553
+ nunca a la página en el build de librería, así que las reglas puestas allí son
2554
+ invisibles. Todo el estilo del diseñador se sirve desde este archivo. */
2555
+ /* ─── Rich text ─────────────────────────────────────────────────── */
2556
+ /* On the canvas the element shows its real formatting, so the author sees what will print. */
2557
+ .nd-richtext-render {
2558
+ width: 100%;
2559
+ height: 100%;
2560
+ overflow: hidden;
2561
+ font-size: 12px;
2562
+ line-height: 1.35;
2563
+ }
2564
+ .nd-richtext-render :deep(p) { margin: 0 0 0.35em 0; }
2565
+ .nd-richtext-render :deep(p:last-child) { margin-bottom: 0; }
2566
+
2567
+ .nd-rt-toolbar {
2568
+ display: flex;
2569
+ align-items: center;
2570
+ gap: 4px;
2571
+ flex-wrap: wrap;
2572
+ padding: 6px 8px;
2573
+ border: 1px solid #e2e8f0;
2574
+ border-bottom: none;
2575
+ border-radius: 6px 6px 0 0;
2576
+ background: #f8fafc;
2577
+ }
2578
+ .nd-rt-toolbar button {
2579
+ min-width: 30px;
2580
+ height: 28px;
2581
+ border: 1px solid transparent;
2582
+ border-radius: 4px;
2583
+ background: transparent;
2584
+ cursor: pointer;
2585
+ font-size: 13px;
2586
+ color: #334155;
2587
+ }
2588
+ .nd-rt-toolbar button:hover { background: #e2e8f0; border-color: #cbd5e1; }
2589
+ .nd-rt-toolbar input[type="color"] { width: 30px; height: 28px; padding: 0; border: 1px solid #cbd5e1; border-radius: 4px; background: none; cursor: pointer; }
2590
+ .nd-rt-toolbar select { height: 28px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12px; }
2591
+ .nd-rt-sep { width: 1px; height: 20px; background: #cbd5e1; margin: 0 4px; }
2592
+
2593
+ .nd-rt-surface {
2594
+ min-height: 220px;
2595
+ max-height: 45vh;
2596
+ overflow-y: auto;
2597
+ padding: 12px;
2598
+ border: 1px solid #e2e8f0;
2599
+ border-radius: 0 0 6px 6px;
2600
+ outline: none;
2601
+ font-size: 13px;
2602
+ line-height: 1.5;
2603
+ background: #fff;
2604
+ }