@jjlmoya/utils-babies 1.12.0 → 1.13.0

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.
@@ -239,407 +239,3 @@ const { ui } = Astro.props;
239
239
  })();
240
240
  </script>
241
241
 
242
- <style>
243
- :global(.bfc-card) {
244
- background: #fff;
245
- border: 1px solid #e2e8f0;
246
- border-radius: 28px;
247
- overflow: hidden;
248
- display: flex;
249
- flex-direction: column;
250
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
251
- }
252
-
253
- :global(.theme-dark .bfc-card) {
254
- background: #111827;
255
- border-color: #1f2937;
256
- }
257
-
258
- .bfc-main {
259
- display: grid;
260
- grid-template-columns: 1fr 1fr;
261
- }
262
-
263
- .bfc-left {
264
- background: #f8fafc;
265
- padding: 40px;
266
- border-right: 1px solid #e2e8f0;
267
- }
268
-
269
- :global(.theme-dark .bfc-left) {
270
- background: #1f2937;
271
- border-right-color: #374151;
272
- }
273
-
274
- :global(.bfc-right) {
275
- background: #fff;
276
- padding: 40px;
277
- }
278
-
279
- :global(.theme-dark .bfc-right) {
280
- background: #111827;
281
- }
282
-
283
- .bfc-section-marker {
284
- display: block;
285
- font-size: 0.75rem;
286
- font-weight: 800;
287
- text-transform: uppercase;
288
- letter-spacing: 0.15em;
289
- color: #64748b;
290
- margin-bottom: 32px;
291
- }
292
-
293
- :global(.bfc-input-label) {
294
- display: block;
295
- font-size: 0.95rem;
296
- font-weight: 700;
297
- color: #334155;
298
- margin-bottom: 12px;
299
- }
300
-
301
- :global(.theme-dark .bfc-input-label) {
302
- color: #e2e8f0;
303
- }
304
-
305
- .bfc-input-group {
306
- margin-bottom: 28px;
307
- }
308
-
309
- .bfc-unit-nav {
310
- display: flex;
311
- background: #e2e8f0;
312
- padding: 4px;
313
- border-radius: 12px;
314
- margin-bottom: 24px;
315
- }
316
-
317
- :global(.theme-dark .bfc-unit-nav) {
318
- background: #374151;
319
- }
320
-
321
- :global(.bfc-unit-tab) {
322
- flex: 1;
323
- padding: 8px;
324
- border: none;
325
- background: #f1f5f9;
326
- color: #64748b;
327
- font-size: 0.85rem;
328
- font-weight: 700;
329
- border-radius: 8px;
330
- cursor: pointer;
331
- transition: all 0.2s ease;
332
- margin: 2px;
333
- }
334
-
335
- :global(.theme-dark .bfc-unit-tab) {
336
- background: #1f2937;
337
- }
338
-
339
- :global(.bfc-unit-active) {
340
- background: #fff;
341
- color: #0d9488;
342
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
343
- }
344
-
345
- :global(.theme-dark .bfc-unit-active) {
346
- background: #4b5563;
347
- color: #2dd4bf;
348
- }
349
-
350
- .bfc-stepper-box {
351
- display: flex;
352
- align-items: center;
353
- justify-content: space-between;
354
- background: #fff;
355
- border: 1px solid #cbd5e1;
356
- border-radius: 16px;
357
- padding: 8px;
358
- margin-bottom: 8px;
359
- }
360
-
361
- :global(.theme-dark .bfc-stepper-box) {
362
- background: #111827;
363
- border-color: #4b5563;
364
- }
365
-
366
- :global(.bfc-btn-step) {
367
- width: 44px;
368
- height: 44px;
369
- border-radius: 12px;
370
- border: none;
371
- background: #f1f5f9;
372
- color: #334155;
373
- font-size: 1.25rem;
374
- font-weight: 700;
375
- cursor: pointer;
376
- transition: all 0.2s ease;
377
- }
378
-
379
- :global(.theme-dark .bfc-btn-step) {
380
- background: #374151;
381
- color: #f9fafb;
382
- }
383
-
384
- :global(.bfc-btn-step:hover) {
385
- background: #0d9488;
386
- color: #fff;
387
- }
388
-
389
- .bfc-val-view {
390
- text-align: center;
391
- }
392
-
393
- :global(.bfc-val-big) {
394
- display: block;
395
- font-size: 2rem;
396
- font-weight: 800;
397
- color: #0f172a;
398
- }
399
-
400
- :global(.theme-dark .bfc-val-big) {
401
- color: #fff;
402
- }
403
-
404
- :global(.bfc-val-sub) {
405
- display: block;
406
- font-size: 0.85rem;
407
- color: #64748b;
408
- font-weight: 600;
409
- }
410
-
411
- .bfc-slider-wrap {
412
- padding: 0 11px;
413
- }
414
-
415
- .bfc-slider {
416
- -webkit-appearance: none;
417
- appearance: none;
418
- width: 100%;
419
- margin: 16px 0;
420
- height: 6px;
421
- background: #e2e8f0;
422
- border-radius: 3px;
423
- outline: none;
424
- }
425
-
426
- :global(.theme-dark .bfc-slider) {
427
- background: #374151;
428
- }
429
-
430
- :global(.bfc-slider::-webkit-slider-thumb) {
431
- -webkit-appearance: none;
432
- appearance: none;
433
- width: 22px;
434
- height: 22px;
435
- border-radius: 50%;
436
- background: #0d9488;
437
- cursor: pointer;
438
- border: 3px solid #fff;
439
- box-shadow: 0 4px 10px rgba(13, 148, 136, 0.3);
440
- }
441
-
442
- .bfc-type-rack {
443
- display: grid;
444
- grid-template-columns: repeat(3, 1fr);
445
- gap: 12px;
446
- }
447
-
448
- :global(.bfc-type-tile) {
449
- background: #f1f5f9;
450
- border: 1px solid #cbd5e1;
451
- border-radius: 14px;
452
- padding: 14px 4px;
453
- text-align: center;
454
- cursor: pointer;
455
- transition: all 0.2s ease;
456
- font-size: 0.9rem;
457
- font-weight: 700;
458
- color: #64748b;
459
- }
460
-
461
- :global(.theme-dark .bfc-type-tile) {
462
- background: #1f2937;
463
- border-color: #4b5563;
464
- }
465
-
466
- :global(.bfc-type-active) {
467
- background: #f0fdfa;
468
- border-color: #0d9488;
469
- color: #0f766e;
470
- box-shadow: 0 2px 8px rgba(13, 148, 136, 0.1);
471
- }
472
-
473
- :global(.theme-dark .bfc-type-active) {
474
- background: rgba(13, 148, 136, 0.1);
475
- color: #2dd4bf;
476
- border-color: #2dd4bf;
477
- }
478
-
479
- .bfc-gauge-area {
480
- margin-top: 40px;
481
- padding: 30px;
482
- background: #fff;
483
- border-radius: 20px;
484
- border: 1px solid #e2e8f0;
485
- }
486
-
487
- :global(.theme-dark .bfc-gauge-area) {
488
- background: #111827;
489
- border-color: #374151;
490
- }
491
-
492
- .bfc-gauge-viz {
493
- display: flex;
494
- flex-direction: column;
495
- align-items: center;
496
- text-align: center;
497
- gap: 16px;
498
- }
499
-
500
- .bfc-stomach-bubble {
501
- width: 60px;
502
- height: 60px;
503
- background: radial-gradient(circle at 30% 30%, #5eead4 0%, #0d9488 100%);
504
- border-radius: 50%;
505
- transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
506
- box-shadow: 0 10px 25px rgba(13, 148, 136, 0.2);
507
- }
508
-
509
- :global(.bfc-visual-hint) {
510
- font-size: 0.95rem;
511
- font-weight: 600;
512
- color: #0f766e;
513
- margin: 0;
514
- }
515
-
516
- :global(.theme-dark .bfc-visual-hint) {
517
- color: #2dd4bf;
518
- }
519
-
520
- .bfc-res-card-box {
521
- background: #f0fdfa;
522
- border-radius: 24px;
523
- padding: 32px 16px;
524
- text-align: center;
525
- margin-bottom: 24px;
526
- }
527
-
528
- :global(.theme-dark .bfc-res-card-box) {
529
- background: rgba(13, 148, 136, 0.05);
530
- }
531
-
532
- :global(.bfc-res-main-val) {
533
- display: block;
534
- font-size: 3.5rem;
535
- font-weight: 950;
536
- color: #0d9488;
537
- letter-spacing: -0.05em;
538
- line-height: 1;
539
- }
540
-
541
- :global(.theme-dark .bfc-res-main-val) {
542
- color: #2dd4bf;
543
- }
544
-
545
- :global(.bfc-res-label) {
546
- display: block;
547
- margin-top: 8px;
548
- font-size: 1rem;
549
- font-weight: 700;
550
- color: #64748b;
551
- }
552
-
553
- .bfc-stats-grid {
554
- display: grid;
555
- grid-template-columns: 1fr 1fr;
556
- gap: 20px;
557
- margin-bottom: 32px;
558
- }
559
-
560
- .bfc-stat-item {
561
- padding: 8px;
562
- border-bottom: 2px solid #f1f5f9;
563
- }
564
-
565
- :global(.theme-dark .bfc-stat-item) {
566
- border-bottom-color: #374151;
567
- }
568
-
569
- :global(.bfc-stat-label) {
570
- display: block;
571
- font-size: 0.7rem;
572
- font-weight: 800;
573
- color: #94a3b8;
574
- text-transform: uppercase;
575
- margin-bottom: 2px;
576
- }
577
-
578
- :global(.bfc-stat-value) {
579
- font-size: 1.15rem;
580
- font-weight: 800;
581
- color: #334155;
582
- }
583
-
584
- :global(.theme-dark .bfc-stat-value) {
585
- color: #e2e8f0;
586
- }
587
-
588
- .bfc-behavior-sec {
589
- margin-top: 32px;
590
- }
591
-
592
- .bfc-pills-container {
593
- display: flex;
594
- flex-wrap: wrap;
595
- gap: 8px;
596
- margin-top: 12px;
597
- }
598
-
599
- .bfc-pill {
600
- font-size: 0.8rem;
601
- font-weight: 700;
602
- padding: 6px 12px;
603
- border-radius: 100px;
604
- }
605
-
606
- :global(.bfc-pill-hunger) {
607
- background: #fff7ed;
608
- color: #c2410c;
609
- }
610
-
611
- :global(.theme-dark .bfc-pill-hunger) {
612
- background: rgba(194, 65, 12, 0.1);
613
- color: #fdba74;
614
- }
615
-
616
- :global(.bfc-pill-fullness) {
617
- background: #f0fdf4;
618
- color: #15803d;
619
- }
620
-
621
- :global(.theme-dark .bfc-pill-fullness) {
622
- background: rgba(21, 128, 61, 0.1);
623
- color: #4ade80;
624
- }
625
-
626
- .bfc-hidden {
627
- display: none;
628
- }
629
-
630
- @media (max-width: 800px) {
631
- .bfc-main {
632
- grid-template-columns: 1fr;
633
- }
634
-
635
- .bfc-left {
636
- border-right: none;
637
- border-bottom: 1px solid #e2e8f0;
638
- padding: 30px 20px;
639
- }
640
-
641
- .bfc-right {
642
- padding: 30px 20px;
643
- }
644
- }
645
- </style>