fix: settings cards with the page's padding and compact buttons

The Git, automations, webhooks and import cards had no inner padding and
oversized buttons, because the settings page's styles do not reach child
components; they now share a stylesheet with the same pills. The template
button gets its own column instead of squeezing the type's name.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

libs/web/tracker/presenters/src/lib/pages/settings.page.ts

@@ -347,16 +347,6 @@ function idFrom(name: string): string {
                         "
                       />
                       <code class="ts-id">{{ type.id }}</code>
-                      <button
-                        type="button"
-                        class="ts-plain-link ts-template-toggle"
-                        [attr.aria-expanded]="openTemplate() === i"
-                        (click)="
-                          openTemplate.set(openTemplate() === i ? null : i)
-                        "
-                      >
-                        Plantilla{{ hasTemplate(type) ? ' ●' : '' }}
-                      </button>
                     </span>
                     <select
                       class="ts-input"
@@ -388,6 +378,18 @@ function idFrom(name: string): string {
                         </option>
                       }
                     </select>
+                    <button
+                      type="button"
+                      class="ts-add ts-template-toggle"
+                      [class.has-template]="hasTemplate(type)"
+                      [attr.aria-expanded]="openTemplate() === i"
+                      [attr.aria-label]="'Plantilla de ' + type.name"
+                      (click)="
+                        openTemplate.set(openTemplate() === i ? null : i)
+                      "
+                    >
+                      Plantilla{{ hasTemplate(type) ? ' ●' : '' }}
+                    </button>
                     <ng-container
                       [ngTemplateOutlet]="archive"
                       [ngTemplateOutletContext]="{
@@ -804,12 +806,15 @@ function idFrom(name: string): string {
       }
     }
     .ts-template-toggle {
-      font-size: 0.75rem;
       white-space: nowrap;
+      &.has-template {
+        border-color: var(--ts-brand) !important;
+        color: var(--ts-ink) !important;
+      }
     }
     .ts-type-grid {
       display: grid;
-      grid-template-columns: 2rem minmax(8rem, 1fr) 7rem 7rem 6.5rem;
+      grid-template-columns: 2rem minmax(8rem, 1fr) 7rem 7rem auto 6.5rem;
       align-items: center;
       gap: 0.5rem;
     }
@@ -940,6 +945,7 @@ function idFrom(name: string): string {
     /* @pi/ui styles every <button>: these opt back into a compact look. */
     .ts-add,
     .ts-archive,
+    .ts-template-toggle,
     .ts-primary,
     .ts-secondary {
       min-width: 0 !important;