@jjlmoya/utils-developer 1.13.0 → 1.15.0

package/src/tool/mobileMockupGenerator/mobile-mockup-generator.css

@@ -41,7 +41,7 @@
     border-color: rgb(254, 202, 202);
   }
 
-  :global(.theme-dark) .mmg-btn-clear {
+  .theme-dark .mmg-btn-clear {
     background: rgb(15, 23, 42);
     border-color: rgb(30, 41, 59);
     color: rgb(148, 163, 184);
@@ -68,7 +68,7 @@
     transform: translateY(-1px);
   }
 
-  :global(.theme-dark) .mmg-btn-download {
+  .theme-dark .mmg-btn-download {
     background: #fff;
     color: rgb(15, 23, 42);
   }
@@ -100,7 +100,7 @@
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }
 
-  :global(.theme-dark) .mmg-card {
+  .theme-dark .mmg-card {
     background: rgba(15, 23, 42, 0.7);
     border-color: rgb(30, 41, 59);
   }
@@ -123,7 +123,7 @@
     margin-bottom: 1rem;
   }
 
-  :global(.theme-dark) .mmg-card-title {
+  .theme-dark .mmg-card-title {
     color: #fff;
   }
 
@@ -148,7 +148,7 @@
     background: rgba(99, 102, 241, 0.05);
   }
 
-  :global(.theme-dark) .mmg-drop-zone {
+  .theme-dark .mmg-drop-zone {
     border-color: rgb(51, 65, 85);
   }
 
@@ -186,7 +186,7 @@
     margin-top: 0.25rem;
   }
 
-  :global(.theme-dark) .mmg-drop-hint {
+  .theme-dark .mmg-drop-hint {
     color: rgb(203, 213, 225);
   }
 
@@ -217,7 +217,7 @@
     background: rgb(254, 243, 199);
   }
 
-  :global(.theme-dark) .mmg-btn-mass {
+  .theme-dark .mmg-btn-mass {
     background: rgba(180, 83, 9, 0.1);
     border-color: rgba(180, 83, 9, 0.5);
     color: rgb(252, 211, 77);
@@ -283,12 +283,12 @@
     transform: translateY(-1px);
   }
 
-  :global(.theme-dark) .mmg-device-btn {
+  .theme-dark .mmg-device-btn {
     background: rgb(15, 23, 42);
     color: rgb(203, 213, 225);
   }
 
-  :global(.theme-dark) .mmg-device-active {
+  .theme-dark .mmg-device-active {
     background: rgba(79, 70, 229, 0.2);
     border-color: rgb(129, 140, 248);
   }
@@ -314,7 +314,7 @@
     border-color: rgb(99, 102, 241);
   }
 
-  :global(.theme-dark) .mmg-select {
+  .theme-dark .mmg-select {
     background: rgb(2, 6, 23);
     border-color: rgb(30, 41, 59);
     color: #fff;
@@ -363,7 +363,7 @@
     background: rgb(241, 245, 249);
   }
 
-  :global(.theme-dark) .mmg-swap-btn:hover {
+  .theme-dark .mmg-swap-btn:hover {
     background: rgb(30, 41, 59);
   }
 
@@ -397,7 +397,7 @@
     accent-color: rgb(99, 102, 241);
   }
 
-  :global(.theme-dark) .mmg-range {
+  .theme-dark .mmg-range {
     background: rgb(30, 41, 59);
   }
 
@@ -415,7 +415,7 @@
     border-top: 1px solid rgb(241, 245, 249);
   }
 
-  :global(.theme-dark) .mmg-safe-section {
+  .theme-dark .mmg-safe-section {
     border-color: rgba(30, 41, 59, 0.5);
   }
 
@@ -483,7 +483,7 @@
     border: 2px dashed rgb(226, 232, 240);
   }
 
-  :global(.theme-dark) .mmg-empty {
+  .theme-dark .mmg-empty {
     background: rgba(15, 23, 42, 0.5);
     border-color: rgb(30, 41, 59);
   }
@@ -499,7 +499,7 @@
     margin-bottom: 1.5rem;
   }
 
-  :global(.theme-dark) .mmg-empty-icon-wrap {
+  .theme-dark .mmg-empty-icon-wrap {
     background: rgba(79, 70, 229, 0.3);
   }
 
@@ -509,7 +509,7 @@
     color: rgb(99, 102, 241);
   }
 
-  :global(.theme-dark) .mmg-empty-icon-svg {
+  .theme-dark .mmg-empty-icon-svg {
     color: rgb(129, 140, 248);
   }
 
@@ -524,7 +524,7 @@
     margin-top: 0.5rem;
   }
 
-  :global(.theme-dark) .mmg-empty-title {
+  .theme-dark .mmg-empty-title {
     color: #fff;
   }
 
@@ -540,7 +540,7 @@
     }
   }
 
-  :global(.mmg-preview-card) {
+  .mmg-preview-card {
     background: rgba(255, 255, 255, 0.7);
     backdrop-filter: blur(10px);
     border-radius: 2.5rem;
@@ -550,12 +550,12 @@
     position: relative;
   }
 
-  :global(.theme-dark) :global(.mmg-preview-card) {
+  .theme-dark .mmg-preview-card {
     background: rgba(15, 23, 42, 0.7);
     border-color: rgb(30, 41, 59);
   }
 
-  :global(.mmg-card-actions) {
+  .mmg-card-actions {
     position: absolute;
     top: 1rem;
     right: 1rem;
@@ -566,11 +566,11 @@
     z-index: 10;
   }
 
-  :global(.mmg-preview-card:hover) :global(.mmg-card-actions) {
+  .mmg-preview-card:hover .mmg-card-actions {
     opacity: 1;
   }
 
-  :global(.mmg-card-action-btn) {
+  .mmg-card-action-btn {
     padding: 0.5rem;
     background: #fff;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
@@ -581,23 +581,23 @@
     display: flex;
   }
 
-  :global(.mmg-card-action-btn:hover) {
+  .mmg-card-action-btn:hover {
     transform: scale(1.1);
   }
 
-  :global(.theme-dark) :global(.mmg-card-action-btn) {
+  .theme-dark .mmg-card-action-btn {
     background: rgb(15, 23, 42);
   }
 
-  :global(.mmg-duplicate-img) {
+  .mmg-duplicate-img {
     color: rgb(99, 102, 241);
   }
 
-  :global(.mmg-replace-img) {
+  .mmg-replace-img {
     color: rgb(217, 119, 6);
   }
 
-  :global(.mmg-canvas-wrap) {
+  .mmg-canvas-wrap {
     aspect-ratio: 9/16;
     background: rgb(241, 245, 249);
     border-radius: 1.5rem;
@@ -606,42 +606,42 @@
     outline: 1px solid rgb(226, 232, 240);
   }
 
-  :global(.theme-dark) :global(.mmg-canvas-wrap) {
+  .theme-dark .mmg-canvas-wrap {
     background: rgba(15, 23, 42, 0.5);
     outline-color: rgb(30, 41, 59);
   }
 
-  :global(.mmg-canvas) {
+  .mmg-canvas {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
   }
 
-  :global(.mmg-card-body) {
+  .mmg-card-body {
     margin-top: 1.5rem;
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
   }
 
-  :global(.mmg-section) {
+  .mmg-section {
     padding-top: 1rem;
     border-top: 1px solid rgb(241, 245, 249);
   }
 
-  :global(.theme-dark) :global(.mmg-section) {
+  .theme-dark .mmg-section {
     border-color: rgba(30, 41, 59, 0.5);
   }
 
-  :global(.mmg-section-head) {
+  .mmg-section-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 0.75rem;
   }
 
-  :global(.mmg-section-label) {
+  .mmg-section-label {
     font-size: 0.625rem;
     font-weight: 900;
     text-transform: uppercase;
@@ -649,7 +649,7 @@
     color: rgb(148, 163, 184);
   }
 
-  :global(.mmg-reset-btn) {
+  .mmg-reset-btn {
     padding: 0.375rem;
     color: rgb(148, 163, 184);
     border: none;
@@ -660,22 +660,22 @@
     display: flex;
   }
 
-  :global(.mmg-reset-btn:hover) {
+  .mmg-reset-btn:hover {
     color: rgb(99, 102, 241);
     background: rgb(238, 242, 255);
   }
 
-  :global(.theme-dark) :global(.mmg-reset-btn:hover) {
+  .theme-dark .mmg-reset-btn:hover {
     background: rgba(99, 102, 241, 0.3);
   }
 
-  :global(.mmg-presets-grid) {
+  .mmg-presets-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 0.5rem;
   }
 
-  :global(.mmg-preset-btn) {
+  .mmg-preset-btn {
     padding: 0.625rem 0.5rem;
     font-size: 0.5625rem;
     font-weight: 900;
@@ -690,33 +690,33 @@
     line-height: 1.2;
   }
 
-  :global(.mmg-preset-btn:hover) {
+  .mmg-preset-btn:hover {
     background: rgb(241, 245, 249);
     border-color: rgb(199, 210, 254);
     color: rgb(79, 70, 229);
   }
 
-  :global(.mmg-preset-btn:active) {
+  .mmg-preset-btn:active {
     transform: scale(0.95);
   }
 
-  :global(.theme-dark) :global(.mmg-preset-btn) {
+  .theme-dark .mmg-preset-btn {
     background: rgb(15, 23, 42);
     border-color: rgb(30, 41, 59);
     color: rgb(148, 163, 184);
   }
 
-  :global(.theme-dark) :global(.mmg-preset-btn:hover) {
+  .theme-dark .mmg-preset-btn:hover {
     background: rgba(79, 70, 229, 0.2);
     border-color: rgba(99, 102, 241, 0.5);
     color: rgb(129, 140, 248);
   }
 
-  :global(.mmg-color-row) {
+  .mmg-color-row {
     margin-bottom: 0.75rem;
   }
 
-  :global(.mmg-color-sublabel) {
+  .mmg-color-sublabel {
     display: block;
     font-size: 0.625rem;
     font-weight: 700;
@@ -727,7 +727,7 @@
     margin-left: 0.25rem;
   }
 
-  :global(.mmg-color-field) {
+  .mmg-color-field {
     display: flex;
     align-items: center;
     gap: 0.75rem;
@@ -737,12 +737,12 @@
     border-radius: 1rem;
   }
 
-  :global(.theme-dark) :global(.mmg-color-field) {
+  .theme-dark .mmg-color-field {
     background: rgb(2, 6, 23);
     border-color: rgb(30, 41, 59);
   }
 
-  :global(.mmg-color-input) {
+  .mmg-color-input {
     width: 1.5rem;
     height: 1.5rem;
     border-radius: 0.5rem;
@@ -751,17 +751,17 @@
     cursor: pointer;
   }
 
-  :global(.mmg-color-hex) {
+  .mmg-color-hex {
     font-size: 0.75rem;
     font-weight: 700;
     color: rgb(71, 85, 105);
   }
 
-  :global(.theme-dark) :global(.mmg-color-hex) {
+  .theme-dark .mmg-color-hex {
     color: rgb(148, 163, 184);
   }
 
-  :global(.mmg-textarea) {
+  .mmg-textarea {
     width: 100%;
     padding: 0.75rem 1rem;
     background: rgb(248, 250, 252);
@@ -777,29 +777,29 @@
     color: rgb(15, 23, 42);
   }
 
-  :global(.mmg-textarea:focus) {
+  .mmg-textarea:focus {
     border-color: rgb(99, 102, 241);
   }
 
-  :global(.theme-dark) :global(.mmg-textarea) {
+  .theme-dark .mmg-textarea {
     background: rgb(2, 6, 23);
     border-color: rgb(30, 41, 59);
     color: #fff;
   }
 
-  :global(.mmg-range-grid) {
+  .mmg-range-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem 1.5rem;
   }
 
-  :global(.mmg-range-item) {
+  .mmg-range-item {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
   }
 
-  :global(.mmg-range-row) {
+  .mmg-range-row {
     display: flex;
     justify-content: space-between;
     font-size: 0.5625rem;
@@ -809,12 +809,12 @@
     color: rgb(148, 163, 184);
   }
 
-  :global(.mmg-scene-row) {
+  .mmg-scene-row {
     display: flex;
     gap: 0.5rem;
   }
 
-  :global(.mmg-scene-btn) {
+  .mmg-scene-btn {
     flex: 1;
     display: flex;
     align-items: center;
@@ -833,17 +833,17 @@
     transition: all 0.2s;
   }
 
-  :global(.mmg-scene-btn:hover) {
+  .mmg-scene-btn:hover {
     background: rgb(224, 231, 255);
   }
 
-  :global(.theme-dark) :global(.mmg-scene-btn) {
+  .theme-dark .mmg-scene-btn {
     background: rgba(79, 70, 229, 0.2);
     border-color: rgba(99, 102, 241, 0.5);
     color: rgb(129, 140, 248);
   }
 
-  :global(.mmg-clear-bg-btn) {
+  .mmg-clear-bg-btn {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -856,16 +856,16 @@
     transition: all 0.2s;
   }
 
-  :global(.mmg-clear-bg-btn:hover) {
+  .mmg-clear-bg-btn:hover {
     background: rgb(254, 226, 226);
   }
 
-  :global(.theme-dark) :global(.mmg-clear-bg-btn) {
+  .theme-dark .mmg-clear-bg-btn {
     background: rgba(239, 68, 68, 0.2);
     border-color: rgba(239, 68, 68, 0.5);
   }
 
-  :global(.mmg-delete-btn) {
+  .mmg-delete-btn {
     width: 100%;
     padding: 0.75rem;
     font-size: 0.625rem;
@@ -880,16 +880,16 @@
     transition: all 0.2s;
   }
 
-  :global(.mmg-delete-btn:hover) {
+  .mmg-delete-btn:hover {
     color: rgb(239, 68, 68);
     background: rgb(254, 242, 242);
   }
 
-  :global(.theme-dark) :global(.mmg-delete-btn:hover) {
+  .theme-dark .mmg-delete-btn:hover {
     background: rgba(239, 68, 68, 0.2);
   }
 
-  :global(.mmg-preset-swatch) {
+  .mmg-preset-swatch {
     width: 100%;
     aspect-ratio: 1;
     border-radius: 0.5rem;
@@ -899,6 +899,6 @@
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }
 
-  :global(.mmg-preset-swatch:hover) {
+  .mmg-preset-swatch:hover {
     transform: scale(1.1);
   }

package/src/tool/mobileMockupGenerator/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await mobileMockupGenerator.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/musicalTypography/i18n/de.ts

@@ -160,7 +160,7 @@ export const content: ToolLocaleContent<MusicalTypographyUI> = {
     {
       type: 'card',
       title: 'Warum "Musikalisch"',
-      html: '<p>Die Pythagoreer entdeckten, dass das Teilen einer Saite in einfache Proportionen (1:2, 2:3, 3:4) Konsonanz erzeugt. Diese Intervalle – Oktave, reine Quinte und reine Quarte – sind genau die typografischen Ratios. Du komponierst visuelle Musik.</p>',
+      html: '<p>Die Pythagoreer entdeckten, dass das Teilen einer Saite in einfache Proportionen (1:2, 2:3, 3:4) Konsonanz erzeugt. Diese Intervalle - Oktave, reine Quinte und reine Quarte - sind genau die typografischen Ratios. Du komponierst visuelle Musik.</p>',
     },
     {
       type: 'title',

package/src/tool/musicalTypography/i18n/fr.ts

@@ -155,7 +155,7 @@ export const content: ToolLocaleContent<MusicalTypographyUI> = {
     {
       type: 'card',
       title: 'La formule',
-      html: '<p>La progression est simple : <code>Taille = Base × Ratio<sup>n</sup></code>. L\'étape 0 est votre texte de base. L\'étape 1 est un petit sous-titre. L\'étape 4 ou 5 pourrait être votre H1 principal. La même constante multiplicative garantit que toutes les relations sont cohérentes.</p>',
+      html: '<p>La progression est simple: <code>Taille = Base × Ratio<sup>n</sup></code>. L\'étape 0 est votre texte de base. L\'étape 1 est un petit sous-titre. L\'étape 4 ou 5 pourrait être votre H1 principal. La même constante multiplicative garantit que toutes les relations sont cohérentes.</p>',
     },
     {
       type: 'card',

package/src/tool/musicalTypography/i18n/id.ts

@@ -160,7 +160,7 @@ export const content: ToolLocaleContent<MusicalTypographyUI> = {
     {
       type: 'card',
       title: 'Mengapa "Musikal"',
-      html: '<p>Kaum Pythagoras menemukan bahwa membagi senar dalam proporsi sederhana (1:2, 2:3, 3:4) menghasilkan bunyi yang konsonan. Interval-interval ini — oktaf, kuint sempurna, dan kuart sempurna — adalah persis rasio tipografi yang digunakan. Anda sedang menggubah musik visual.</p>',
+      html: '<p>Kaum Pythagoras menemukan bahwa membagi senar dalam proporsi sederhana (1:2, 2:3, 3:4) menghasilkan bunyi yang konsonan. Interval-interval ini - oktaf, kuint sempurna, dan kuart sempurna - adalah persis rasio tipografi yang digunakan. Anda sedang menggubah musik visual.</p>',
     },
     {
       type: 'title',

package/src/tool/musicalTypography/i18n/it.ts

@@ -160,7 +160,7 @@ export const content: ToolLocaleContent<MusicalTypographyUI> = {
     {
       type: 'card',
       title: 'Perché "Musicale"',
-      html: "<p>I pitagorici scoprirono che dividere una corda in proporzioni semplici (1:2, 2:3, 3:4) produceva suoni consonanti. Questi intervalli — ottava, quinta giusta e quarta giusta — sono esattamente i rapporti tipografici. Stai componendo musica visiva.</p>",
+      html: "<p>I pitagorici scoprirono che dividere una corda in proporzioni semplici (1:2, 2:3, 3:4) produceva suoni consonanti. Questi intervalli - ottava, quinta giusta e quarta giusta - sono esattamente i rapporti tipografici. Stai componendo musica visiva.</p>",
     },
     {
       type: 'title',

package/src/tool/musicalTypography/i18n/ko.ts

@@ -160,7 +160,7 @@ export const content: ToolLocaleContent<MusicalTypographyUI> = {
     {
       type: 'card',
       title: '왜 "음악적"인가',
-      html: '<p>피타고라스학파는 현을 단순한 비율(1:2, 2:3, 3:4)로 나누면 협화음이 생긴다는 것을 발견했습니다. 옥타브, 완전5도, 완전4도 — 이 음정들이 바로 타이포그래피 비율과 정확히 일치합니다. 당신은 시각적 음악을 작곡하고 있는 것입니다.</p>',
+      html: '<p>피타고라스학파는 현을 단순한 비율(1:2, 2:3, 3:4)로 나누면 협화음이 생긴다는 것을 발견했습니다. 옥타브, 완전5도, 완전4도 - 이 음정들이 바로 타이포그래피 비율과 정확히 일치합니다. 당신은 시각적 음악을 작곡하고 있는 것입니다.</p>',
     },
     {
       type: 'title',

package/src/tool/musicalTypography/i18n/ru.ts

@@ -8,7 +8,7 @@ const description = 'Бесплатный онлайн-инструмент дл
 
 const faqData = [
   { question: 'Что такое типографическая модульная шкала?', answer: 'Это метод определения размеров шрифтов на основе постоянного математического соотношения. Подобно музыке, где ноты имеют гармонические отношения, модульная шкала создаёт сбалансированную и предсказуемую визуальную иерархию.' },
-  { question: 'Почему использовать музыкальные интервалы для дизайна?', answer: 'Музыкальные интервалы — это пропорции, которые человеческий мозг воспринимает как гармоничные. Применение их к размерам текста создаёт визуальную структуру, которая ощущается правильной и профессиональной, а не случайно выбранной.' },
+  { question: 'Почему использовать музыкальные интервалы для дизайна?', answer: 'Музыкальные интервалы - это пропорции, которые человеческий мозг воспринимает как гармоничные. Применение их к размерам текста создаёт визуальную структуру, которая ощущается правильной и профессиональной, а не случайно выбранной.' },
   { question: 'Что такое Золотое Сечение в типографии?', answer: 'Это пропорция 1.618, известная как Золотое Сечение. Она создаёт очень драматичные и элегантные шкалы, где каждый шаг иерархии растёт экспоненциально. Идеально для портфолио или сайтов, ориентированных на искусство.' },
   { question: 'Как я могу применить шкалу в своём файле CSS?', answer: 'Инструмент генерирует CSS-переменные (токены) в формате :root { --step-N: Xrem; }. Скопируйте их в свой основной CSS-файл и используйте с var(--step-N), чтобы сохранить типографическую согласованность на всём сайте.' },
 ];
@@ -38,8 +38,8 @@ export const content: ToolLocaleContent<MusicalTypographyUI> = {
     { type: 'paragraph', html: '<strong>Музыкальная Типографическая Шкала</strong> применяет математику музыкальных интервалов к типографическому дизайну. Подобно тому, как музыкальная композиция управляется точными пропорциями, хороший дизайн выигрывает от математической структуры, которая связывает все размеры вместе.' },
     { type: 'title', text: 'Как работает модульная шкала', level: 3 },
     { type: 'grid', columns: 2 },
-    { type: 'card', title: 'Формула', html: '<p>Прогрессия простая: <code>Size = Base × Ratio<sup>n</sup></code>. Шаг 0 — это ваш базовый текст. Шаг 1 — маленький подзаголовок. Шаг 4 или 5 может быть вашим главным H1. Одна и та же постоянная умножения (соотношение) гарантирует, что все отношения согласованы.</p>' },
-    { type: 'card', title: 'Почему "Музыкальная"', html: '<p>Пифагорейцы открыли, что деление струны на простые пропорции (1:2, 2:3, 3:4) производит созвучные звуки. Эти интервалы, октава, чистая квинта и чистая кварта, — это ровно типографические соотношения. Вы сочиняете визуальную музыку.</p>' },
+    { type: 'card', title: 'Формула', html: '<p>Прогрессия простая: <code>Size = Base × Ratio<sup>n</sup></code>. Шаг 0 - это ваш базовый текст. Шаг 1 - маленький подзаголовок. Шаг 4 или 5 может быть вашим главным H1. Одна и та же постоянная умножения (соотношение) гарантирует, что все отношения согласованы.</p>' },
+    { type: 'card', title: 'Почему "Музыкальная"', html: '<p>Пифагорейцы открыли, что деление струны на простые пропорции (1:2, 2:3, 3:4) производит созвучные звуки. Эти интервалы, октава, чистая квинта и чистая кварта, - это ровно типографические соотношения. Вы сочиняете визуальную музыку.</p>' },
     { type: 'title', text: 'Выбор правильного соотношения', level: 3 },
     { type: 'tip', html: 'Для плотных интерфейсов (приборные панели, таблицы) используйте малые соотношения, такие как <code>1.125</code> или <code>1.2</code>. Для редакционных или портфельных сайтов используйте более выразительные соотношения, такие как <code>1.5</code> или <code>1.618</code>.' },
     { type: 'paragraph', html: 'Не ограничивайте шкалу только <code>font-size</code>. Те же CSS-переменные работают для <code>margin</code>, <code>padding</code> и <code>gap</code>. Когда белое пространство следует той же математической прогрессии, что и текст, дизайн достигает уровня связности, который все ощущают, но мало кто может объяснить.' },

package/src/tool/musicalTypography/musical-typography.css

@@ -16,7 +16,7 @@
     --mt-feedback-color: #059669;
   }
 
-  :global(.theme-dark) .mt-root {
+  .theme-dark .mt-root {
     --mt-card-bg: #1e293b;
     --mt-border: #334155;
     --mt-text: #f1f5f9;
@@ -65,7 +65,7 @@
     background: rgba(236, 72, 153, 0.04);
   }
 
-  :global(.theme-dark) .mt-card-header-preview {
+  .theme-dark .mt-card-header-preview {
     background: rgba(236, 72, 153, 0.08);
   }
 
@@ -168,7 +168,7 @@
     gap: 0.25rem;
   }
 
-  :global(.mt-scale-row) {
+  .mt-scale-row {
     display: flex;
     justify-content: space-between;
     font-size: 0.8125rem;
@@ -176,7 +176,7 @@
     padding: 0.125rem 0;
   }
 
-  :global(.mt-scale-base) {
+  .mt-scale-base {
     color: var(--mt-base-color);
     font-weight: 700;
     background: var(--mt-accent-bg);
@@ -217,12 +217,12 @@
     border-radius: 9999px;
   }
 
-  :global(.mt-prev-item) {
+  .mt-prev-item {
     border-bottom: 1px solid var(--mt-border);
     padding-bottom: 1rem;
   }
 
-  :global(.mt-prev-meta) {
+  .mt-prev-meta {
     display: flex;
     align-items: baseline;
     gap: 0.5rem;
@@ -231,7 +231,7 @@
     color: var(--mt-muted);
   }
 
-  :global(.mt-prev-text) {
+  .mt-prev-text {
     font-weight: 700;
     color: var(--mt-text);
     white-space: nowrap;
@@ -240,7 +240,7 @@
     margin: 0;
   }
 
-  :global(.mt-sub) {
+  .mt-sub {
     color: var(--mt-muted);
     margin: 0.25rem 0 0;
     white-space: nowrap;

package/src/tool/musicalTypography/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await musicalTypography.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}