From 4212e8168ca2a21f28f82d7fcac2d78ac5776754 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Mon, 23 Mar 2026 00:50:36 +0100
Subject: [PATCH] style(vcen-edit): unifica estilos de metas fields con el
 editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cambia clases inline a clases CSS estándar (field-input, ve-label)
- 19 componentes adaptados al estilo visual del editor
- Elimina código duplicado (variables cls innecesarias)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/vcen-edit/comps/metas/AudioField.svelte   | 18 ++++++++---------
 src/vcen-edit/comps/metas/BooleanField.svelte |  2 +-
 src/vcen-edit/comps/metas/ColorField.svelte   |  4 ++--
 .../comps/metas/CoordinatesField.svelte       | 14 ++++++-------
 .../comps/metas/CurrencyField.svelte          | 12 +++++------
 src/vcen-edit/comps/metas/DateField.svelte    |  4 ++--
 .../comps/metas/DateTimeField.svelte          |  4 ++--
 src/vcen-edit/comps/metas/EmailField.svelte   |  4 ++--
 src/vcen-edit/comps/metas/FileField.svelte    |  4 ++--
 src/vcen-edit/comps/metas/ImageField.svelte   | 18 ++++++++---------
 .../comps/metas/MultiSelectField.svelte       | 10 +++++-----
 src/vcen-edit/comps/metas/NumberField.svelte  |  4 ++--
 src/vcen-edit/comps/metas/PdfField.svelte     | 20 +++++++++----------
 src/vcen-edit/comps/metas/PhoneField.svelte   | 10 ++++------
 src/vcen-edit/comps/metas/SelectField.svelte  | 12 +++++------
 src/vcen-edit/comps/metas/SlugField.svelte    |  4 ++--
 src/vcen-edit/comps/metas/StringField.svelte  |  4 ++--
 src/vcen-edit/comps/metas/UrlField.svelte     |  4 ++--
 src/vcen-edit/comps/metas/VideoField.svelte   | 14 ++++++-------
 19 files changed, 76 insertions(+), 90 deletions(-)

diff --git a/src/vcen-edit/comps/metas/AudioField.svelte b/src/vcen-edit/comps/metas/AudioField.svelte
index 1296026..6ca4f06 100644
--- a/src/vcen-edit/comps/metas/AudioField.svelte
+++ b/src/vcen-edit/comps/metas/AudioField.svelte
@@ -9,8 +9,6 @@
         onFieldChange: (field: MetadataField) => void;
     } = $props();
 
