From aaf6ee053b9a8bfdcdcb4df0d3fcf06d0e3f45f8 Mon Sep 17 00:00:00 2001
From: Pandipipas <62224708+Pandipipas@users.noreply.github.com>
Date: Sat, 14 Feb 2026 17:22:24 +0100
Subject: [PATCH] Unifica estilo de campos en panel Bracket

---
 .../scoreko-dev/components/BracketPanel.vue   | 26 +++++-
 .../components/CommentaryPanel.vue            | 85 ++++++++++---------
 2 files changed, 66 insertions(+), 45 deletions(-)

diff --git a/src/dashboard/scoreko-dev/components/BracketPanel.vue b/src/dashboard/scoreko-dev/components/BracketPanel.vue
index d50d19e..ceffb55 100644
--- a/src/dashboard/scoreko-dev/components/BracketPanel.vue
+++ b/src/dashboard/scoreko-dev/components/BracketPanel.vue
@@ -119,24 +119,23 @@ onMounted(() => {
           label="Stage"
           :options="stageOptions"
           dense
-          outlined
+          class="bracket-panel__field"
         />
         <QSelect
           v-model="bracketSide"
           label="Bracket side"
           :options="bracketSideOptions"
           dense
-          outlined
           emit-value
           map-options
+          class="bracket-panel__field"
         />
         <div class="bracket-panel-custom">
           <QInput
             v-model="customText"
             label="Custom progress"
             dense
-            outlined
-            class="bracket-panel-custom-input"
+            class="bracket-panel-custom-input bracket-panel__field"
           />
           <QToggle
             v-model="customActive"
@@ -178,4 +177,23 @@ onMounted(() => {
   align-self: center;
   margin-top: 0;
 }
+
+.bracket-panel__field :deep(.q-field__control) {
+  min-height: 28px;
+  padding: 0;
+  background: transparent !important;
+  border-radius: 0;
+}
+
+.bracket-panel__field :deep(.q-field__control:before),
+.bracket-panel__field :deep(.q-field__control:after) {
+  border: 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
+}
+
+.bracket-panel__field :deep(.q-field__native),
+.bracket-panel__field :deep(.q-field__input),
+.bracket-panel__field :deep(.q-field__label) {
+  color: rgba(255, 255, 255, 0.92);
+}
 </style>
diff --git a/src/dashboard/scoreko-dev/components/CommentaryPanel.vue b/src/dashboard/scoreko-dev/components/CommentaryPanel.vue
index dc0454c..fc29584 100644
--- a/src/dashboard/scoreko-dev/components/CommentaryPanel.vue
+++ b/src/dashboard/scoreko-dev/components/CommentaryPanel.vue
@@ -12,57 +12,31 @@ const commentaryStore = useCommentaryStore();
       </div>
       <QSpace />
       <QBtn
-        color="secondary"
-        outline
+        flat
+        dense
         icon="swap_horiz"
-        label="Intercambiar lados"
+        class="commentary-panel__action-btn"
         @click="commentaryStore.swapCommentators"
       />
     </div>
 
     <div class="row q-col-gutter-lg">
       <div class="col-12 col-md-6">
-        <QCard
-          flat
-          bordered
-        >
-          <QCardSection>
-            <div class="text-subtitle1 text-weight-bold">
-              Left side
-            </div>
-          </QCardSection>
-          <QSeparator />
-          <QCardSection>
-            <QInput
-              v-model="commentaryStore.leftCommentator"
-              label="Commentator"
-              dense
-              outlined
-            />
-          </QCardSection>
-        </QCard>
+        <QInput
+          v-model="commentaryStore.leftCommentator"
+          label="Commentator"
+          dense
+          class="commentary-panel__field"
+        />
       </div>
 
       <div class="col-12 col-md-6">
-        <QCard
-          flat
-          bordered
-        >
-          <QCardSection>
-            <div class="text-subtitle1 text-weight-bold">
-              Right side
-            </div>
-          </QCardSection>
-          <QSeparator />
-          <QCardSection>
-            <QInput
-              v-model="commentaryStore.rightCommentator"
-              label="Commentator"
-              dense
-              outlined
-            />
-          </QCardSection>
-        </QCard>
+        <QInput
+          v-model="commentaryStore.rightCommentator"
+          label="Commentator"
+          dense
+          class="commentary-panel__field"
+        />
       </div>
     </div>
   </div>
@@ -74,4 +48,33 @@ const commentaryStore = useCommentaryStore();
   flex-direction: column;
   gap: 16px;
 }
+
+.commentary-panel__field :deep(.q-field__control) {
+  min-height: 28px;
+  padding: 0;
+  background: transparent !important;
+  border-radius: 0;
+}
+
+.commentary-panel__field :deep(.q-field__control:before),
+.commentary-panel__field :deep(.q-field__control:after) {
+  border: 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
+}
+
+.commentary-panel__field :deep(.q-field__native),
+.commentary-panel__field :deep(.q-field__input),
+.commentary-panel__field :deep(.q-field__label) {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.commentary-panel__action-btn {
+  color: #fff;
+  opacity: 0.85;
+}
+
+.commentary-panel__action-btn:hover {
+  opacity: 1;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
+}
 </style>