From 3df7a41518f38054027ae2b85da3f84bca21b968 Mon Sep 17 00:00:00 2001
From: Eduardo Lopes <155753879+eduardolopesx03@users.noreply.github.com>
Date: Thu, 22 Jan 2026 20:26:28 -0300
Subject: [PATCH] Ajustar modais de faturamento

---
 src/app/pages/faturamento/faturamento.html | 93 +++-------------------
 src/app/pages/faturamento/faturamento.scss | 30 +++++--
 2 files changed, 37 insertions(+), 86 deletions(-)

diff --git a/src/app/pages/faturamento/faturamento.html b/src/app/pages/faturamento/faturamento.html
index af9e6c1..ecab608 100644
--- a/src/app/pages/faturamento/faturamento.html
+++ b/src/app/pages/faturamento/faturamento.html
@@ -338,7 +338,7 @@
   <div *ngIf="detailOpen" #detailModal class="modal-card modal-xl-custom" (click)="$event.stopPropagation()">
     <div class="modal-header">
       <div class="modal-title">
-        <span class="icon-bg primary-soft"><i class="bi bi-receipt"></i></span>
+        <span class="icon-bg detail-icon"><i class="bi bi-receipt"></i></span>
         Detalhes do Faturamento
       </div>
       <button class="btn btn-sm btn-icon" (click)="closeAllModals()"><i class="bi bi-x-lg"></i></button>
@@ -347,24 +347,16 @@
     <div class="modal-body modern-body bg-light-gray" *ngIf="detailData; else detailLoading">
       <div class="mb-3 d-flex flex-wrap align-items-center justify-content-between gap-2">
         <div class="d-flex flex-column">
-          <div class="fw-black" style="font-size: 1.05rem;">
+          <div class="fw-black detail-client">
             {{ detailData.cliente || '—' }}
           </div>
           <small class="text-muted fw-bold">
             ITEM: {{ detailData.item }} • QTD LINHAS: {{ detailData.qtdLinhas ?? 0 }}
           </small>
         </div>
-
-        <div class="d-flex flex-wrap gap-2">
-          <span class="badge-pill vivo"><i class="bi bi-telephone-fill me-1"></i> {{ formatMoney(detailData.valorContratoVivo) }}</span>
-          <span class="badge-pill line"><i class="bi bi-hdd-network-fill me-1"></i> {{ formatMoney(detailData.valorContratoLine) }}</span>
-          <span class="badge-pill lucro" *ngIf="hasLucro(detailData)">
-            <i class="bi bi-cash-stack me-1"></i> {{ formatMoney(detailData.lucro) }}
-          </span>
-        </div>
       </div>
 
-      <div class="details-dashboard details-2col">
+      <div class="details-dashboard details-single">
 
         <!-- IDENTIFICAÇÃO -->
         <div class="detail-box">
@@ -400,76 +392,15 @@
             </div>
           </div>
         </div>
+      </div>
 