-    const cls = 'rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full';
-
     function handle(e: Event, action: string): void {
         const str = (e.target as HTMLInputElement).value;
         switch (action) {
@@ -23,20 +21,20 @@
 </script>
 
 <div class="flex flex-col gap-1 w-full">
-    <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
-    <input type="text" value={field.value.url} oninput={(e) => handle(e, 'url')} class="{cls} font-mono" placeholder="/ruta o https://…" />
+    <label class="ve-label">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
+    <input type="text" value={field.value.url} oninput={(e) => handle(e, 'url')} class="field-input font-mono" placeholder="/ruta o https://..." />
 </div>
 <div class="flex gap-3">
     <div class="flex flex-col gap-1 flex-1">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.audDuration')}</label>
-        <input type="number" value={field.value.duration ?? ''} oninput={(e) => handle(e, 'duration')} class={cls} placeholder="s" />
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.audDuration')}</label>
+        <input type="number" value={field.value.duration ?? ''} oninput={(e) => handle(e, 'duration')} class="field-input" placeholder="s" />
     </div>
     <div class="flex flex-col gap-1 flex-1">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.audBitrate')}</label>
-        <input type="number" value={field.value.bitrate ?? ''} oninput={(e) => handle(e, 'bitrate')} class={cls} placeholder="kbps" />
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.audBitrate')}</label>
+        <input type="number" value={field.value.bitrate ?? ''} oninput={(e) => handle(e, 'bitrate')} class="field-input" placeholder="kbps" />
     </div>
     <div class="flex flex-col gap-1 w-28">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.audChannels')}</label>
-        <input type="number" value={field.value.channels ?? ''} oninput={(e) => handle(e, 'channels')} class={cls} placeholder="1/2" />
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.audChannels')}</label>
+        <input type="number" value={field.value.channels ?? ''} oninput={(e) => handle(e, 'channels')} class="field-input" placeholder="1/2" />
     </div>
 </div>
diff --git a/src/vcen-edit/comps/metas/BooleanField.svelte b/src/vcen-edit/comps/metas/BooleanField.svelte
index 8ef92d2..fad0a17 100644
--- a/src/vcen-edit/comps/metas/BooleanField.svelte
+++ b/src/vcen-edit/comps/metas/BooleanField.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <div class="flex items-center gap-4 py-1">
-    <input type="checkbox" checked={field.value} onchange={onChange} class="h-4 w-8 rounded-full cursor-pointer appearance-none bg-gray-700 checked:bg-indigo-600 transition-colors" />
+    <input type="checkbox" checked={field.value} onchange={onChange} class="ve-checkbox" />
     <span class="text-sm text-gray-200">{field.value
         ? glob.t('vcen.editor.mtas.field.boolTrue')
         : glob.t('vcen.editor.mtas.field.boolFalse')
diff --git a/src/vcen-edit/comps/metas/ColorField.svelte b/src/vcen-edit/comps/metas/ColorField.svelte
index bee4042..bad003a 100644
--- a/src/vcen-edit/comps/metas/ColorField.svelte
+++ b/src/vcen-edit/comps/metas/ColorField.svelte
@@ -15,8 +15,8 @@
 
 <div class="flex items-end gap-4">
     <div class="flex flex-col gap-1 flex-1">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.colorHex')}</label>
-        <input type="text" value={field.value.hex} oninput={onInput} class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full font-mono uppercase" placeholder="#000000" maxlength="9" />
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.colorHex')}</label>
+        <input type="text" value={field.value.hex} oninput={onInput} class="field-input font-mono uppercase" placeholder="#000000" maxlength="9" />
     </div>
     <input type="color" value={field.value.hex} oninput={onInput}
            class="h-10 w-14 cursor-pointer rounded-lg border border-gray-700 bg-transparent p-0.5" />
diff --git a/src/vcen-edit/comps/metas/CoordinatesField.svelte b/src/vcen-edit/comps/metas/CoordinatesField.svelte
index ece1f1e..b3bce4d 100644
--- a/src/vcen-edit/comps/metas/CoordinatesField.svelte
+++ b/src/vcen-edit/comps/metas/CoordinatesField.svelte
@@ -8,8 +8,6 @@
         onFieldChange: (field: MetadataField) => void;
     } = $props();
 
-    const cls = 'rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full';
-
     function handle(e: Event, action: string): void {
         const str = (e.target as HTMLInputElement).value;
         switch (action) {
@@ -22,15 +20,15 @@
 
 <div class="flex gap-3">
     <div class="flex flex-col gap-1 flex-1">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.coordLat')}</label>
-        <input type="number" step="any" value={field.value.lat} oninput={(e) => handle(e, 'lat')} class={cls} placeholder="0" />
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.coordLat')}</label>
+        <input type="number" step="any" value={field.value.lat} oninput={(e) => handle(e, 'lat')} class="field-input" placeholder="0" />
     </div>
     <div class="flex flex-col gap-1 flex-1">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.coordLng')}</label>
-        <input type="number" step="any" value={field.value.lng} oninput={(e) => handle(e, 'lng')} class={cls} placeholder="0" />
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.coordLng')}</label>
+        <input type="number" step="any" value={field.value.lng} oninput={(e) => handle(e, 'lng')} class="field-input" placeholder="0" />
     </div>
     <div class="flex flex-col gap-1 w-24">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.coordZoom')}</label>
-        <input type="number" value={field.value.zoom ?? ''} oninput={(e) => handle(e, 'zoom')} class={cls} placeholder="12" />
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.coordZoom')}</label>
+        <input type="number" value={field.value.zoom ?? ''} oninput={(e) => handle(e, 'zoom')} class="field-input" placeholder="12" />
     </div>
 </div>
diff --git a/src/vcen-edit/comps/metas/CurrencyField.svelte b/src/vcen-edit/comps/metas/CurrencyField.svelte
index e86d58e..ca8ff80 100644
--- a/src/vcen-edit/comps/metas/CurrencyField.svelte
+++ b/src/vcen-edit/comps/metas/CurrencyField.svelte
@@ -8,8 +8,6 @@
         onFieldChange: (field: MetadataField) => void;
     } = $props();
 
-    const cls = 'rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full';
-
     let currencies = $derived(glob.curr.getCurrencies());
     let formatted  = $derived((() => {
         const { amount, currency } = field.value;
@@ -31,20 +29,20 @@
 
 <div class="flex gap-3">
     <div class="flex flex-col gap-1 flex-1">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.amountLabel')}</label>
-        <input type="number" value={field.value.amount} oninput={(e) => handle(e, 'amount')} class={cls} />
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.amountLabel')}</label>
+        <input type="number" value={field.value.amount} oninput={(e) => handle(e, 'amount')} class="field-input" />
         {#if formatted}
             <span class="text-xs text-gray-500 mt-0.5">{formatted}</span>
         {/if}
     </div>
     <div class="flex flex-col gap-1 w-28">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.currencyLabel')}</label>
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.currencyLabel')}</label>
         {#if currencies.length <= 1}
-            <div class="{cls} flex items-center font-mono text-gray-500 cursor-default select-none">
+            <div class="field-input flex items-center font-mono text-gray-500 cursor-default select-none">
                 {field.value.currency}
             </div>
         {:else}
-            <select class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full font-mono uppercase"
+            <select class="field-input font-mono uppercase"
                     value={field.value.currency}
                     onchange={(e) => handle(e, 'currency')}>
                 {#each currencies as code}
diff --git a/src/vcen-edit/comps/metas/DateField.svelte b/src/vcen-edit/comps/metas/DateField.svelte
index f37086d..ae50d1a 100644
--- a/src/vcen-edit/comps/metas/DateField.svelte
+++ b/src/vcen-edit/comps/metas/DateField.svelte
@@ -18,8 +18,8 @@
 </script>
 
 <div class="flex flex-col gap-1 w-full">
-    <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.types.date')}</label>
-    <input type="date" value={field.value || todayISO()} oninput={onInput} class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full" />
+    <label class="ve-label">{glob.t('vcen.editor.mtas.types.date')}</label>
+    <input type="date" value={field.value || todayISO()} oninput={onInput} class="field-input" />
     {#if formatted}
         <span class="text-xs text-gray-500 mt-0.5">{formatted}</span>
     {/if}
diff --git a/src/vcen-edit/comps/metas/DateTimeField.svelte b/src/vcen-edit/comps/metas/DateTimeField.svelte
index 5d6499c..2ef9518 100644
--- a/src/vcen-edit/comps/metas/DateTimeField.svelte
+++ b/src/vcen-edit/comps/metas/DateTimeField.svelte
@@ -18,8 +18,8 @@
 </script>
 
 <div class="flex flex-col gap-1 w-full">
-    <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.types.datetime')}</label>
-    <input type="datetime-local" value={(field.value || nowISO()).replace('Z', '')} oninput={onInput} class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full" />
+    <label class="ve-label">{glob.t('vcen.editor.mtas.types.datetime')}</label>
+    <input type="datetime-local" value={(field.value || nowISO()).replace('Z', '')} oninput={onInput} class="field-input" />
     {#if formatted}
         <span class="text-xs text-gray-500 mt-0.5">{formatted}</span>
     {/if}
diff --git a/src/vcen-edit/comps/metas/EmailField.svelte b/src/vcen-edit/comps/metas/EmailField.svelte
index 7b056a9..27c18db 100644
--- a/src/vcen-edit/comps/metas/EmailField.svelte
+++ b/src/vcen-edit/comps/metas/EmailField.svelte
@@ -14,6 +14,6 @@
 </script>
 
 <div class="flex flex-col gap-1 w-full">
-    <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.types.email')}</label>
-    <input type="email" value={field.value} oninput={onInput} class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full" placeholder="user@example.com" />
+    <label class="ve-label">{glob.t('vcen.editor.mtas.types.email')}</label>
+    <input type="email" value={field.value} oninput={onInput} class="field-input" placeholder="user@example.com" />
 </div>
diff --git a/src/vcen-edit/comps/metas/FileField.svelte b/src/vcen-edit/comps/metas/FileField.svelte
index 4f2b85b..e908a12 100644
--- a/src/vcen-edit/comps/metas/FileField.svelte
+++ b/src/vcen-edit/comps/metas/FileField.svelte
@@ -14,6 +14,6 @@
 </script>
 
 <div class="flex flex-col gap-1 w-full">
-    <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
-    <input type="text" value={field.value.url} oninput={onInput} class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full font-mono" placeholder="/ruta o https://…" />
+    <label class="ve-label">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
+    <input type="text" value={field.value.url} oninput={onInput} class="field-input font-mono" placeholder="/ruta o https://..." />
 </div>
diff --git a/src/vcen-edit/comps/metas/ImageField.svelte b/src/vcen-edit/comps/metas/ImageField.svelte
index 5151134..18293f7 100644
--- a/src/vcen-edit/comps/metas/ImageField.svelte
+++ b/src/vcen-edit/comps/metas/ImageField.svelte
@@ -8,8 +8,6 @@
         onFieldChange: (field: MetadataField) => void;
     } = $props();
 
-    const cls = 'rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full';
-
     function handle(e: Event, action: string): void {
         const inp = e.target as HTMLInputElement;
         const sel = e.target as HTMLSelectElement;
@@ -24,8 +22,8 @@
 </script>
 
 <div class="flex flex-col gap-1 w-full">
-    <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
-    <input type="text" value={field.value.url} oninput={(e) => handle(e, 'url')} class="{cls} font-mono" placeholder="/ruta o https://…" />
+    <label class="ve-label">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
+    <input type="text" value={field.value.url} oninput={(e) => handle(e, 'url')} class="field-input font-mono" placeholder="/ruta o https://..." />
 </div>
 {#if field.value.url}
     <figure class="rounded-lg overflow-hidden border border-gray-800">
@@ -34,16 +32,16 @@
 {/if}
 <div class="flex gap-3">
     <div class="flex flex-col gap-1 flex-1">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.imgWidth')}</label>
-        <input type="number" value={field.value.width ?? ''} oninput={(e) => handle(e, 'width')} class={cls} placeholder="px" />
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.imgWidth')}</label>
+        <input type="number" value={field.value.width ?? ''} oninput={(e) => handle(e, 'width')} class="field-input" placeholder="px" />
     </div>
     <div class="flex flex-col gap-1 flex-1">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.imgHeight')}</label>
-        <input type="number" value={field.value.height ?? ''} oninput={(e) => handle(e, 'height')} class={cls} placeholder="px" />
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.imgHeight')}</label>
+        <input type="number" value={field.value.height ?? ''} oninput={(e) => handle(e, 'height')} class="field-input" placeholder="px" />
     </div>
     <div class="flex flex-col gap-1 w-32">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.imgFormat')}</label>
-        <select class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full" value={field.value.format ?? ''} onchange={(e) => handle(e, 'format')}>
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.imgFormat')}</label>
+        <select class="field-input" value={field.value.format ?? ''} onchange={(e) => handle(e, 'format')}>
             <option value="">—</option>
             <option value="jpeg">JPEG</option>
             <option value="png">PNG</option>
diff --git a/src/vcen-edit/comps/metas/MultiSelectField.svelte b/src/vcen-edit/comps/metas/MultiSelectField.svelte
index ffcb8de..f5a8e87 100644
--- a/src/vcen-edit/comps/metas/MultiSelectField.svelte
+++ b/src/vcen-edit/comps/metas/MultiSelectField.svelte
@@ -22,8 +22,8 @@
 
 <div class="flex flex-col gap-1.5">
     <div class="flex items-center justify-between">
-        <span class="text-xs text-gray-500">{glob.t('vcen.editor.mtas.editor.selectOptions')}</span>
-        <button type="button" class="inline-flex items-center gap-1 px-2 py-1 text-xs rounded text-gray-500 hover:text-gray-300 hover:bg-gray-800 transition-colors"
+        <span class="ve-label">{glob.t('vcen.editor.mtas.editor.selectOptions')}</span>
+        <button type="button" class="text-gray-500 hover:text-gray-300 text-xs"
                 onclick={() => onFieldChange({ ...field, options: [...field.options, { value: `opt${field.options.length + 1}`, label: '' }] })}>
             <svg class="h-3 w-3 fill-current" viewBox="0 0 16 16" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M8 2v12M2 8h12"/></svg>
             {glob.t('vcen.editor.mtas.editor.selectAddOpt')}
@@ -38,17 +38,17 @@
                         type="checkbox"
                         checked={field.value.includes(opt.value)}
                         onchange={(e) => handle(e, 'chk', opt.value)}
-                        class="h-3.5 w-3.5 rounded border border-gray-600 bg-gray-800 checked:bg-indigo-600 checked:border-indigo-600 cursor-pointer appearance-none shrink-0"
+                        class="ve-checkbox"
                 />
                 <input
                         type="text"
                         value={opt.value} oninput={(e) => handle(e, 'opt-val', i)}
-                        class="rounded border border-gray-700 bg-gray-800 px-2 py-1 text-xs text-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 flex-1 font-mono" placeholder={glob.t('vcen.editor.mtas.editor.selectOptValue')}
+                        class="field-input text-xs flex-1 font-mono" placeholder={glob.t('vcen.editor.mtas.editor.selectOptValue')}
                 />
                 <input
                         type="text"
                         value={opt.label} oninput={(e) => handle(e, 'opt-lbl', i)}
-                        class="rounded border border-gray-700 bg-gray-800 px-2 py-1 text-xs text-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 flex-1"           placeholder={glob.t('vcen.editor.mtas.editor.selectOptLabel')}
+                        class="field-input text-xs flex-1"           placeholder={glob.t('vcen.editor.mtas.editor.selectOptLabel')}
                 />
                 <button
                         type="button" class="flex items-center justify-center w-6 h-6 rounded text-red-400 hover:bg-gray-800 transition-colors"
diff --git a/src/vcen-edit/comps/metas/NumberField.svelte b/src/vcen-edit/comps/metas/NumberField.svelte
index c10bff4..35fe0d2 100644
--- a/src/vcen-edit/comps/metas/NumberField.svelte
+++ b/src/vcen-edit/comps/metas/NumberField.svelte
@@ -17,12 +17,12 @@
 </script>
 
 <div class="flex flex-col gap-1 w-full">
-    <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.types.number')}</label>
+    <label class="ve-label">{glob.t('vcen.editor.mtas.types.number')}</label>
     <input
             type="number"
             value={field.value}
             oninput={onInput}
-            class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"
+            class="field-input"
     />
     {#if formatted}
         <span class="text-xs text-gray-500 mt-0.5">{formatted}</span>
diff --git a/src/vcen-edit/comps/metas/PdfField.svelte b/src/vcen-edit/comps/metas/PdfField.svelte
index f5768c7..fefd55e 100644
--- a/src/vcen-edit/comps/metas/PdfField.svelte
+++ b/src/vcen-edit/comps/metas/PdfField.svelte
@@ -8,8 +8,6 @@
         onFieldChange: (field: MetadataField) => void;
     } = $props();
 
-    const cls = 'rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full';
-
     function handle(e: Event, action: string): void {
         const str = (e.target as HTMLInputElement).value;
         switch (action) {
@@ -22,38 +20,38 @@
 </script>
 
 <div class="flex flex-col gap-1 w-full">
-    <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
+    <label class="ve-label">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
     <input
             type="text"
             value={field.value.url} oninput={(e) => handle(e, 'url')}
-            class="{cls} font-mono"
-            placeholder="/ruta o https://…"
+            class="field-input font-mono"
+            placeholder="/ruta o https://..."
     />
 </div>
 <div class="flex gap-3">
     <div class="flex flex-col gap-1 w-28">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.pdfPages')}</label>
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.pdfPages')}</label>
         <input
                 type="number"
                 value={field.value.pages ?? ''}
-                oninput={(e) => handle(e, 'pages')} class={cls}
+                oninput={(e) => handle(e, 'pages')} class="field-input"
         />
     </div>
     <div class="flex flex-col gap-1 flex-1">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.pdfAuthor')}</label>
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.pdfAuthor')}</label>
         <input
                 type="text"
                 value={field.value.author ?? ''}
-                oninput={(e) => handle(e, 'author')} class={cls}
+                oninput={(e) => handle(e, 'author')} class="field-input"
         />
     </div>
     <div class="flex flex-col gap-1 flex-1">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.pdfTitle')}</label>
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.pdfTitle')}</label>
         <input
                 type="text"
                 value={field.value.title ?? ''}
                 oninput={(e) => handle(e, 'title')}
-                class={cls}
+                class="field-input"
         />
     </div>
 </div>
diff --git a/src/vcen-edit/comps/metas/PhoneField.svelte b/src/vcen-edit/comps/metas/PhoneField.svelte
index b6cf6e5..99138a9 100644
--- a/src/vcen-edit/comps/metas/PhoneField.svelte
+++ b/src/vcen-edit/comps/metas/PhoneField.svelte
@@ -8,8 +8,6 @@
         onFieldChange: (field: MetadataField) => void;
     } = $props();
 
-    const cls = 'rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full';
-
     function handle(e: Event, action: string): void {
         const str = (e.target as HTMLInputElement).value;
         switch (action) {
@@ -21,22 +19,22 @@
 
 <div class="flex gap-3">
     <div class="flex flex-col gap-1 w-28">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.phoneCode')}</label>
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.phoneCode')}</label>
         <input
                 type="text"
                 value={field.value.countryCode ?? ''}
                 oninput={(e) => handle(e, 'code')}
-                class="{cls} font-mono"
+                class="field-input font-mono"
                 placeholder="+34"
         />
     </div>
     <div class="flex flex-col gap-1 flex-1">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.phoneNumber')}</label>
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.phoneNumber')}</label>
         <input
                 type="tel"
                 value={field.value.number}
                 oninput={(e) => handle(e, 'number')}
-                class={cls} placeholder="600 000 000"
+                class="field-input" placeholder="600 000 000"
         />
     </div>
 </div>
diff --git a/src/vcen-edit/comps/metas/SelectField.svelte b/src/vcen-edit/comps/metas/SelectField.svelte
index 6875ba6..86d5c2e 100644
--- a/src/vcen-edit/comps/metas/SelectField.svelte
+++ b/src/vcen-edit/comps/metas/SelectField.svelte
@@ -22,8 +22,8 @@
 </script>
 
 <div class="flex flex-col gap-1 w-full">
-    <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.selectValue')}</label>
-    <select class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full" value={field.value ?? ''} onchange={(e) => handle(e, 'val')}>
+    <label class="ve-label">{glob.t('vcen.editor.mtas.editor.selectValue')}</label>
+    <select class="field-input" value={field.value ?? ''} onchange={(e) => handle(e, 'val')}>
         <option value="">—</option>
         {#each field.options as opt}
             <option value={opt.value}>{opt.label || opt.value}</option>
@@ -32,10 +32,10 @@
 </div>
 <div class="flex flex-col gap-1.5">
     <div class="flex items-center justify-between">
-        <span class="text-xs text-gray-500">{glob.t('vcen.editor.mtas.editor.selectOptions')}</span>
+        <span class="ve-label">{glob.t('vcen.editor.mtas.editor.selectOptions')}</span>
         <button
                 type="button"
-                class="inline-flex items-center gap-1 px-2 py-1 text-xs rounded text-gray-500 hover:text-gray-300 hover:bg-gray-800 transition-colors"
+                class="text-gray-500 hover:text-gray-300 text-xs"
                 onclick={() => onFieldChange({ ...field, options: [...field.options, { value: `opt${field.options.length + 1}`, label: '' }] })}
         >
             <svg class="h-3 w-3 fill-current" viewBox="0 0 16 16" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
@@ -53,14 +53,14 @@
                         type="text"
                         value={opt.value}
                         oninput={(e) => handle(e, 'opt-val', i)}
-                        class="rounded border border-gray-700 bg-gray-800 px-2 py-1 text-xs text-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 flex-1 font-mono"
+                        class="field-input text-xs flex-1 font-mono"
                         placeholder={glob.t('vcen.editor.mtas.editor.selectOptValue')}
                 />
                 <input
                         type="text"
                         value={opt.label}
                         oninput={(e) => handle(e, 'opt-lbl', i)}
-                        class="rounded border border-gray-700 bg-gray-800 px-2 py-1 text-xs text-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 flex-1"
+                        class="field-input text-xs flex-1"
                         placeholder={glob.t('vcen.editor.mtas.editor.selectOptLabel')}
                 />
                 <button
diff --git a/src/vcen-edit/comps/metas/SlugField.svelte b/src/vcen-edit/comps/metas/SlugField.svelte
index 1120ba8..067f708 100644
--- a/src/vcen-edit/comps/metas/SlugField.svelte
+++ b/src/vcen-edit/comps/metas/SlugField.svelte
@@ -15,11 +15,11 @@
 </script>
 
 <div class="flex flex-col gap-1 w-full">
-    <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.types.slug')}</label>
+    <label class="ve-label">{glob.t('vcen.editor.mtas.types.slug')}</label>
     <input
             type="text"
             value={field.value} oninput={onInput}
-            class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full font-mono"
+            class="field-input font-mono"
             placeholder="my-slug"
     />
 </div>
diff --git a/src/vcen-edit/comps/metas/StringField.svelte b/src/vcen-edit/comps/metas/StringField.svelte
index cd8ce79..13be057 100644
--- a/src/vcen-edit/comps/metas/StringField.svelte
+++ b/src/vcen-edit/comps/metas/StringField.svelte
@@ -14,13 +14,13 @@
 </script>
 
 <div class="flex flex-col gap-1 w-full">
-    <label class="text-xs font-medium text-gray-500">
+    <label class="ve-label">
         {glob.t('vcen.editor.mtas.types.string')}
     </label>
     <input
             type="text"
             value={field.value}
-            oninput={onInput} class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"
+            oninput={onInput} class="field-input"
             placeholder="Texto…"
     />
 </div>
diff --git a/src/vcen-edit/comps/metas/UrlField.svelte b/src/vcen-edit/comps/metas/UrlField.svelte
index ef3f524..e06450e 100644
--- a/src/vcen-edit/comps/metas/UrlField.svelte
+++ b/src/vcen-edit/comps/metas/UrlField.svelte
@@ -14,6 +14,6 @@
 </script>
 
 <div class="flex flex-col gap-1 w-full">
-    <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.types.url')}</label>
-    <input type="url" value={field.value} oninput={onInput} class="rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full font-mono" placeholder="https://…" />
+    <label class="ve-label">{glob.t('vcen.editor.mtas.types.url')}</label>
+    <input type="url" value={field.value} oninput={onInput} class="field-input font-mono" placeholder="https://..." />
 </div>
diff --git a/src/vcen-edit/comps/metas/VideoField.svelte b/src/vcen-edit/comps/metas/VideoField.svelte
index 3b01553..42bf3b7 100644
--- a/src/vcen-edit/comps/metas/VideoField.svelte
+++ b/src/vcen-edit/comps/metas/VideoField.svelte
@@ -8,8 +8,6 @@
         onFieldChange: (field: MetadataField) => void;
     } = $props();
 
-    const cls = 'rounded border border-gray-700 bg-gray-800 px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full';
-
     function handle(e: Event, action: string): void {
         const str = (e.target as HTMLInputElement).value;
         switch (action) {
@@ -21,16 +19,16 @@
 </script>
 
 <div class="flex flex-col gap-1 w-full">
-    <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
-    <input type="text" value={field.value.url} oninput={(e) => handle(e, 'url')} class="{cls} font-mono" placeholder="/ruta o https://…" />
+    <label class="ve-label">{glob.t('vcen.editor.mtas.editor.mediaUrlLabel')}</label>
+    <input type="text" value={field.value.url} oninput={(e) => handle(e, 'url')} class="field-input font-mono" placeholder="/ruta o https://..." />
 </div>
 <div class="flex gap-3">
     <div class="flex flex-col gap-1 flex-1">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.vidDuration')}</label>
-        <input type="number" value={field.value.duration ?? ''} oninput={(e) => handle(e, 'duration')} class={cls} placeholder="s" />
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.vidDuration')}</label>
+        <input type="number" value={field.value.duration ?? ''} oninput={(e) => handle(e, 'duration')} class="field-input" placeholder="s" />
     </div>
     <div class="flex flex-col gap-1 flex-1">
-        <label class="text-xs font-medium text-gray-500">{glob.t('vcen.editor.mtas.editor.vidPoster')}</label>
-        <input type="text" value={field.value.poster ?? ''} oninput={(e) => handle(e, 'poster')} class="{cls} font-mono" placeholder="https://…" />
+        <label class="ve-label">{glob.t('vcen.editor.mtas.editor.vidPoster')}</label>
+        <input type="text" value={field.value.poster ?? ''} oninput={(e) => handle(e, 'poster')} class="field-input font-mono" placeholder="https://..." />
     </div>
 </div>