@edc-motor/ui 0.4.20 → 0.4.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.20",
+  "version": "0.4.21",
   "description": "EdC Motor — componentes públicos Vue 3 + tokens SCSS para webs de juegos de mesa (paquete fuente: lo compila el consumidor con Vite)",
   "license": "GPL-3.0-only",
   "type": "module",

package/scss/_tokens.scss

@@ -113,6 +113,11 @@ $input-border-hover: $border-strong;
 $input-border-focus: $accent-500;
 $input-focus-ring: $focus-ring;
 
+// Separación entre los ELEMENTOS de un bloque del CRM (título, subtítulo,
+// texto, botón…): un único token para todos los huecos interiores de los
+// bloques (antes cada zona llevaba el suyo: 20/16/12px).
+$block-gap: $space-6; // 24px
+
 // ---------------------------------------------------------
 // Texto que CONTRASTA con un fondo arbitrario (el acento elegido en
 // Ajustes, el color de una acción…): el navegador resuelve claro u oscuro

package/scss/components/_blocks.scss

@@ -11,7 +11,7 @@
     margin: 0 auto;
     padding: 0 $space-4;
     display: grid;
-    gap: $space-5; // separación entre los elementos del bloque
+    gap: $block-gap; // separación entre los elementos del bloque
   }
 
   // Anchura del contenido (campo común `width`): coherente entre bloques.
@@ -61,7 +61,7 @@
     box-shadow: $shadow-sm;
     padding: $space-8;
     display: grid;
-    gap: $space-4;
+    gap: $block-gap;
 
     .edc-button { justify-self: start; text-decoration: none; }
   }
@@ -166,9 +166,13 @@
   // Cuerpo del CTA (texto + botón) dentro de su media-layout.
   &__cta-body {
     display: grid;
-    gap: $space-3;
+    gap: $block-gap;
     justify-items: start;
     align-content: center; // centrado frente a la imagen sangrada
+
+    // El botón respira más que el resto: su hueco total (gap + margen)
+    // casi DOBLA la separación normal entre elementos del bloque.
+    .block-button { margin-top: $space-5; }
   }
 
   // Botón del CTA: en estrecho va SIEMPRE centrado (como el del related);