From 6086070891e658e235d85e3b0760bb6019eb30bd Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Fri, 26 Jun 2026 08:57:15 -0300
Subject: [PATCH] style: enhance button showcase layout and add disabled state
 examples

---
 .../reutilizables-test-page.component.html    | 39 ++++++++++++++++---
 .../reutilizables-test-page.component.scss    | 20 ++++++++++
 .../components/button/button.component.scss   |  2 +-
 3 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
index 7d68cfd..e436174 100644
--- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
+++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
@@ -7,12 +7,39 @@
         Pagina dedicada a probar variantes de los componentes compartidos.
       </p>
 
-      <div class="button-grid">
-        <app-button>Primary</app-button>
-        <app-button variant="secondary">Secondary</app-button>
-        <app-button variant="danger">Danger</app-button>
-        <app-button variant="danger-secondary">Danger secondary</app-button>
-        <app-button variant="cancel">Cancel</app-button>
+      <div class="button-showcase">
+        <div class="button-group">
+          <h2>Comunes</h2>
+          <div class="button-grid">
+            <app-button>Primary</app-button>
+            <app-button variant="secondary">Secondary</app-button>
+            <app-button variant="danger">Danger</app-button>
+            <app-button variant="danger-secondary">Danger secondary</app-button>
+            <app-button variant="cancel">Cancel</app-button>
+          </div>
+        </div>
+
+        <div class="button-group">
+          <h2>Disabled</h2>
+          <div class="button-grid">
+            <app-button [disabled]="true">Primary</app-button>
+            <app-button variant="secondary" [disabled]="true">Secondary</app-button>
+            <app-button variant="danger" [disabled]="true">Danger</app-button>
+            <app-button variant="danger-secondary" [disabled]="true">Danger secondary</app-button>
+            <app-button variant="cancel" [disabled]="true">Cancel</app-button>
+          </div>
+        </div>
+
+        <div class="button-group">
+          <h2>Una letra</h2>
+          <div class="button-grid button-grid--single-char">
+            <app-button>A</app-button>
+            <app-button variant="secondary">B</app-button>
+            <app-button variant="danger">C</app-button>
+            <app-button variant="danger-secondary">D</app-button>
+            <app-button variant="cancel">E</app-button>
+          </div>
+        </div>
       </div>
 
       <hr class="section-divider" />
diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
index b3496c0..5cfdf9d 100644
--- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
+++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
@@ -35,6 +35,26 @@ h1 {
   gap: 0.75rem;
 }
 
+.button-showcase {
+  display: grid;
+  gap: 1.25rem;
+}
+
+.button-group {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.button-group h2 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.button-grid--single-char app-button {
+  min-width: 3rem;
+}
+
 .section-divider {
   margin: 2rem 0;
 }
diff --git a/src/app/shared/components/button/button.component.scss b/src/app/shared/components/button/button.component.scss
index 1622c44..b49f426 100644
--- a/src/app/shared/components/button/button.component.scss
+++ b/src/app/shared/components/button/button.component.scss
@@ -8,7 +8,7 @@
 
 .btn {
   min-height: 40px;
-  font-weight: 400;
+  font-weight: 700;
   font-size:15px;
 }