-        <!-- VIVO -->
-        <div class="detail-box">
-          <div class="box-header justify-content-center">
-            <span><i class="bi bi-telephone-fill me-2"></i> Vivo</span>
-          </div>
-          <div class="box-body">
-            <div class="info-grid">
-              <div class="info-item">
-                <span class="lbl">Franquia Vivo</span>
-                <span class="val fw-black">{{ formatFranquia(detailData.franquiaVivo) }}</span>
-              </div>
-
-              <div class="info-item">
-                <span class="lbl text-vivo">Valor Vivo (R$)</span>
-                <span class="val fw-black text-vivo">{{ formatMoney(detailData.valorContratoVivo) }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- LINE -->
-        <div class="detail-box">
-          <div class="box-header justify-content-center">
-            <span><i class="bi bi-hdd-network-fill me-2"></i> Line Móvel</span>
-          </div>
-          <div class="box-body">
-            <div class="info-grid">
-              <div class="info-item">
-                <span class="lbl">Franquia Line</span>
-                <span class="val fw-black">{{ formatFranquia(detailData.franquiaLine) }}</span>
-              </div>
-
-              <div class="info-item">
-                <span class="lbl text-line">Valor Line (R$)</span>
-                <span class="val fw-black text-line">{{ formatMoney(detailData.valorContratoLine) }}</span>
-              </div>
-
-              <div class="info-item span-2">
-                <span class="lbl text-brand">Lucro</span>
-                <span class="val fw-black text-brand">{{ formatMoney(detailData.lucro) }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- RESUMO -->
-        <div class="detail-box">
-          <div class="box-header justify-content-center">
-            <span><i class="bi bi-info-circle me-2"></i> Resumo</span>
-          </div>
-          <div class="box-body">
-            <div class="info-grid">
-              <div class="info-item span-2">
-                <span class="lbl">Observação</span>
-                <span class="val">{{ getObservacao(detailData) }}</span>
-              </div>
-            </div>
-
-            <div class="mt-3 d-flex justify-content-end gap-2 flex-wrap">
-              <button class="btn btn-outline-secondary btn-sm" (click)="closeAllModals()">
-                Fechar
-              </button>
-              <button class="btn btn-primary btn-sm" (click)="onComparativo(detailData)">
-                <i class="bi bi-columns-gap me-1"></i> Abrir Comparativo
-              </button>
-            </div>
-          </div>
-        </div>
-
+      <div class="mt-4 d-flex justify-content-end gap-2 flex-wrap">
+        <button class="btn btn-outline-secondary btn-sm" (click)="closeAllModals()">
+          Fechar
+        </button>
+        <button class="btn btn-primary btn-sm" (click)="onComparativo(detailData)">
+          <i class="bi bi-columns-gap me-1"></i> Abrir Comparativo
+        </button>
       </div>
     </div>
 
@@ -482,7 +413,7 @@
   <div *ngIf="compareOpen" #compareModal class="modal-card modal-lg" (click)="$event.stopPropagation()">
     <div class="modal-header">
       <div class="modal-title">
-        <span class="icon-bg success"><i class="bi bi-columns-gap"></i></span> Comparativo Vivo x Line
+        <span class="icon-bg compare-icon"><i class="bi bi-columns-gap"></i></span> Comparativo Vivo x Line
       </div>
       <button class="btn btn-sm btn-icon" (click)="closeAllModals()"><i class="bi bi-x-lg"></i></button>
     </div>
diff --git a/src/app/pages/faturamento/faturamento.scss b/src/app/pages/faturamento/faturamento.scss
index ed96d9b..06ffee3 100644
--- a/src/app/pages/faturamento/faturamento.scss
+++ b/src/app/pages/faturamento/faturamento.scss
@@ -781,14 +781,16 @@
   }
 
   .icon-bg {
-    width: 32px;
-    height: 32px;
-    border-radius: 10px;
-    background: rgba(3, 15, 170, 0.1);
+    width: 34px;
+    height: 34px;
+    border-radius: 12px;
+    background: rgba(3, 15, 170, 0.12);
     color: var(--blue);
     display: flex;
     align-items: center;
     justify-content: center;
+    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), 0 8px 18px rgba(3, 15, 170, 0.18);
+    font-size: 1rem;
 
     &.success { background: var(--success-bg); color: var(--success-text); }
     &.primary-soft { background: rgba(3, 15, 170, 0.1); color: var(--blue); }
@@ -811,6 +813,12 @@
 }
 
 .details-2col { grid-template-columns: 1fr 1fr; @media (max-width: 900px) { grid-template-columns: 1fr; } }
+.details-single { grid-template-columns: minmax(0, 1fr); }
+
+.detail-client {
+  font-size: 1.05rem;
+  letter-spacing: -0.01em;
+}
 
 .detail-box {
   background: #fff;
@@ -820,10 +828,22 @@
   overflow: hidden;
 }
 
+.icon-bg.detail-icon {
+  background: linear-gradient(135deg, rgba(67, 56, 202, 0.18), rgba(14, 165, 233, 0.16));
+  color: #1d4ed8;
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), 0 10px 22px rgba(29, 78, 216, 0.2);
+}
+
+.icon-bg.compare-icon {
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(59, 130, 246, 0.2));
+  color: #0f766e;
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), 0 10px 24px rgba(16, 185, 129, 0.25);
+}
+
 .box-header.justify-content-center {
   justify-content: center !important;
   text-align: center;
-  background: rgba(227, 61, 207, 0.04);
+  background: linear-gradient(135deg, rgba(227, 61, 207, 0.08), rgba(59, 130, 246, 0.08));
   color: var(--brand);
   padding: 8px;