From 47485a867b54b1b6a78dd88838677d5c26b55d5b Mon Sep 17 00:00:00 2001
From: Eduardo <eduardolopesx03@gmail.com>
Date: Mon, 5 Jan 2026 17:57:05 -0300
Subject: [PATCH] feat(front): pagina faturamento + integracao billing

---
 src/app/app.routes.ts                         |   13 +-
 src/app/components/header/header.html         |   28 +-
 src/app/components/header/header.scss         |   20 +-
 src/app/components/header/header.ts           |    7 +-
 src/app/pages/faturamento/faturamento.html    |  288 ++++
 src/app/pages/faturamento/faturamento.scss    |  566 ++++++
 src/app/pages/faturamento/faturamento.spec.ts |   23 +
 src/app/pages/faturamento/faturamento.ts      |  208 +++
 src/app/pages/geral/geral.html                | 1195 +++++++------
 src/app/pages/geral/geral.scss                | 1529 ++++++++++++++---
 src/app/pages/geral/geral.ts                  | 1212 ++++++++++---
 src/app/pages/mureg/mureg.html                |  292 ++++
 src/app/pages/mureg/mureg.scss                |  310 ++++
 src/app/pages/mureg/mureg.ts                  |  433 +++++
 src/app/services/billing.spec.ts              |   16 +
 src/app/services/billing.ts                   |   91 +
 src/app/services/lines.service.ts             |   33 +-
 17 files changed, 5287 insertions(+), 977 deletions(-)
 create mode 100644 src/app/pages/faturamento/faturamento.html
 create mode 100644 src/app/pages/faturamento/faturamento.scss
 create mode 100644 src/app/pages/faturamento/faturamento.spec.ts
 create mode 100644 src/app/pages/faturamento/faturamento.ts
 create mode 100644 src/app/pages/mureg/mureg.html
 create mode 100644 src/app/pages/mureg/mureg.scss
 create mode 100644 src/app/pages/mureg/mureg.ts
 create mode 100644 src/app/services/billing.spec.ts
 create mode 100644 src/app/services/billing.ts

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index a25bd5f..911db7e 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,13 +1,22 @@
 import { Routes } from '@angular/router';
+
 import { Home } from './pages/home/home';
 import { Register } from './pages/register/register';
 import { LoginComponent } from './pages/login/login';
 import { Geral } from './pages/geral/geral';
+import { Mureg } from './pages/mureg/mureg';
+import { Faturamento } from './pages/faturamento/faturamento';
+
 import { authGuard } from './guards/auth.guard';
 
 export const routes: Routes = [
   { path: '', component: Home },
-  { path: "register", component: Register },
-  { path: "login", component: LoginComponent },
+  { path: 'register', component: Register },
+  { path: 'login', component: LoginComponent },
+
   { path: 'geral', component: Geral, canActivate: [authGuard] },
+  { path: 'mureg', component: Mureg, canActivate: [authGuard] },
+  { path: 'faturamento', component: Faturamento, canActivate: [authGuard] },
+
+  { path: '**', redirectTo: '' },
 ];
diff --git a/src/app/components/header/header.html b/src/app/components/header/header.html
index d2db4f6..c3bf37f 100644
--- a/src/app/components/header/header.html
+++ b/src/app/components/header/header.html
@@ -3,7 +3,7 @@
   [class.header-scrolled]="isScrolled"
 >
   <div class="header-top">
-    <!-- ESQUERDA: HAMBURGUER (só no /geral) + LOGO -->
+    <!-- ESQUERDA: HAMBURGUER (logado) + LOGO -->
     <div class="left-area">
       <button
         *ngIf="isLoggedHeader"
@@ -24,7 +24,7 @@
       </a>
     </div>
 
-    <!-- ✅ MENU HOME: só aparece fora do /geral -->
+    <!-- ✅ MENU HOME: só aparece fora do logado -->
     <nav class="menu" *ngIf="!isLoggedHeader">
       <a href="https://www.linemovel.com.br/sobrenos" class="menu-item" target="_blank">O que é a Line Móvel?</a>
       <a href="https://www.linemovel.com.br/empresas" class="menu-item" target="_blank">Para sua empresa</a>
@@ -32,7 +32,7 @@
       <a href="https://www.linemovel.com.br/indique" class="menu-item" target="_blank">Indique um amigo</a>
     </nav>
 
-    <!-- ✅ BOTÕES: só aparecem fora do /geral -->
+    <!-- ✅ BOTÕES: só aparecem fora do logado -->
     <div class="btn-area" *ngIf="!isLoggedHeader">
       <button type="button" class="btn btn-cadastrar" [routerLink]="['/register']">
         Cadastre-se
@@ -44,7 +44,7 @@
     </div>
   </div>
 
-  <!-- ✅ FAIXA (SÓ NA HOME) com degradê igual footer -->
+  <!-- ✅ FAIXA (SÓ NA HOME) -->
   <div class="header-bar footer-gradient" *ngIf="isHome">
     <span class="header-bar-text">
       Somos a escolha certa para estar sempre conectado!
@@ -52,14 +52,14 @@
   </div>
 </header>
 
-<!-- ✅ OVERLAY (só no /geral) -->
+<!-- ✅ OVERLAY (logado) -->
 <div
   class="menu-overlay"
   *ngIf="isLoggedHeader && menuOpen"
   (click)="closeMenu()"
 ></div>
 
-<!-- ✅ MENU LATERAL (só no /geral) -->
+<!-- ✅ MENU LATERAL (logado) -->
 <aside
   *ngIf="isLoggedHeader"
   class="side-menu"
@@ -86,14 +86,24 @@
   </div>
 
   <div class="side-menu-body">
-    <a routerLink="/geral" class="side-item" (click)="closeMenu()">
-      <i class="bi bi-clipboard-data me-2"></i> Controle de Contratos
-    </a>
 
     <a routerLink="/geral" class="side-item" (click)="closeMenu()">
       <i class="bi bi-sim me-2"></i> Gerenciar Linhas
     </a>
 
+    <!-- ✅ NOVO: FATURAMENTO -->
+    <a routerLink="/faturamento" class="side-item" (click)="closeMenu()">
+      <i class="bi bi-receipt me-2"></i> Faturamento
+    </a>
+
+    <a routerLink="/mureg" class="side-item" (click)="closeMenu()">
+      <i class="bi bi-table me-2"></i> Mureg
+    </a>
+
+    <a routerLink="/geral" class="side-item" (click)="closeMenu()">
+      <i class="bi bi-clipboard-data me-2"></i> Controle de Contratos
+    </a>
+
     <a routerLink="/geral" class="side-item" (click)="closeMenu()">
       <i class="bi bi-people me-2"></i> Gerenciar Clientes
     </a>
diff --git a/src/app/components/header/header.scss b/src/app/components/header/header.scss
index 0a31061..b48eaa6 100644
--- a/src/app/components/header/header.scss
+++ b/src/app/components/header/header.scss
@@ -74,14 +74,12 @@
     display: grid;
     grid-template-columns: auto 1fr auto; /* esquerda | centro | direita */
     align-items: center;
-
-    /* como agora é grid, não usamos space-between */
     justify-content: unset;
   }
 
   .menu {
     width: 100%;
-    justify-content: center; /* ✅ centraliza os links no centro */
+    justify-content: center; /* ✅ centraliza os links */
   }
 }
 
@@ -93,7 +91,7 @@
 }
 
 /* ===================== */
-/* HAMBURGUER (GERAL)    */
+/* HAMBURGUER (LOGADO)   */
 /* ===================== */
 .hamburger-btn {
   width: 44px;
@@ -195,12 +193,10 @@
   display: flex;
   align-items: center;
 
-  /* ✅ nunca quebrar linha */
   flex-wrap: nowrap;
   white-space: nowrap;
   overflow: hidden;
 
-  /* ✅ não empurrar botões */
   flex: 1 1 auto;
   min-width: 0;
 
@@ -210,7 +206,6 @@
   @media (max-width: 1100px) { gap: 12px; }
   @media (max-width: 1024px) { gap: 10px; }
 
-  /* telas menores: some o menu */
   @media (max-width: 992px) {
     display: none;
   }
@@ -226,7 +221,6 @@
 
   padding: 10px 10px;
   border-radius: 12px;
-
   white-space: nowrap;
 
   transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
@@ -297,7 +291,7 @@
 }
 
 .btn-cadastrar {
-  background: #E1E1E1; /* ✅ sólido (sem transparência) */
+  background: #E1E1E1;
   color: #000;
 }
 
@@ -333,7 +327,6 @@
   }
 }
 
-/* degradê igual ao footer */
 .footer-gradient {
   background: linear-gradient(90deg, #0B2BD6 0%, #6A55FF 40%, #E33DCF 100%);
 }
@@ -348,9 +341,8 @@
 }
 
 /* ===================================================== */
-/* MENU LATERAL (GERAL)                                  */
+/* MENU LATERAL (LOGADO)                                 */
 /* ===================================================== */
-
 .menu-overlay {
   position: fixed;
   inset: 0;
@@ -454,7 +446,7 @@
 }
 
 /* ========================================= */
-/* ✅ OVERRIDE BOOTSTRAP: SEM TRANSPARÊNCIA  */
+/* OVERRIDE BOOTSTRAP                         */
 /* ========================================= */
 .btn.btn-cadastrar,
 .btn.btn-login {
@@ -473,11 +465,9 @@
   filter: none !important;
 }
 
-/* mantém as cores originais até quando clica */
 .btn.btn-cadastrar:active { background: #E1E1E1 !important; }
 .btn.btn-login:active { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
 
-/* remove “inset” do bootstrap */
 .btn.btn-cadastrar:active,
 .btn.btn-login:active {
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10) !important;
diff --git a/src/app/components/header/header.ts b/src/app/components/header/header.ts
index a1027e4..4d38fa7 100644
--- a/src/app/components/header/header.ts
+++ b/src/app/components/header/header.ts
@@ -30,8 +30,11 @@ export class Header {
 
         this.isHome = (url === '/' || url === '');
 
-        // ✅ considera header logado quando está em /geral
-        this.isLoggedHeader = url.startsWith('/geral');
+        // ✅ considera header logado quando está em rotas internas
+        // (agora inclui MUREG)
+        this.isLoggedHeader =
+          url.startsWith('/geral') ||
+          url.startsWith('/mureg');
 
         // ✅ ao trocar de rota, fecha o menu
         this.menuOpen = false;
diff --git a/src/app/pages/faturamento/faturamento.html b/src/app/pages/faturamento/faturamento.html
new file mode 100644
index 0000000..67a4d45
--- /dev/null
+++ b/src/app/pages/faturamento/faturamento.html
@@ -0,0 +1,288 @@
+<section class="billing-page">
+  <span class="page-blob blob-1" aria-hidden="true"></span>
+  <span class="page-blob blob-2" aria-hidden="true"></span>
+  <span class="page-blob blob-3" aria-hidden="true"></span>
+  <span class="page-blob blob-4" aria-hidden="true"></span>
+
+  <div class="container-billing">
+    <div class="billing-card" data-animate>
+
+      <!-- HEADER (igual Geral) -->
+      <div class="billing-header">
+        <div class="header-row-top">
+          <div class="title-badge" data-animate>
+            <i class="bi bi-cash-stack"></i> Financeiro
+          </div>
+
+          <div class="header-title" data-animate>
+            <h5 class="title mb-0">Faturamento</h5>
+            <small class="subtitle">Visualize dados de Pessoa Física e Pessoa Jurídica</small>
+          </div>
+
+          <div class="header-actions d-flex gap-2 justify-content-end" data-animate>
+            <button class="btn btn-glass btn-sm" (click)="refresh()" [disabled]="loading">
+              <i class="bi bi-arrow-clockwise me-1"></i> Atualizar
+            </button>
+          </div>
+        </div>
+
+        <!-- FILTROS (tabs + controls no mesmo padrão do Geral) -->
+        <div class="filters-row mt-4" data-animate>
+          <!-- Tipo PF/PJ como tabs -->
+          <div class="filter-tabs">
+            <button
+              type="button"
+              class="filter-tab"
+              [class.active]="tipo === 'PF'"
+              (click)="setTipo('PF')"
+              [disabled]="loading">
+              <i class="bi bi-person me-1"></i> Pessoa Física
+            </button>
+
+            <button
+              type="button"
+              class="filter-tab"
+              [class.active]="tipo === 'PJ'"
+              (click)="setTipo('PJ')"
+              [disabled]="loading">
+              <i class="bi bi-building me-1"></i> Pessoa Jurídica
+            </button>
+          </div>
+
+          <!-- Cliente (select glass) -->
+          <div class="client-filter">
+            <div class="select-wrapper">
+              <select
+                class="form-select form-select-sm select-glass"
+                [(ngModel)]="client"
+                (change)="applyClientFilter()"
+                [disabled]="loading"
+                title="Filtrar por cliente">
+                <option value="">Todos os clientes</option>
+                <option *ngFor="let c of clients" [value]="c">{{ c }}</option>
+              </select>
+              <i class="bi bi-chevron-down select-icon"></i>
+            </div>
+
+            <button
+              class="btn btn-outline-secondary btn-sm btn-clear-client"
+              type="button"
+              (click)="clearClient()"
+              [disabled]="loading || !client"
+              title="Limpar filtro de cliente">
+              <i class="bi bi-x-circle"></i>
+            </button>
+          </div>
+        </div>
+
+        <!-- CONTROLS (search + page size igual Geral) -->
+        <div class="controls mt-3 mb-2" data-animate>
+          <div class="input-group input-group-sm search-group">
+            <span class="input-group-text">
+              <i
+                class="bi"
+                [class.bi-search]="!loading"
+                [class.bi-hourglass-split]="loading"
+                [class.text-brand]="loading"></i>
+            </span>
+
+            <input
+              type="text"
+              class="form-control"
+              placeholder="Buscar cliente..."
+              [(ngModel)]="search"
+              (ngModelChange)="onSearchChange()"
+            />
+
+            <button
+              class="btn btn-outline-secondary btn-clear"
+              type="button"
+              (click)="search=''; onSearchChange()"
+              [disabled]="loading || !search"
+              title="Limpar busca">
+              <i class="bi bi-x-lg"></i>
+            </button>
+          </div>
+
+          <div class="page-size d-flex align-items-center gap-2">
+            <span class="text-muted small fw-bold text-uppercase"
+              style="letter-spacing: 0.5px; font-size: 0.75rem;">
+              Itens por pág:
+            </span>
+
+            <div class="select-wrapper">
+              <select
+                class="form-select form-select-sm select-glass"
+                [(ngModel)]="pageSize"
+                (change)="changePageSize()"
+                [disabled]="loading">
+                <option [ngValue]="10">10</option>
+                <option [ngValue]="20">20</option>
+                <option [ngValue]="50">50</option>
+                <option [ngValue]="100">100</option>
+              </select>
+              <i class="bi bi-chevron-down select-icon"></i>
+            </div>
+          </div>
+        </div>
+
+        <!-- ERRO -->
+        <div *ngIf="errorMessage" class="alert alert-danger mt-3 mb-0">
+          <i class="bi bi-exclamation-triangle me-2"></i>
+          {{ errorMessage }}
+        </div>
+      </div>
+
+      <!-- BODY (tabela no padrão Geral) -->
+      <div class="billing-body">
+        <div class="table-meta" *ngIf="result">
+          <span class="meta-pill">
+            <i class="bi bi-collection me-1"></i>
+            Total: <strong>{{ result.total }}</strong>
+          </span>
+
+          <span class="meta-pill">
+            <i class="bi bi-layers me-1"></i>
+            Página: <strong>{{ page }}</strong> / <strong>{{ totalPages }}</strong>
+          </span>
+
+          <span class="meta-loading" *ngIf="loading">
+            <span class="spinner-border spinner-border-sm me-2"></span> Carregando...
+          </span>
+        </div>
+
+        <div class="table-wrap table-wrap-tall">
+          <table class="table table-modern align-middle text-center mb-0 billing-table">
+            <thead>
+              <tr>
+                <th class="sortable" (click)="toggleSort('item')">
+                  <div class="th-content justify-content-center">
+                    ITEM
+                    <span class="sort-caret" [class.active]="sortBy==='item'">
+                      <i [class]="sortIcon('item')"></i>
+                    </span>
+                  </div>
+                </th>
+
+                <th class="sortable" (click)="toggleSort('cliente')">
+                  <div class="th-content justify-content-center">
+                    CLIENTE
+                    <span class="sort-caret" [class.active]="sortBy==='cliente'">
+                      <i [class]="sortIcon('cliente')"></i>
+                    </span>
+                  </div>
+                </th>
+
+                <th class="sortable" (click)="toggleSort('qtdlinhas')">
+                  <div class="th-content justify-content-center">
+                    QTD LINHAS
+                    <span class="sort-caret" [class.active]="sortBy==='qtdlinhas'">
+                      <i [class]="sortIcon('qtdlinhas')"></i>
+                    </span>
+                  </div>
+                </th>
+
+                <th class="sortable" (click)="toggleSort('franquiavivo')">
+                  <div class="th-content justify-content-center">
+                    FRANQUIA VIVO
+                    <span class="sort-caret" [class.active]="sortBy==='franquiavivo'">
+                      <i [class]="sortIcon('franquiavivo')"></i>
+                    </span>
+                  </div>
+                </th>
+
+                <th class="sortable" (click)="toggleSort('valorcontratovivo')">
+                  <div class="th-content justify-content-center">
+                    CONTRATO VIVO
+                    <span class="sort-caret" [class.active]="sortBy==='valorcontratovivo'">
+                      <i [class]="sortIcon('valorcontratovivo')"></i>
+                    </span>
+                  </div>
+                </th>
+
+                <th class="sortable" (click)="toggleSort('franquialine')">
+                  <div class="th-content justify-content-center">
+                    FRANQUIA LINE
+                    <span class="sort-caret" [class.active]="sortBy==='franquialine'">
+                      <i [class]="sortIcon('franquialine')"></i>
+                    </span>
+                  </div>
+                </th>
+
+                <th class="sortable" (click)="toggleSort('valorcontratoline')">
+                  <div class="th-content justify-content-center">
+                    CONTRATO LINE
+                    <span class="sort-caret" [class.active]="sortBy==='valorcontratoline'">
+                      <i [class]="sortIcon('valorcontratoline')"></i>
+                    </span>
+                  </div>
+                </th>
+
+                <th class="sortable" (click)="toggleSort('lucro')">
+                  <div class="th-content justify-content-center">
+                    LUCRO
+                    <span class="sort-caret" [class.active]="sortBy==='lucro'">
+                      <i [class]="sortIcon('lucro')"></i>
+                    </span>
+                  </div>
+                </th>
+
+                <th>
+                  APARELHO
+                </th>
+
+                <th>
+                  PAGAMENTO
+                </th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr *ngIf="!loading && (result.items?.length ?? 0) === 0">
+                <td colspan="10" class="text-center py-5 empty-state text-muted fw-bold">
+                  <i class="bi bi-inbox me-2"></i>
+                  Nenhum registro encontrado.
+                </td>
+              </tr>
+
+              <tr *ngFor="let it of result.items; trackBy: trackById" class="table-row-item">
+                <td class="text-muted fw-bold">{{ it.item }}</td>
+                <td class="fw-black text-dark td-clip" [title]="it.cliente || ''">{{ it.cliente }}</td>
+                <td class="fw-bold">{{ it.qtdLinhas ?? 0 }}</td>
+
+                <td class="text-end">{{ brl(it.franquiaVivo) }}</td>
+                <td class="text-end">{{ brl(it.valorContratoVivo) }}</td>
+                <td class="text-end">{{ brl(it.franquiaLine) }}</td>
+                <td class="text-end">{{ brl(it.valorContratoLine) }}</td>
+                <td class="text-end lucro">{{ brl(it.lucro) }}</td>
+
+                <td class="text-truncate extra" [title]="it.aparelho || ''">{{ it.aparelho || '-' }}</td>
+                <td class="text-truncate extra" [title]="it.formaPagamento || ''">{{ it.formaPagamento || '-' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- FOOTER / PAGINAÇÃO (padrão Geral) -->
+      <div class="billing-footer">
+        <div class="small text-muted fw-bold">
+          Página {{ page }} de {{ totalPages }}
+        </div>
+
+        <nav>
+          <ul class="pagination pagination-sm mb-0 pagination-modern">
+            <li class="page-item" [class.disabled]="loading || page <= 1">
+              <button class="page-link" (click)="prevPage()">Anterior</button>
+            </li>
+
+            <li class="page-item" [class.disabled]="loading || page >= totalPages">
+              <button class="page-link" (click)="nextPage()">Próxima</button>
+            </li>
+          </ul>
+        </nav>
+      </div>
+
+    </div>
+  </div>
+</section>
diff --git a/src/app/pages/faturamento/faturamento.scss b/src/app/pages/faturamento/faturamento.scss
new file mode 100644
index 0000000..da512f1
--- /dev/null
+++ b/src/app/pages/faturamento/faturamento.scss
@@ -0,0 +1,566 @@
+:host {
+  --brand: #E33DCF;
+  --blue: #030FAA;
+  --text: #111214;
+  --muted: rgba(17, 18, 20, 0.65);
+
+  --radius-xl: 22px;
+  --radius-lg: 16px;
+  --radius-md: 12px;
+
+  --shadow-card: 0 22px 46px rgba(17, 18, 20, 0.10);
+  --glass-bg: rgba(255, 255, 255, 0.82);
+  --glass-border: 1px solid rgba(227, 61, 207, 0.16);
+
+  --page-top-gap: clamp(14px, 4vh, 40px);
+  --page-bottom-gap: clamp(110px, 14vh, 220px);
+
+  display: block;
+  font-family: 'Inter', sans-serif;
+  color: var(--text);
+  box-sizing: border-box;
+}
+
+/* PAGE BG igual Geral */
+.billing-page {
+  min-height: 100vh;
+  padding: 0 12px var(--page-bottom-gap);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  position: relative;
+  overflow-y: auto;
+  background:
+    radial-gradient(900px 420px at 20% 10%, rgba(227, 61, 207, 0.14), transparent 60%),
+    radial-gradient(820px 380px at 80% 30%, rgba(227, 61, 207, 0.08), transparent 60%),
+    linear-gradient(180deg, #ffffff 0%, #f5f5f7 70%);
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: rgba(255, 255, 255, 0.25);
+  }
+}
+
+/* BLOBS igual Geral */
+.page-blob {
+  position: fixed;
+  pointer-events: none;
+  border-radius: 999px;
+  filter: blur(34px);
+  opacity: 0.55;
+  z-index: 0;
+  background: radial-gradient(circle at 30% 30%, rgba(227,61,207,0.55), rgba(227,61,207,0.06));
+  animation: floaty 10s ease-in-out infinite;
+
+  &.blob-1 { width: 420px; height: 420px; top: -140px; left: -140px; }
+  &.blob-2 { width: 520px; height: 520px; top: -220px; right: -240px; animation-duration: 12s; }
+  &.blob-3 { width: 360px; height: 360px; bottom: -180px; left: 25%; animation-duration: 14s; }
+  &.blob-4 { width: 520px; height: 520px; bottom: -260px; right: -260px; animation-duration: 16s; opacity: .45; }
+}
+
+@keyframes floaty {
+  0%   { transform: translate(0, 0) scale(1); }
+  50%  { transform: translate(18px, 10px) scale(1.03); }
+  100% { transform: translate(0, 0) scale(1); }
+}
+
+.container-billing {
+  width: 100%;
+  max-width: 1180px;
+  position: relative;
+  z-index: 1;
+  margin-top: var(--page-top-gap);
+  margin-bottom: var(--page-bottom-gap);
+}
+
+/* CARD glass */
+.billing-card {
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  background: var(--glass-bg);
+  border: var(--glass-border);
+  backdrop-filter: blur(12px);
+  box-shadow: var(--shadow-card);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 18px) !important;
+  min-height: 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 1px;
+    border-radius: calc(var(--radius-xl) - 1px);
+    pointer-events: none;
+    border: 1px solid rgba(255, 255, 255, 0.65);
+    opacity: 0.75;
+  }
+}
+
+/* HEADER */
+.billing-header {
+  padding: 16px 24px;
+  border-bottom: 1px solid rgba(17, 18, 20, 0.06);
+  background: linear-gradient(180deg, rgba(227,61,207,0.06), rgba(255,255,255,0.2));
+  flex-shrink: 0;
+}
+
+.header-row-top {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 12px;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: 16px;
+
+    .title-badge { justify-self: center; margin-bottom: 8px; }
+    .header-actions { justify-self: center; }
+  }
+}
+
+.title-badge {
+  justify-self: start;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.78);
+  border: 1px solid rgba(227, 61, 207, 0.22);
+  backdrop-filter: blur(10px);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 800;
+
+  i { color: var(--brand); }
+}
+
+.header-title {
+  justify-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.title {
+  font-size: 26px;
+  font-weight: 950;
+  letter-spacing: -0.3px;
+  color: var(--text);
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+
+.subtitle {
+  color: rgba(17, 18, 20, 0.65);
+  font-weight: 700;
+}
+
+.header-actions { justify-self: end; }
+
+/* BOTÕES */
+.btn-glass {
+  border-radius: 12px;
+  font-weight: 900;
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(3, 15, 170, 0.25);
+  color: var(--blue);
+
+  &:hover {
+    transform: translateY(-2px);
+    border-color: var(--brand);
+    background: #fff;
+  }
+}
+
+/* FILTROS */
+.filters-row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.filter-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(17, 18, 20, 0.08);
+  border-radius: 12px;
+  backdrop-filter: blur(8px);
+}
+
+.filter-tab {
+  border: none;
+  background: transparent;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--muted);
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  &:hover {
+    color: var(--text);
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  &.active {
+    background: #fff;
+    color: var(--brand);
+    box-shadow: 0 2px 8px rgba(227, 61, 207, 0.15);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+/* CLIENTE: select glass + botão limpar */
+.client-filter {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-clear-client {
+  border-radius: 12px;
+}
+
+/* CONTROLS igual Geral */
+.controls {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.search-group {
+  max-width: 320px;
+  border-radius: 12px;
+  overflow: hidden;
+  display: flex;
+  align-items: stretch;
+  background: #fff;
+  border: 1px solid rgba(17, 18, 20, 0.15);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+  transition: all 0.2s ease;
+
+  &:focus-within {
+    border-color: var(--brand);
+    box-shadow: 0 4px 12px rgba(227, 61, 207, 0.15);
+    transform: translateY(-1px);
+  }
+
+  .input-group-text {
+    background: transparent;
+    border: none;
+    color: var(--muted);
+    padding-left: 14px;
+    padding-right: 8px;
+    display: flex;
+    align-items: center;
+
+    i { font-size: 1rem; }
+  }
+
+  .form-control {
+    border: none;
+    background: transparent;
+    padding: 10px 0;
+    font-size: 0.9rem;
+    color: var(--text);
+    box-shadow: none;
+
+    &::placeholder { color: rgba(17, 18, 20, 0.4); font-weight: 500; }
+    &:focus { outline: none; }
+  }
+
+  .btn-clear {
+    display: inline-flex;
+    background: transparent;
+    border: none;
+    color: var(--muted);
+    padding: 0 12px;
+    align-items: center;
+    cursor: pointer;
+    transition: color 0.2s;
+
+    &:hover { color: #dc3545; }
+    i { font-size: 1rem; }
+  }
+}
+
+.page-size {
+  margin-left: auto;
+
+  @media (max-width: 500px) {
+    margin-left: 0;
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+.select-wrapper {
+  position: relative;
+  display: inline-block;
+  min-width: 170px;
+
+  @media (max-width: 500px) {
+    min-width: 150px;
+  }
+}
+
+.select-glass {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(17, 18, 20, 0.15);
+  border-radius: 12px;
+  color: var(--blue);
+  font-weight: 800;
+  font-size: 0.9rem;
+  text-align: left;
+  padding: 8px 36px 8px 14px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  width: 100%;
+
+  &:hover {
+    background: #fff;
+    border-color: var(--blue);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(3, 15, 170, 0.1);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--brand);
+    box-shadow: 0 0 0 3px rgba(227, 61, 207, 0.15);
+  }
+}
+
+.select-icon {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--muted);
+  font-size: 0.75rem;
+}
+
+.text-brand { color: var(--brand) !important; }
+.fw-black { font-weight: 950; }
+
+/* BODY */
+.billing-body {
+  padding: 16px;
+  background: transparent;
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/* meta pills */
+.table-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.meta-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgba(255,255,255,0.7);
+  border: 1px solid rgba(17,18,20,0.10);
+  font-weight: 800;
+  color: rgba(17,18,20,0.75);
+
+  i { color: var(--brand); }
+}
+
+.meta-loading {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  color: rgba(17,18,20,0.65);
+  font-weight: 700;
+}
+
+/* TABELA igual Geral */
+.table-wrap {
+  overflow: auto;
+  height: 100%;
+}
+
+.table-wrap-tall {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: clamp(760px, 82vh, 1800px) !important;
+  overflow: auto;
+  border-radius: 14px;
+  border: 1px solid rgba(17,18,20,0.10);
+  background: rgba(255,255,255,0.7);
+  backdrop-filter: blur(6px);
+  overscroll-behavior: contain;
+}
+
+.table-modern {
+  width: 100%;
+  min-width: 1100px;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead th {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(8px);
+    border-bottom: 2px solid rgba(227, 61, 207, 0.15);
+    padding: 12px;
+    color: rgba(17, 18, 20, 0.7);
+    font-size: 0.78rem;
+    font-weight: 950;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    cursor: default;
+    text-align: center !important;
+  }
+
+  tbody tr {
+    transition: background-color 0.2s;
+    border-bottom: 1px solid rgba(17,18,20,0.05);
+
+    &:hover { background-color: rgba(227, 61, 207, 0.05); }
+    td { border-bottom: 1px solid rgba(17,18,20,0.04); }
+  }
+
+  td {
+    padding: 12px;
+    vertical-align: middle;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 0.875rem;
+    color: var(--text);
+    text-align: center !important;
+  }
+
+  .sortable {
+    cursor: pointer;
+    user-select: none;
+
+    &:hover { color: var(--brand); }
+  }
+}
+
+.th-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.sort-caret {
+  opacity: 0.55;
+
+  &.active {
+    opacity: 1;
+    color: var(--brand);
+  }
+}
+
+.td-clip {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 320px;
+}
+
+.extra {
+  max-width: 170px;
+}
+
+.empty-state {
+  background: rgba(255,255,255,0.4);
+}
+
+.lucro {
+  font-weight: 950;
+}
+
+/* FOOTER */
+.billing-footer {
+  padding: 14px 24px;
+  border-top: 1px solid rgba(17, 18, 20, 0.06);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+
+  @media (max-width: 768px) {
+    justify-content: center;
+    text-align: center;
+  }
+}
+
+.pagination-modern .page-link {
+  color: var(--blue);
+  font-weight: 900;
+  border-radius: 10px;
+  border: 1px solid rgba(17,18,20,0.1);
+  background: rgba(255,255,255,0.6);
+  margin: 0 2px;
+
+  &:hover {
+    transform: translateY(-1px);
+    border-color: var(--brand);
+    color: var(--brand);
+  }
+}
+
+.pagination-modern .page-item.disabled .page-link {
+  opacity: 0.6;
+}
+
+/* RESPONSIVO */
+@media (max-width: 992px) {
+  .table-modern { min-width: 1000px; }
+}
+
+@media (max-width: 576px) {
+  :host {
+    --page-top-gap: 16px;
+    --page-bottom-gap: 140px;
+  }
+
+  .table-wrap-tall { max-height: 70vh !important; }
+}
diff --git a/src/app/pages/faturamento/faturamento.spec.ts b/src/app/pages/faturamento/faturamento.spec.ts
new file mode 100644
index 0000000..1a14419
--- /dev/null
+++ b/src/app/pages/faturamento/faturamento.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Faturamento } from './faturamento';
+
+describe('Faturamento', () => {
+  let component: Faturamento;
+  let fixture: ComponentFixture<Faturamento>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Faturamento]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Faturamento);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/faturamento/faturamento.ts b/src/app/pages/faturamento/faturamento.ts
new file mode 100644
index 0000000..bb1b9c6
--- /dev/null
+++ b/src/app/pages/faturamento/faturamento.ts
@@ -0,0 +1,208 @@
+import { CommonModule } from '@angular/common';
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import {
+  BillingService,
+  BillingItem,
+  PagedResult,
+  BillingSortBy,
+  SortDir,
+  TipoCliente
+} from '../../services/billing';
+
+@Component({
+  selector: 'app-faturamento',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './faturamento.html',
+  styleUrl: './faturamento.scss',
+})
+export class Faturamento implements OnInit, OnDestroy {
+  // ===== UI state =====
+  loading = false;
+  errorMessage: string | null = null;
+
+  // ===== filtros =====
+  tipo: TipoCliente = 'PF';
+  search = '';
+  client = '';
+  page = 1;
+  pageSize = 20;
+
+  // ===== ordenação =====
+  sortBy: BillingSortBy = 'cliente';
+  sortDir: SortDir = 'asc';
+
+  // ===== dados =====
+  result: PagedResult<BillingItem> = { page: 1, pageSize: 20, total: 0, items: [] };
+  clients: string[] = [];
+
+  // ===== subs =====
+  private sub = new Subscription();
+  private searchTimer: ReturnType<typeof setTimeout> | null = null;
+
+  @ViewChild('errorToast', { static: false }) errorToast?: ElementRef<HTMLDivElement>;
+
+  constructor(private billingService: BillingService) {}
+
+  ngOnInit(): void {
+    this.loadClients();
+    this.loadData();
+  }
+
+  ngOnDestroy(): void {
+    this.sub.unsubscribe();
+    if (this.searchTimer) clearTimeout(this.searchTimer);
+  }
+
+  // =========================
+  // Ações de filtro
+  // =========================
+  setTipo(tipo: TipoCliente) {
+    if (this.tipo === tipo) return;
+    this.tipo = tipo;
+    this.page = 1;
+    this.client = '';
+    this.loadClients();
+    this.loadData();
+  }
+
+  onSearchChange() {
+    if (this.searchTimer) clearTimeout(this.searchTimer);
+
+    this.searchTimer = setTimeout(() => {
+      this.page = 1;
+      this.loadData();
+    }, 350);
+  }
+
+  applyClientFilter() {
+    this.page = 1;
+    this.loadData();
+  }
+
+  clearClient() {
+    this.client = '';
+    this.page = 1;
+    this.loadData();
+  }
+
+  refresh() {
+    this.loadClients();
+    this.loadData();
+  }
+
+  changePageSize() {
+    this.page = 1;
+    this.loadData();
+  }
+
+  // =========================
+  // Ordenação
+  // =========================
+  toggleSort(col: BillingSortBy) {
+    if (this.sortBy === col) {
+      this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
+    } else {
+      this.sortBy = col;
+      this.sortDir = 'asc';
+    }
+    this.page = 1;
+    this.loadData();
+  }
+
+  sortIcon(col: BillingSortBy): string {
+    if (this.sortBy !== col) return 'bi bi-arrow-down-up';
+    return this.sortDir === 'asc' ? 'bi bi-sort-down' : 'bi bi-sort-up';
+  }
+
+  // =========================
+  // Paginação
+  // =========================
+  get totalPages(): number {
+    const t = this.result?.total ?? 0;
+    return Math.max(1, Math.ceil(t / (this.pageSize || 20)));
+  }
+
+  goToPage(p: number) {
+    const tp = this.totalPages;
+    const next = Math.min(Math.max(1, p), tp);
+    if (next === this.page) return;
+    this.page = next;
+    this.loadData();
+  }
+
+  prevPage() {
+    this.goToPage(this.page - 1);
+  }
+
+  nextPage() {
+    this.goToPage(this.page + 1);
+  }
+
+  // =========================
+  // Carregamento
+  // =========================
+  private loadClients() {
+    this.sub.add(
+      this.billingService.getClients(this.tipo).subscribe({
+        next: (list: string[]) => {
+          this.clients = list ?? [];
+        },
+        error: () => {
+          this.clients = [];
+        },
+      })
+    );
+  }
+
+  private loadData() {
+    this.loading = true;
+    this.errorMessage = null;
+
+    this.sub.add(
+      this.billingService
+        .getPaged({
+          tipo: this.tipo,
+          search: this.search,
+          client: this.client,
+          page: this.page,
+          pageSize: this.pageSize,
+          sortBy: this.sortBy,
+          sortDir: this.sortDir,
+        })
+        .subscribe({
+          next: (res: PagedResult<BillingItem>) => {
+            this.result = res ?? { page: this.page, pageSize: this.pageSize, total: 0, items: [] };
+            this.page = this.result.page ?? this.page;
+            this.pageSize = this.result.pageSize ?? this.pageSize;
+          },
+          error: (err: any) => {
+            this.errorMessage = err?.error?.message || 'Erro ao carregar faturamento.';
+            this.result = { page: this.page, pageSize: this.pageSize, total: 0, items: [] };
+          },
+          complete: () => {
+            this.loading = false;
+          },
+        })
+    );
+  }
+
+  // =========================
+  // Helpers de display
+  // =========================
+  brl(v: number | null | undefined): string {
+    const n = typeof v === 'number' ? v : 0;
+    return n.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
+  }
+
+  num(v: number | null | undefined): string {
+    const n = typeof v === 'number' ? v : 0;
+    return n.toLocaleString('pt-BR');
+  }
+
+  trackById(_: number, it: BillingItem) {
+    return it.id;
+  }
+}
diff --git a/src/app/pages/geral/geral.html b/src/app/pages/geral/geral.html
index bb0a5e6..c2b9d32 100644
--- a/src/app/pages/geral/geral.html
+++ b/src/app/pages/geral/geral.html
@@ -1,3 +1,4 @@
+<!-- Toast (Sucesso) -->
 <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 10000;">
   <div #successToast class="toast text-bg-success border-0 shadow" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header border-bottom-0">
@@ -11,36 +12,42 @@
 </div>
 
 <section class="geral-page" (click)="closeClientDropdown()">
-  
   <span class="page-blob blob-1" aria-hidden="true"></span>
   <span class="page-blob blob-2" aria-hidden="true"></span>
   <span class="page-blob blob-3" aria-hidden="true"></span>
   <span class="page-blob blob-4" aria-hidden="true"></span>
 
-  <div class="container-geral">
-    <div class="geral-card" data-animate>
-      
+  <!-- ✅ classe extra para permitir “crescer” em notebook/TV via SCSS sem mexer no monitor -->
+  <div class="container-geral container-geral-responsive">
+    <div class="geral-card geral-card-responsive" data-animate>
       <div class="geral-header">
-        
         <div class="header-row-top">
-          
           <div class="title-badge" data-animate>
-            <i class="bi bi-grid-1x2"></i> Gestão centralizada
+            <i class="bi bi-grid-1x2"></i> Gerenciar Linhas
           </div>
-          
+
           <div class="header-title" data-animate>
             <h5 class="title mb-0">Geral</h5>
             <small class="subtitle">Tabela de linhas e dados de telefonia</small>
           </div>
-          
+
           <div class="header-actions d-flex gap-2 justify-content-end" data-animate>
-            <button type="button" class="btn btn-glass btn-sm" (click)="onImportExcel()" [disabled]="loading">
-              <i class="bi bi-file-earmark-excel me-1"></i> Importar
+            <button
+              type="button"
+              class="btn btn-glass btn-sm"
+              (click)="onImportExcel()"
+              [disabled]="loading">
+              <i class="bi bi-file-earmark-excel me-1"></i> Importar Dados Excel
             </button>
+
             <input #excelInput type="file" class="d-none" accept=".xlsx" (change)="onExcelSelected($event)" />
-            
-            <button type="button" class="btn btn-brand btn-sm" (click)="onCadastrarLinha()" [disabled]="loading">
-              <i class="bi bi-plus-circle me-1"></i> Nova Linha
+
+            <button
+              type="button"
+              class="btn btn-brand btn-sm"
+              (click)="onCadastrarLinha()"
+              [disabled]="loading">
+              <i class="bi bi-plus-circle me-1"></i> Novo Cliente
             </button>
           </div>
         </div>
@@ -61,72 +68,145 @@
             </button>
           </div>
 
+          <!-- CLIENTE MULTI-SELECT -->
           <div class="client-filter-wrap" (click)="$event.stopPropagation()">
-            <button type="button" class="btn-client-filter" [class.active]="selectedClient" (click)="toggleClientMenu()" [disabled]="loading">
-              <i class="bi bi-people-fill me-2" *ngIf="!selectedClient"></i>
-              <span class="text-truncate" style="max-width: 150px;">
-                {{ selectedClient ? selectedClient : 'Clientes' }}
-              </span>
-              <i class="bi bi-chevron-down ms-2 small"></i>
+            <button
+              type="button"
+              class="btn-client-filter"
+              [class.has-selection]="selectedClients.length > 0"
+              (click)="toggleClientMenu()"
+              [disabled]="loading">
+
+              <ng-container *ngIf="selectedClients.length === 0">
+                <i class="bi bi-people-fill me-2"></i>
+                <span>Clientes</span>
+                <i class="bi bi-chevron-down ms-2 small"></i>
+              </ng-container>
+
+              <ng-container *ngIf="selectedClients.length > 0">
+                <div class="chips-container">
+                  <span *ngFor="let client of selectedClients" class="client-chip" (click)="$event.stopPropagation()">
+                    {{ client }}
+                    <i class="bi bi-x chip-close" (click)="removeClient(client, $event)"></i>
+                  </span>
+                </div>
+                <i class="bi bi-chevron-down ms-1 small text-muted"></i>
+              </ng-container>
             </button>
+
             <div class="client-dropdown" *ngIf="showClientMenu">
               <div class="dropdown-header-search">
-                <input type="text" class="form-control form-control-sm" placeholder="Buscar na lista..." [(ngModel)]="clientSearchTerm" autofocus>
+                <input
+                  type="text"
+                  class="form-control form-control-sm"
+                  placeholder="Buscar na lista..."
+                  [(ngModel)]="clientSearchTerm"
+                  autofocus
+                  (click)="$event.stopPropagation()">
               </div>
+
               <div class="dropdown-list">
-                <div class="dropdown-item-custom" [class.selected]="!selectedClient" (click)="selectClient(null)">
+                <div class="dropdown-item-custom" [class.selected]="selectedClients.length === 0" (click)="selectClient(null)">
                   <i class="bi bi-grid me-2"></i> Todos os Clientes
                 </div>
+
                 <ng-container *ngFor="let client of filteredClientsList">
-                  <div class="dropdown-item-custom" [class.selected]="client === selectedClient" (click)="selectClient(client)">
-                    {{ client }}
+                  <div class="dropdown-item-custom" [class.selected]="isClientSelected(client)" (click)="selectClient(client)">
+                    <div class="d-flex align-items-center justify-content-between w-100">
+                      <span>{{ client }}</span>
+                      <i class="bi bi-check-lg text-brand" *ngIf="isClientSelected(client)"></i>
+                    </div>
                   </div>
                 </ng-container>
-                <div class="p-3 text-center text-muted small" *ngIf="filteredClientsList.length === 0">
-                  Nenhum cliente encontrado.
-                </div>
               </div>
             </div>
           </div>
         </div>
 
-        <div class="controls mt-3" data-animate>
+        <!-- KPIs -->
+        <div class="geral-kpis mt-4 animate-fade-in" *ngIf="isGroupMode">
+          <div class="kpi">
+            <span class="lbl">Total Clientes</span>
+            <span class="val">
+              <span *ngIf="loadingKpis" class="spinner-border spinner-border-sm text-muted"></span>
+              <span *ngIf="!loadingKpis">{{ kpiTotalClientes || 0 }}</span>
+            </span>
+          </div>
+
+          <div class="kpi">
+            <span class="lbl">Total Linhas</span>
+            <span class="val">
+              <span *ngIf="loadingKpis" class="spinner-border spinner-border-sm text-muted"></span>
+              <span *ngIf="!loadingKpis">{{ kpiTotalLinhas || 0 }}</span>
+            </span>
+          </div>
+
+          <div class="kpi">
+            <span class="lbl text-success">Ativas</span>
+            <span class="val">
+              <span *ngIf="loadingKpis" class="spinner-border spinner-border-sm text-muted"></span>
+              <span *ngIf="!loadingKpis">{{ kpiAtivas || 0 }}</span>
+            </span>
+          </div>
+
+          <div class="kpi">
+            <span class="lbl text-danger">Bloqueadas</span>
+            <span class="val">
+              <span *ngIf="loadingKpis" class="spinner-border spinner-border-sm text-muted"></span>
+              <span *ngIf="!loadingKpis">{{ kpiBloqueadas || 0 }}</span>
+            </span>
+          </div>
+        </div>
+
+        <!-- CONTROLS -->
+        <div class="controls mt-3 mb-2" data-animate>
           <div class="input-group input-group-sm search-group">
             <span class="input-group-text">
-              <i class="bi" [class.bi-search]="!loading" [class.bi-hourglass-split]="loading" [class.text-brand]="loading"></i>
+              <i
+                class="bi"
+                [class.bi-search]="!loading"
+                [class.bi-hourglass-split]="loading"
+                [class.text-brand]="loading"></i>
             </span>
-            <input class="form-control" 
-                   placeholder="Pesquisar..." 
-                   [(ngModel)]="searchTerm" 
-                   (ngModelChange)="onSearch()" />
-            
+
+            <input class="form-control" placeholder="Pesquisar..." [(ngModel)]="searchTerm" (ngModelChange)="onSearch()" />
+
             <button class="btn btn-outline-secondary btn-clear" type="button" (click)="clearSearch()" *ngIf="searchTerm">
               <i class="bi bi-x-lg"></i>
             </button>
           </div>
-          
-          <div class="page-size">
-            <span class="text-muted small fw-bold">Itens:</span>
-            <select class="form-select form-select-sm select-glass" [(ngModel)]="pageSize" (change)="onPageSizeChange()" [disabled]="loading">
-              <option [ngValue]="10">10</option>
-              <option [ngValue]="20">20</option>
-              <option [ngValue]="50">50</option>
-              <option [ngValue]="100">100</option>
-            </select>
+
+          <div class="page-size d-flex align-items-center gap-2">
+            <span class="text-muted small fw-bold text-uppercase" style="letter-spacing: 0.5px; font-size: 0.75rem;">
+              Itens por pág:
+            </span>
+
+            <div class="select-wrapper">
+              <select class="form-select form-select-sm select-glass" [(ngModel)]="pageSize" (change)="onPageSizeChange()" [disabled]="loading">
+                <option [ngValue]="10">10</option>
+                <option [ngValue]="20">20</option>
+                <option [ngValue]="50">50</option>
+                <option [ngValue]="100">100</option>
+              </select>
+              <i class="bi bi-chevron-down select-icon"></i>
+            </div>
           </div>
         </div>
       </div>
 
       <div class="geral-body">
-        
+        <!-- VIEW: GRUPOS -->
         <div class="groups-container" *ngIf="isGroupMode; else tableView">
           <div class="text-center p-5" *ngIf="loading">
             <span class="spinner-border text-brand"></span>
           </div>
-          
+
+          <div class="empty-group" *ngIf="!loading && clientGroups.length === 0">
+            Nenhum dado encontrado.
+          </div>
+
           <div class="group-list" *ngIf="!loading">
             <div *ngFor="let group of clientGroups" class="client-group-card" [class.expanded]="expandedGroup === group.cliente">
-              
               <div class="group-header" (click)="toggleGroup(group.cliente)">
                 <div class="group-info">
                   <h6 class="mb-0 fw-bold text-dark">{{ group.cliente }}</h6>
@@ -140,61 +220,67 @@
               </div>
 
               <div class="group-body" *ngIf="expandedGroup === group.cliente">
-                 
-                 <div class="d-flex justify-content-between align-items-center px-4 py-2 border-bottom bg-white">
-                    <small class="text-muted fw-bold">Gerenciar Grupo</small>
-                    <button class="btn btn-sm btn-primary" (click)="onAddLineToGroup(group.cliente)">
-                      <i class="bi bi-plus-lg me-1"></i> Adicionar Linha
-                    </button>
-                 </div>
+                <div class="d-flex justify-content-between align-items-center px-4 py-2 border-bottom bg-white">
+                  <small class="text-muted fw-bold">Gerenciar Grupo</small>
+                  <button class="btn btn-sm btn-primary" (click)="onAddLineToGroup(group.cliente)">
+                    <i class="bi bi-plus-lg me-1"></i> Adicionar Linha
+                  </button>
+                </div>
 
-                 <div class="table-wrap inner-table-wrap">
-                   <div *ngIf="loadingLines" class="p-4 text-center text-muted">
-                     <span class="spinner-border spinner-border-sm me-2"></span> Carregando linhas...
-                   </div>
-                   
-                   <table class="table table-modern align-middle text-center mb-0" *ngIf="!loadingLines">
-                     <thead>
-                       <tr>
-                         <th>ITEM</th><th>LINHA</th><th>USUÁRIO</th><th>STATUS</th><th>VENCIMENTO</th><th>AÇÕES</th>
-                       </tr>
-                     </thead>
-                     <tbody>
-                       <tr *ngFor="let r of groupLines" class="table-row-item">
-                         <td class="text-muted fw-bold">{{ r.item }}</td>
-                         <td class="fw-black text-blue">{{ r.linha }}</td>
-                         <td class="text-dark">{{ r.usuario || '-' }}</td>
-                         <td><span class="status-pill" [ngClass]="statusClass(r.status)">{{ statusLabel(r.status) }}</span></td>
-                         <td class="text-muted small fw-bold">{{ r.contrato }}</td>
-                         <td>
-                            <div class="action-group justify-content-center">
-                               <button type="button" class="btn-icon" (click)="onDetalhes(r)" title="Detalhes"><i class="bi bi-eye"></i></button>
-                               <button type="button" class="btn-icon success" (click)="onFinanceiro(r)" title="Financeiro"><i class="bi bi-cash-coin"></i></button>
-                               <button type="button" class="btn-icon primary" (click)="onEditar(r)" title="Editar"><i class="bi bi-pencil-square"></i></button>
-                               <button type="button" class="btn-icon danger" (click)="onRemover(r, true)" title="Remover"><i class="bi bi-trash"></i></button>
-                            </div>
-                         </td>
-                       </tr>
-                       <tr *ngIf="groupLines.length === 0">
-                         <td colspan="6" class="p-3 text-muted">Nenhuma linha encontrada neste grupo.</td>
-                       </tr>
-                     </tbody>
-                   </table>
-                 </div>
+                <!-- ✅ wrapper com classe extra para permitir MAIS ALTURA em notebook/TV via SCSS -->
+                <div class="table-wrap inner-table-wrap table-wrap-responsive table-wrap-tall">
+                  <div *ngIf="loadingLines" class="p-4 text-center text-muted">
+                    <span class="spinner-border spinner-border-sm me-2"></span> Carregando linhas...
+                  </div>
+
+                  <table class="table table-modern table-modern-responsive align-middle text-center mb-0" *ngIf="!loadingLines">
+                    <thead>
+                      <tr>
+                        <th>ITEM</th>
+                        <th>LINHA</th>
+                        <th>USUÁRIO</th>
+                        <th>STATUS</th>
+                        <th>VENCIMENTO</th>
+                        <th>AÇÕES</th>
+                      </tr>
+                    </thead>
+
+                    <tbody>
+                      <tr *ngFor="let r of groupLines" class="table-row-item">
+                        <td class="text-muted fw-bold">{{ r.item }}</td>
+                        <td class="fw-black text-blue">{{ r.linha }}</td>
+                        <td class="text-dark">{{ r.usuario || '-' }}</td>
+                        <td>
+                          <span class="status-pill" [ngClass]="statusClass(r.status)">{{ statusLabel(r.status) }}</span>
+                        </td>
+                        <td class="text-muted small fw-bold">{{ r.contrato }}</td>
+                        <td>
+                          <div class="action-group justify-content-center">
+                            <button class="btn-icon" (click)="onDetalhes(r)" title="Detalhes"><i class="bi bi-eye"></i></button>
+                            <button class="btn-icon success" (click)="onFinanceiro(r)" title="Financeiro"><i class="bi bi-cash-coin"></i></button>
+                            <button class="btn-icon primary" (click)="onEditar(r)" title="Editar"><i class="bi bi-pencil-square"></i></button>
+                            <button class="btn-icon danger" (click)="onRemover(r, true)" title="Remover"><i class="bi bi-trash"></i></button>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+
+                <!-- ✅ espaçador para afastar da área do footer (notebook/TV via SCSS) -->
+                <div class="footer-spacer footer-spacer-responsive" aria-hidden="true"></div>
               </div>
             </div>
-            
-            <div class="text-center text-muted mt-5" *ngIf="clientGroups.length === 0">
-              <i class="bi bi-inbox fs-1 d-block mb-2 opacity-50"></i> Nenhum grupo encontrado.
-            </div>
           </div>
         </div>
 
+        <!-- VIEW: TABELA -->
         <ng-template #tableView>
-          <div class="table-wrap">
-            <table class="table table-modern align-middle text-center">
+          <!-- ✅ wrapper com classe extra para permitir MAIS ALTURA em notebook/TV via SCSS -->
+          <div class="table-wrap table-wrap-responsive table-wrap-tall">
+            <table class="table table-modern table-modern-responsive align-middle text-center">
               <colgroup>
-                <col style="width: 80px;"> 
+                <col style="width: 80px;">
                 <col style="width: 140px;">
                 <col style="width: 280px;">
                 <col style="width: 160px;">
@@ -202,21 +288,80 @@
                 <col style="width: 130px;">
                 <col style="width: 160px;">
               </colgroup>
+
               <thead>
                 <tr>
-                  <th class="sortable text-center" (click)="setSort('item')"><div class="th-content justify-content-center">ITEM <span class="sort-caret" [class.active]="sortKey==='item'">{{ sortKey==='item' && sortDir==='desc' ? '▼' : '▲' }}</span></div></th>
-                  <th class="sortable text-center" (click)="setSort('linha')"><div class="th-content justify-content-center">LINHA <span class="sort-caret" [class.active]="sortKey==='linha'">{{ sortKey==='linha' && sortDir==='desc' ? '▼' : '▲' }}</span></div></th>
-                  <th class="sortable text-center" (click)="setSort('cliente')"><div class="th-content justify-content-center">CLIENTE <span class="sort-caret" [class.active]="sortKey==='cliente'">{{ sortKey==='cliente' && sortDir==='desc' ? '▼' : '▲' }}</span></div></th>
-                  <th class="sortable text-center" (click)="setSort('status')"><div class="th-content justify-content-center">STATUS <span class="sort-caret" [class.active]="sortKey==='status'">{{ sortKey==='status' && sortDir==='desc' ? '▼' : '▲' }}</span></div></th>
-                  <th class="sortable text-center" (click)="setSort('skil')"><div class="th-content justify-content-center">SKIL <span class="sort-caret" [class.active]="sortKey==='skil'">{{ sortKey==='skil' && sortDir==='desc' ? '▼' : '▲' }}</span></div></th>
-                  <th class="sortable text-center" (click)="setSort('contrato')"><div class="th-content justify-content-center">VENCIMENTO <span class="sort-caret" [class.active]="sortKey==='contrato'">{{ sortKey==='contrato' && sortDir==='desc' ? '▼' : '▲' }}</span></div></th>
+                  <th class="sortable text-center" (click)="setSort('item')">
+                    <div class="th-content justify-content-center">
+                      ITEM
+                      <span class="sort-caret" [class.active]="sortKey==='item'">
+                        {{ sortKey==='item' && sortDir==='desc' ? '▼' : '▲' }}
+                      </span>
+                    </div>
+                  </th>
+
+                  <th class="sortable text-center" (click)="setSort('linha')">
+                    <div class="th-content justify-content-center">
+                      LINHA
+                      <span class="sort-caret" [class.active]="sortKey==='linha'">
+                        {{ sortKey==='linha' && sortDir==='desc' ? '▼' : '▲' }}
+                      </span>
+                    </div>
+                  </th>
+
+                  <th class="sortable text-center" (click)="setSort('cliente')">
+                    <div class="th-content justify-content-center">
+                      CLIENTE
+                      <span class="sort-caret" [class.active]="sortKey==='cliente'">
+                        {{ sortKey==='cliente' && sortDir==='desc' ? '▼' : '▲' }}
+                      </span>
+                    </div>
+                  </th>
+
+                  <th class="sortable text-center" (click)="setSort('status')">
+                    <div class="th-content justify-content-center">
+                      STATUS
+                      <span class="sort-caret" [class.active]="sortKey==='status'">
+                        {{ sortKey==='status' && sortDir==='desc' ? '▼' : '▲' }}
+                      </span>
+                    </div>
+                  </th>
+
+                  <th class="sortable text-center" (click)="setSort('skil')">
+                    <div class="th-content justify-content-center">
+                      SKIL
+                      <span class="sort-caret" [class.active]="sortKey==='skil'">
+                        {{ sortKey==='skil' && sortDir==='desc' ? '▼' : '▲' }}
+                      </span>
+                    </div>
+                  </th>
+
+                  <th class="sortable text-center" (click)="setSort('contrato')">
+                    <div class="th-content justify-content-center">
+                      VENCIMENTO
+                      <span class="sort-caret" [class.active]="sortKey==='contrato'">
+                        {{ sortKey==='contrato' && sortDir==='desc' ? '▼' : '▲' }}
+                      </span>
+                    </div>
+                  </th>
+
                   <th class="text-center">AÇÕES</th>
                 </tr>
               </thead>
+
               <tbody>
                 <tr *ngIf="loading">
-                  <td colspan="7" class="text-center py-5 empty-state"><span class="spinner-border spinner-border-sm me-2 text-brand"></span> Carregando...</td>
+                  <td colspan="7" class="text-center py-5 empty-state">
+                    <span class="spinner-border spinner-border-sm me-2 text-brand"></span> Carregando...
+                  </td>
                 </tr>
+
+                <tr *ngIf="!loading && pagedRows.length === 0">
+                  <td colspan="7" class="text-center py-5 empty-state text-muted fw-bold">
+                    Nenhum registro encontrado.
+                  </td>
+                </tr>
+
                 <tr *ngFor="let r of pagedRows; trackBy: trackById" class="table-row-item">
                   <td class="text-center text-muted fw-bold">{{ r.item }}</td>
                   <td class="text-center fw-black text-blue">{{ r.linha }}</td>
@@ -228,30 +373,38 @@
                   <td class="text-center fw-bold text-muted small">{{ r.contrato }}</td>
                   <td class="text-center">
                     <div class="action-group justify-content-center">
-                      <button type="button" class="btn-icon" (click)="onDetalhes(r)"><i class="bi bi-eye"></i></button>
-                      <button type="button" class="btn-icon success" (click)="onFinanceiro(r)"><i class="bi bi-cash-coin"></i></button>
-                      <button type="button" class="btn-icon primary" (click)="onEditar(r)"><i class="bi bi-pencil-square"></i></button>
-                      <button type="button" class="btn-icon danger" (click)="onRemover(r)"><i class="bi bi-trash"></i></button>
+                      <button class="btn-icon" (click)="onDetalhes(r)" title="Detalhes"><i class="bi bi-eye"></i></button>
+                      <button class="btn-icon success" (click)="onFinanceiro(r)" title="Financeiro"><i class="bi bi-cash-coin"></i></button>
+                      <button class="btn-icon primary" (click)="onEditar(r)" title="Editar"><i class="bi bi-pencil-square"></i></button>
+                      <button class="btn-icon danger" (click)="onRemover(r)" title="Remover"><i class="bi bi-trash"></i></button>
                     </div>
                   </td>
                 </tr>
-                <tr *ngIf="!loading && pagedRows.length === 0">
-                  <td colspan="7" class="text-center py-5 empty-state">Nenhum registro encontrado.</td>
-                </tr>
               </tbody>
             </table>
           </div>
-        </ng-template>
 
+          <!-- ✅ espaçador para afastar da área do footer (notebook/TV via SCSS) -->
+          <div class="footer-spacer footer-spacer-responsive" aria-hidden="true"></div>
+        </ng-template>
       </div>
 
       <div class="geral-footer">
         <div class="small text-muted fw-bold">Mostrando {{ pageStart }}–{{ pageEnd }} de {{ filteredCount }}</div>
+
         <nav>
           <ul class="pagination pagination-sm mb-0 pagination-modern">
-            <li class="page-item" [class.disabled]="page === 1 || loading"><button class="page-link" (click)="goToPage(page - 1)">Anterior</button></li>
-            <li class="page-item" *ngFor="let p of pageNumbers" [class.active]="p === page"><button class="page-link" (click)="goToPage(p)">{{ p }}</button></li>
-            <li class="page-item" [class.disabled]="page === totalPages || loading"><button class="page-link" (click)="goToPage(page + 1)">Próxima</button></li>
+            <li class="page-item" [class.disabled]="page === 1 || loading">
+              <button class="page-link" (click)="goToPage(page - 1)">Anterior</button>
+            </li>
+
+            <li class="page-item" *ngFor="let p of pageNumbers" [class.active]="p === page">
+              <button class="page-link" (click)="goToPage(p)">{{ p }}</button>
+            </li>
+
+            <li class="page-item" [class.disabled]="page === totalPages || loading">
+              <button class="page-link" (click)="goToPage(page + 1)">Próxima</button>
+            </li>
           </ul>
         </nav>
       </div>
@@ -259,319 +412,414 @@
   </div>
 </section>
 
-<div class="modal-backdrop-custom" *ngIf="detailOpen || financeOpen || editOpen || createOpen" (click)="closeDetail(); closeFinance(); closeEdit(); closeCreate()"></div>
+<!-- =========================================================
+     ✅ MODAIS (corrigido: remove duplicações e divs soltas)
+     - fechamento centralizado em closeAllModals()
+     ========================================================= -->
 
-<div class="modal-custom" *ngIf="createOpen">
-  <div class="modal-card modal-lg" (click)="$event.stopPropagation()" style="width: 1100px; max-width: 95vw;">
+<!-- Backdrop -->
+<div
+  class="modal-backdrop-custom"
+  *ngIf="detailOpen || financeOpen || editOpen || createOpen"
+  (click)="closeAllModals()">
+</div>
+
+<!-- Overlay (captura clique fora) -->
+<div
+  class="modal-custom"
+  *ngIf="detailOpen || financeOpen || editOpen || createOpen"
+  (click)="closeAllModals()"
+>
+  <!-- CREATE MODAL -->
+  <div
+    *ngIf="createOpen"
+    #createModal
+    class="modal-card modal-lg"
+    (click)="$event.stopPropagation()"
+    style="width: 1100px; max-width: 95vw;"
+  >
     <div class="modal-header">
       <div class="modal-title">
-        <span class="icon-bg brand-soft"><i class="bi bi-plus-lg"></i></span> 
+        <span class="icon-bg brand-soft"><i class="bi bi-plus-lg"></i></span>
         {{ createMode === 'NEW_CLIENT' ? 'Cadastrar Novo Cliente' : 'Nova Linha para ' + createModel.cliente }}
       </div>
+
       <div class="d-flex align-items-center gap-2">
-        <button type="button" class="btn btn-glass btn-sm" (click)="closeCreate()" [disabled]="createSaving">
+        <button class="btn btn-glass btn-sm" (click)="closeAllModals()" [disabled]="createSaving">
           <i class="bi bi-x-lg me-1"></i> Cancelar
         </button>
-        <button type="button" class="btn btn-brand btn-sm" (click)="saveCreate()" [disabled]="createSaving">
+
+        <button class="btn btn-brand btn-sm" (click)="saveCreate()" [disabled]="createSaving">
           <span *ngIf="!createSaving"><i class="bi bi-check2-circle me-1"></i> Cadastrar</span>
           <span *ngIf="createSaving"><span class="spinner-border spinner-border-sm me-2"></span> Salvando...</span>
         </button>
       </div>
     </div>
-    
+
     <div class="modal-body modern-body bg-light-gray">
       <div class="details-dashboard">
-        
         <div class="dashboard-column">
-          <details class="detail-box">
+          <details class="detail-box" open>
             <summary class="box-header">
-                <span><i class="bi bi-person-badge me-2"></i> Identificação</span>
-                <i class="bi bi-chevron-down ms-auto transition-icon"></i>
+              <span><i class="bi bi-person-badge me-2"></i> Identificação</span>
+              <i class="bi bi-chevron-down ms-auto transition-icon"></i>
             </summary>
+
             <div class="box-body">
-               <div class="form-grid">
-                  <div class="form-field span-2" *ngIf="createMode === 'NEW_CLIENT'">
-                      <div class="d-flex gap-4 p-2 bg-white rounded border align-items-center justify-content-center">
-                         <div class="form-check">
-                            <input class="form-check-input" type="radio" name="docType" value="PF" [(ngModel)]="createModel.docType" (change)="onDocTypeChange()">
-                            <label class="form-check-label fw-bold small">Pessoa Física</label>
-                         </div>
-                         <div class="form-check">
-                            <input class="form-check-input" type="radio" name="docType" value="PJ" [(ngModel)]="createModel.docType" (change)="onDocTypeChange()">
-                            <label class="form-check-label fw-bold small">Pessoa Jurídica</label>
-                         </div>
-                      </div>
-                  </div>
+              <div class="form-grid">
+                <div class="form-field span-2" *ngIf="createMode === 'NEW_CLIENT'">
+                  <div class="d-flex gap-4 p-2 bg-white rounded border align-items-center justify-content-center">
+                    <div class="form-check">
+                      <input class="form-check-input" type="radio" name="docType" value="PF" [(ngModel)]="createModel.docType" (change)="onDocTypeChange()">
+                      <label class="form-check-label fw-bold small">Pessoa Física</label>
+                    </div>
 
-                  <div class="form-field span-2" *ngIf="createMode === 'NEW_CLIENT'">
-                      <label>Nome do Cliente <span class="text-danger">*</span></label>
-                      <input class="form-control form-control-sm" [(ngModel)]="createModel.cliente" placeholder="Razão Social ou Nome Completo" />
+                    <div class="form-check">
+                      <input class="form-check-input" type="radio" name="docType" value="PJ" [(ngModel)]="createModel.docType" (change)="onDocTypeChange()">
+                      <label class="form-check-label fw-bold small">Pessoa Jurídica</label>
+                    </div>
                   </div>
+                </div>
 
-                  <div class="form-field span-2" *ngIf="createMode === 'NEW_CLIENT'">
-                      <label>{{ createModel.docType === 'PF' ? 'CPF' : 'CNPJ' }}</label>
-                      <input class="form-control form-control-sm" [(ngModel)]="createModel.docNumber" (input)="onDocInput($event)" placeholder="Somente números" />
-                  </div>
+                <div class="form-field span-2" *ngIf="createMode === 'NEW_CLIENT'">
+                  <label>Nome do Cliente <span class="text-danger">*</span></label>
+                  <input class="form-control form-control-sm" [(ngModel)]="createModel.cliente" placeholder="Razão Social ou Nome Completo" />
+                </div>
 
-                  <div class="form-field">
-                      <label>Item (Automático)</label>
-                      <input class="form-control form-control-sm bg-light fst-italic text-muted" 
-                             value="Gerado ao Salvar" 
-                             readonly 
-                             title="O ID será gerado automaticamente pelo sistema" />
-                  </div>
-                  
-                  <div class="form-field">
-                      <label>Conta <span class="text-danger">*</span></label>
-                      <select class="form-select form-select-sm" [(ngModel)]="createModel.conta">
-                        <option value="" disabled selected>Selecione...</option>
-                        <option *ngFor="let acc of contaOptions" [value]="acc">{{ acc }}</option>
-                      </select>
-                  </div>
+                <div class="form-field span-2" *ngIf="createMode === 'NEW_CLIENT'">
+                  <label>{{ createModel.docType === 'PF' ? 'CPF' : 'CNPJ' }}</label>
+                  <input class="form-control form-control-sm" [(ngModel)]="createModel.docNumber" (input)="onDocInput($event)" placeholder="Somente números" />
+                </div>
 
-                  <div class="form-field"><label>Linha <span class="text-danger">*</span></label><input class="form-control form-control-sm" [(ngModel)]="createModel.linha" placeholder="119..." /></div>
-                  <div class="form-field"><label>Chip (ICCID) <span class="text-danger">*</span></label><input class="form-control form-control-sm" [(ngModel)]="createModel.chip" /></div>
-                  <div class="form-field span-2"><label>Usuário da Linha</label><input class="form-control form-control-sm" [(ngModel)]="createModel.usuario" /></div>
-               </div>
+                <div class="form-field">
+                  <label>Item (Automático)</label>
+                  <input class="form-control form-control-sm bg-light fst-italic text-muted" value="Gerado ao Salvar" readonly title="O ID será gerado automaticamente pelo sistema" />
+                </div>
+
+                <div class="form-field">
+                  <label>Conta <span class="text-danger">*</span></label>
+                  <select class="form-select form-select-sm" [(ngModel)]="createModel.conta">
+                    <option value="" disabled>Selecione...</option>
+                    <option *ngFor="let acc of contaOptions" [value]="acc">{{ acc }}</option>
+                  </select>
+                </div>
+
+                <div class="form-field">
+                  <label>Linha <span class="text-danger">*</span></label>
+                  <input class="form-control form-control-sm" [(ngModel)]="createModel.linha" placeholder="119..." />
+                </div>
+
+                <div class="form-field">
+                  <label>Chip (ICCID) <span class="text-danger">*</span></label>
+                  <input class="form-control form-control-sm" [(ngModel)]="createModel.chip" />
+                </div>
+
+                <div class="form-field span-2">
+                  <label>Usuário da Linha</label>
+                  <input class="form-control form-control-sm" [(ngModel)]="createModel.usuario" />
+                </div>
+              </div>
             </div>
           </details>
 
           <details class="detail-box mt-3">
-             <summary class="box-header">
-                 <span><i class="bi bi-sliders me-2"></i> Gestão</span>
-                 <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-             </summary>
-             <div class="box-body">
-                <div class="form-grid">
-                   <div class="form-field"><label>Skil (Automático)</label><input class="form-control form-control-sm bg-light" [(ngModel)]="createModel.skil" readonly /></div>
-                   <div class="form-field"><label>Cedente</label><input class="form-control form-control-sm" [(ngModel)]="createModel.cedente" /></div>
-                   <div class="form-field span-2"><label>Solicitante</label><input class="form-control form-control-sm" [(ngModel)]="createModel.solicitante" /></div>
+            <summary class="box-header">
+              <span><i class="bi bi-sliders me-2"></i> Gestão</span>
+              <i class="bi bi-chevron-down ms-auto transition-icon"></i>
+            </summary>
+
+            <div class="box-body">
+              <div class="form-grid">
+                <div class="form-field">
+                  <label>Skil (Automático)</label>
+                  <input class="form-control form-control-sm bg-light" [(ngModel)]="createModel.skil" readonly />
                 </div>
-             </div>
+
+                <div class="form-field">
+                  <label>Cedente</label>
+                  <input class="form-control form-control-sm" [(ngModel)]="createModel.cedente" />
+                </div>
+
+                <div class="form-field span-2">
+                  <label>Solicitante</label>
+                  <input class="form-control form-control-sm" [(ngModel)]="createModel.solicitante" />
+                </div>
+              </div>
+            </div>
           </details>
         </div>
 
         <div class="dashboard-column">
-           <details class="detail-box">
-              <summary class="box-header">
-                  <span><i class="bi bi-file-earmark-text me-2"></i> Contrato & Status</span>
-                  <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-              </summary>
-              <div class="box-body">
-                 <div class="form-grid">
-                    <div class="form-field span-2">
-                       <label>Plano Contrato <span class="text-danger">*</span></label>
-                       <select class="form-select form-select-sm" [(ngModel)]="createModel.planoContrato">
-                          <option value="" disabled selected>Selecione...</option>
-                          <option *ngFor="let p of planOptions" [value]="p">{{ p }}</option>
-                       </select>
-                    </div>
-                    
-                    <div class="form-field"><label>Venc. Conta</label><input class="form-control form-control-sm" [(ngModel)]="createModel.vencConta" placeholder="ex: Dia 10" /></div>
-                    <div class="form-field"><label>Modalidade</label><input class="form-control form-control-sm" [(ngModel)]="createModel.modalidade" /></div>
-
-                    <div class="form-field span-2">
-                       <label>Status <span class="text-danger">*</span></label>
-                       <select class="form-select form-select-sm" [(ngModel)]="createModel.status">
-                          <option value="" disabled selected>Selecione...</option>
-                          <option *ngFor="let s of statusOptions" [value]="s">{{ s }}</option>
-                       </select>
-                    </div>
-                 </div>
-              </div>
-           </details>
-
-           <details class="detail-box mt-3">
-              <summary class="box-header">
-                  <span><i class="bi bi-calendar-event me-2"></i> Datas Importantes</span>
-                  <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-              </summary>
-              <div class="box-body">
-                 <div class="form-grid">
-                    <div class="form-field span-2"><label>Data Entrega Operadora</label><input class="form-control form-control-sm" type="date" [(ngModel)]="createModel.dataEntregaOpera" /></div>
-                    <div class="form-field span-2"><label>Data Entrega Cliente</label><input class="form-control form-control-sm" type="date" [(ngModel)]="createModel.dataEntregaCliente" /></div>
-                    <div class="form-field span-2"><label>Data de Bloqueio</label><input class="form-control form-control-sm" type="date" [(ngModel)]="createModel.dataBloqueio" /></div>
-                 </div>
-              </div>
-           </details>
-        </div>
-
-        <div class="dashboard-column">
-           <details class="detail-box vivo-border">
-              <summary class="box-header header-vivo">
-                  <span><i class="bi bi-telephone-fill me-2"></i> Financeiro Vivo</span>
-                  <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-              </summary>
-              <div class="box-body">
-                 <div class="form-grid">
-                    <div class="form-field"><label>Franquia (GB)</label><input class="form-control form-control-sm" type="number" step="0.1" [(ngModel)]="createModel.franquiaVivo" /></div>
-                    <div class="form-field"><label>Valor Plano</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="createModel.valorPlanoVivo" /></div>
-                    <div class="form-field"><label>Gestão Voz</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="createModel.gestaoVozDados" /></div>
-                    <div class="form-field"><label>Skeelo</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="createModel.skeelo" /></div>
-                    <div class="form-field"><label>News+</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="createModel.vivoNewsPlus" /></div>
-                    <div class="form-field"><label>Travel Mundo</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="createModel.vivoTravelMundo" /></div>
-                    <div class="form-field"><label>Gestão Disp.</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="createModel.vivoGestaoDispositivo" /></div>
-                    <div class="form-field"><label class="text-vivo fw-bold">Total Vivo</label><input class="form-control form-control-sm fw-bold border-vivo" type="number" step="0.01" [(ngModel)]="createModel.valorContratoVivo" /></div>
-                 </div>
-              </div>
-           </details>
-
-           <details class="detail-box line-border mt-3">
-              <summary class="box-header header-line">
-                  <span><i class="bi bi-hdd-network-fill me-2"></i> Financeiro Line</span>
-                  <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-              </summary>
-              <div class="box-body">
-                 <div class="form-grid">
-                    <div class="form-field"><label>Franquia Line</label><input class="form-control form-control-sm" type="number" step="0.1" [(ngModel)]="createModel.franquiaLine" /></div>
-                    <div class="form-field"><label>Franquia Gestão</label><input class="form-control form-control-sm" type="number" step="0.1" [(ngModel)]="createModel.franquiaGestao" /></div>
-                    <div class="form-field"><label>Locação Ap.</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="createModel.locacaoAp" /></div>
-                    <div class="form-field"><label class="text-line fw-bold">Total Line</label><input class="form-control form-control-sm fw-bold border-line" type="number" step="0.01" [(ngModel)]="createModel.valorContratoLine" /></div>
-                 </div>
-              </div>
-           </details>
-
-           <details class="detail-box mt-3">
-              <summary class="box-header">
-                  <span><i class="bi bi-graph-up-arrow me-2"></i> Resultados</span>
-                  <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-              </summary>
-              <div class="box-body">
-                 <div class="form-grid">
-                    <div class="form-field"><label class="text-success">Desconto</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="createModel.desconto" /></div>
-                    <div class="form-field"><label class="text-brand">Lucro Estimado</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="createModel.lucro" /></div>
-                 </div>
-              </div>
-           </details>
-        </div>
-
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="modal-custom" *ngIf="detailOpen">
-  <div class="modal-card modal-responsive" (click)="$event.stopPropagation()">
-    <div class="modal-header">
-      <div class="modal-title"><span class="icon-bg primary-soft"><i class="bi bi-sim"></i></span> Detalhes da Linha</div>
-      <button type="button" class="btn btn-sm btn-icon" (click)="closeDetail()"><i class="bi bi-x-lg"></i></button>
-    </div>
-    
-    <div class="modal-body modern-body bg-light-gray" *ngIf="detailData; else detailLoading">
-      <div class="details-dashboard">
-        
-        <div class="dashboard-column">
-          <details open class="detail-box">
+          <details class="detail-box" open>
             <summary class="box-header">
-                <span><i class="bi bi-person-badge me-2"></i> Identificação</span>
-                <i class="bi bi-chevron-down ms-auto transition-icon"></i>
+              <span><i class="bi bi-file-earmark-text me-2"></i> Contrato & Status</span>
+              <i class="bi bi-chevron-down ms-auto transition-icon"></i>
             </summary>
-            <div class="box-body compact">
-              <div class="row-item"><span class="lbl">LINHA</span><span class="val text-blue fs-5">{{ detailData.linha || '-' }}</span></div>
-              <div class="row-item"><span class="lbl">CLIENTE</span><span class="val text-end text-truncate" style="max-width: 250px;" [title]="detailData.cliente">{{ detailData.cliente || '-' }}</span></div>
-              <div class="row-item"><span class="lbl">USUÁRIO</span><span class="val">{{ detailData.usuario || '-' }}</span></div>
-              <div class="divider small"></div>
-              <div class="row-grid-2">
-                <div class="mini-item"><span class="lbl">ITEM</span><span class="val">{{ detailData.item }}</span></div>
-                <div class="mini-item text-end"><span class="lbl">CHIP</span><span class="val">{{ detailData.chip || '-' }}</span></div>
+
+            <div class="box-body">
+              <div class="form-grid">
+                <div class="form-field span-2">
+                  <label>Plano Contrato <span class="text-danger">*</span></label>
+                  <select class="form-select form-select-sm" [(ngModel)]="createModel.planoContrato">
+                    <option value="" disabled>Selecione...</option>
+                    <option *ngFor="let p of planOptions" [value]="p">{{ p }}</option>
+                  </select>
+                </div>
+
+                <div class="form-field">
+                  <label>Venc. Conta</label>
+                  <input class="form-control form-control-sm" [(ngModel)]="createModel.vencConta" placeholder="ex: Dia 10" />
+                </div>
+
+                <div class="form-field">
+                  <label>Modalidade</label>
+                  <input class="form-control form-control-sm" [(ngModel)]="createModel.modalidade" />
+                </div>
+
+                <div class="form-field span-2">
+                  <label>Status <span class="text-danger">*</span></label>
+                  <select class="form-select form-select-sm" [(ngModel)]="createModel.status">
+                    <option value="" disabled>Selecione...</option>
+                    <option *ngFor="let s of statusOptions" [value]="s">{{ s }}</option>
+                  </select>
+                </div>
               </div>
             </div>
           </details>
 
-          <details open class="detail-box mt-3">
-             <summary class="box-header">
-                 <span><i class="bi bi-sliders me-2"></i> Gestão</span>
-                 <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-             </summary>
-             <div class="box-body compact">
-                <div class="row-item"><span class="lbl">SKIL</span><span class="val">{{ detailData.skil || '-' }}</span></div>
-                <div class="row-item"><span class="lbl">CEDENTE</span><span class="val">{{ detailData.cedente || '-' }}</span></div>
-                <div class="row-item"><span class="lbl">SOLICITANTE</span><span class="val">{{ detailData.solicitante || '-' }}</span></div>
-             </div>
+          <details class="detail-box mt-3">
+            <summary class="box-header">
+              <span><i class="bi bi-calendar-event me-2"></i> Datas Importantes</span>
+              <i class="bi bi-chevron-down ms-auto transition-icon"></i>
+            </summary>
+
+            <div class="box-body">
+              <div class="form-grid">
+                <div class="form-field span-2">
+                  <label>Data Entrega Operadora</label>
+                  <input class="form-control form-control-sm" type="date" [(ngModel)]="createModel.dataEntregaOpera" />
+                </div>
+
+                <div class="form-field span-2">
+                  <label>Data Entrega Cliente</label>
+                  <input class="form-control form-control-sm" type="date" [(ngModel)]="createModel.dataEntregaCliente" />
+                </div>
+
+                <div class="form-field span-2">
+                  <label>Data de Bloqueio</label>
+                  <input class="form-control form-control-sm" type="date" [(ngModel)]="createModel.dataBloqueio" />
+                </div>
+              </div>
+            </div>
           </details>
         </div>
 
         <div class="dashboard-column">
-           <details open class="detail-box">
-             <summary class="box-header">
-                 <span><i class="bi bi-file-earmark-text me-2"></i> Contrato & Status</span>
-                 <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-             </summary>
-             <div class="box-body compact">
-               <div class="row-item"><span class="lbl">PLANO</span><span class="val fw-bold">{{ detailData.planoContrato || '-' }}</span></div>
-               <div class="row-item"><span class="lbl">CONTA</span><span class="val">{{ detailData.conta || '-' }}</span></div>
-               <div class="row-item"><span class="lbl">VENCIMENTO</span><span class="val">{{ detailData.vencConta || '-' }}</span></div>
-               <div class="divider small"></div>
-               <div class="row-item align-items-center"><span class="lbl">STATUS</span><span class="status-pill static" [ngClass]="statusClass(detailData.status)">{{ statusLabel(detailData.status) }}</span></div>
-               <div class="row-item"><span class="lbl">MODALIDADE</span><span class="val">{{ detailData.modalidade || '-' }}</span></div>
-             </div>
-           </details>
+          <details class="detail-box vivo-border">
+            <summary class="box-header header-vivo">
+              <span><i class="bi bi-telephone-fill me-2"></i> Financeiro Vivo</span>
+              <i class="bi bi-chevron-down ms-auto transition-icon"></i>
+            </summary>
 
-           <details open class="detail-box mt-3">
-              <summary class="box-header">
-                  <span><i class="bi bi-calendar-event me-2"></i> Datas</span>
-                  <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-              </summary>
-              <div class="box-body compact">
-                 <div class="row-item"><span class="lbl">ENTREGA OPERADORA</span><span class="val">{{ formatDateBr(detailData.dataEntregaOpera) }}</span></div>
-                 <div class="row-item"><span class="lbl">ENTREGA CLIENTE</span><span class="val">{{ formatDateBr(detailData.dataEntregaCliente) }}</span></div>
-                 <div class="row-item"><span class="lbl">DATA BLOQUEIO</span><span class="val">{{ formatDateBr(detailData.dataBloqueio) }}</span></div>
+            <div class="box-body">
+              <div class="form-grid">
+                <div class="form-field"><label>Franquia (GB)</label><input class="form-control form-control-sm" type="number" step="0.1" [(ngModel)]="createModel.franquiaVivo" /></div>
+                <div class="form-field"><label>Valor Plano</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="createModel.valorPlanoVivo" (change)="onFinancialChange(false)" /></div>
+                <div class="form-field"><label>Gestão Voz</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="createModel.gestaoVozDados" (change)="onFinancialChange(false)" /></div>
+                <div class="form-field"><label>Skeelo</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="createModel.skeelo" (change)="onFinancialChange(false)" /></div>
+                <div class="form-field"><label>News+</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="createModel.vivoNewsPlus" (change)="onFinancialChange(false)" /></div>
+                <div class="form-field"><label>Travel Mundo</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="createModel.vivoTravelMundo" (change)="onFinancialChange(false)" /></div>
+                <div class="form-field"><label>Gestão Disp.</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="createModel.vivoGestaoDispositivo" (change)="onFinancialChange(false)" /></div>
+                <div class="form-field"><label class="text-vivo fw-bold">Total Vivo (Auto)</label><input class="form-control form-control-sm fw-bold border-vivo bg-light" type="number" step="0.01" [(ngModel)]="createModel.valorContratoVivo" readonly /></div>
               </div>
-           </details>
+            </div>
+          </details>
+
+          <details class="detail-box line-border mt-3">
+            <summary class="box-header header-line">
+              <span><i class="bi bi-hdd-network-fill me-2"></i> Financeiro Line</span>
+              <i class="bi bi-chevron-down ms-auto transition-icon"></i>
+            </summary>
+
+            <div class="box-body">
+              <div class="form-grid">
+                <div class="form-field"><label>Franquia Line</label><input class="form-control form-control-sm" type="number" step="0.1" [(ngModel)]="createModel.franquiaLine" /></div>
+                <div class="form-field"><label>Franquia Gestão</label><input class="form-control form-control-sm" type="number" step="0.1" [(ngModel)]="createModel.franquiaGestao" /></div>
+                <div class="form-field"><label>Locação Ap.</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="createModel.locacaoAp" /></div>
+                <div class="form-field"><label class="text-line fw-bold">Total Line (Manual)</label><input class="form-control form-control-sm fw-bold border-line" type="number" step="0.01" [(ngModel)]="createModel.valorContratoLine" (change)="onFinancialChange(false)" /></div>
+              </div>
+            </div>
+          </details>
+
+          <details class="detail-box mt-3">
+            <summary class="box-header">
+              <span><i class="bi bi-graph-up-arrow me-2"></i> Resultados</span>
+              <i class="bi bi-chevron-down ms-auto transition-icon"></i>
+            </summary>
+
+            <div class="box-body">
+              <div class="form-grid">
+                <div class="form-field"><label class="text-danger fw-bold">DESCONTO</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="createModel.desconto" /></div>
+                <div class="form-field"><label class="text-brand">LUCRO ESTIMADO</label><input class="form-control form-control-sm bg-light fw-bold" type="number" step="0.01" [(ngModel)]="createModel.lucro" readonly /></div>
+              </div>
+            </div>
+          </details>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- DETAIL MODAL -->
+  <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-sim"></i></span>
+        Detalhes da Linha
+      </div>
+      <button class="btn btn-sm btn-icon" (click)="closeAllModals()"><i class="bi bi-x-lg"></i></button>
+    </div>
+
+    <div class="modal-body modern-body bg-light-gray" *ngIf="detailData; else detailLoading">
+      <div class="details-dashboard">
+        <div class="dashboard-column">
+          <div class="detail-box h-100">
+            <div class="box-header justify-content-center">
+              <span><i class="bi bi-person-badge me-2"></i> Identificação</span>
+            </div>
+            <div class="box-body">
+              <div class="info-grid">
+                <div class="info-item span-2">
+                  <span class="lbl">Linha</span>
+                  <span class="val text-blue fs-4">{{ detailData.linha || '-' }}</span>
+                </div>
+                <div class="info-item span-2">
+                  <span class="lbl">Cliente</span>
+                  <span class="val text-dark" [title]="detailData.cliente">{{ detailData.cliente || '-' }}</span>
+                </div>
+                <div class="info-item span-2">
+                  <span class="lbl">Usuário</span>
+                  <span class="val">{{ detailData.usuario || '-' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="lbl">Item</span>
+                  <span class="val">{{ detailData.item }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="lbl">Chip (ICCID)</span>
+                  <span class="val small-text">{{ detailData.chip || '-' }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="dashboard-column d-flex flex-column gap-2">
+          <div class="detail-box">
+            <div class="box-header justify-content-center">
+              <span><i class="bi bi-sliders me-2"></i> Gestão</span>
+            </div>
+            <div class="box-body compact-padding">
+              <div class="info-grid compact-gap">
+                <div class="info-item span-2">
+                  <span class="lbl">Tipo (Skil)</span>
+                  <span class="val">{{ detailData.skil || '-' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="lbl">Cedente</span>
+                  <span class="val">{{ detailData.cedente || '-' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="lbl">Solicitante</span>
+                  <span class="val">{{ detailData.solicitante || '-' }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="detail-box flex-grow-1">
+            <div class="box-header justify-content-center">
+              <span><i class="bi bi-calendar-event me-2"></i> Datas</span>
+            </div>
+            <div class="box-body compact-padding">
+              <div class="info-grid compact-gap">
+                <div class="info-item">
+                  <span class="lbl">Entrega Operadora</span>
+                  <span class="val">{{ formatDateBr(detailData.dataEntregaOpera) }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="lbl">Entrega Cliente</span>
+                  <span class="val">{{ formatDateBr(detailData.dataEntregaCliente) }}</span>
+                </div>
+                <div class="info-item span-2">
+                  <span class="lbl text-danger">Data Bloqueio</span>
+                  <span class="val">{{ formatDateBr(detailData.dataBloqueio) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
 
         <div class="dashboard-column">
-           <details open class="detail-box vivo-border">
-              <summary class="box-header header-vivo">
-                  <span><i class="bi bi-telephone-fill me-2"></i> Financeiro Vivo</span>
-                  <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-              </summary>
-              <div class="box-body compact">
-                 <div class="row-item"><span>Franquia</span> <strong>{{ formatFranquia(detailData.franquiaVivo) }}</strong></div>
-                 <div class="row-item"><span>Valor Plano</span> <strong>{{ formatMoney(detailData.valorPlanoVivo) }}</strong></div>
-                 <div class="row-item"><span>Gestão Voz</span> <strong>{{ formatMoney(detailData.gestaoVozDados) }}</strong></div>
-                 <div class="divider small"></div>
-                 <div class="row-item total text-vivo"><span>Total Vivo</span> <strong>{{ formatMoney(detailData.valorContratoVivo) }}</strong></div>
+          <div class="detail-box h-100">
+            <div class="box-header justify-content-center">
+              <span><i class="bi bi-file-earmark-text me-2"></i> Contrato & Status</span>
+            </div>
+            <div class="box-body">
+              <div class="info-grid">
+                <div class="info-item span-2">
+                  <span class="lbl">Plano Contratado</span>
+                  <span class="val fw-bold text-brand">{{ detailData.planoContrato || '-' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="lbl">Conta</span>
+                  <span class="val">{{ detailData.conta || '-' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="lbl">Vencimento</span>
+                  <span class="val">{{ detailData.vencConta || '-' }}</span>
+                </div>
+                <div class="info-item span-2">
+                  <span class="lbl">Status Atual</span>
+                  <div class="mt-1">
+                    <span class="status-pill static scale-up" [ngClass]="statusClass(detailData.status)">{{ statusLabel(detailData.status) }}</span>
+                  </div>
+                </div>
+                <div class="info-item span-2">
+                  <span class="lbl">Modalidade</span>
+                  <span class="val">{{ detailData.modalidade || '-' }}</span>
+                </div>
               </div>
-           </details>
-
-           <details open class="detail-box line-border mt-3">
-              <summary class="box-header header-line">
-                  <span><i class="bi bi-hdd-network-fill me-2"></i> Financeiro Line</span>
-                  <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-              </summary>
-              <div class="box-body compact">
-                 <div class="row-item"><span>Franquia Line</span> <strong>{{ formatFranquia(detailData.franquiaLine) }}</strong></div>
-                 <div class="row-item"><span>Locação Ap.</span> <strong>{{ formatMoney(detailData.locacaoAp) }}</strong></div>
-                 <div class="divider small"></div>
-                 <div class="row-item total text-line"><span>Total Line</span> <strong>{{ formatMoney(detailData.valorContratoLine) }}</strong></div>
-              </div>
-           </details>
-
-           <details open class="detail-box mt-3">
-              <summary class="box-header">
-                  <span><i class="bi bi-graph-up-arrow me-2"></i> Resultados</span>
-                  <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-              </summary>
-              <div class="box-body compact">
-                 <div class="row-item"><span>Desconto</span> <strong class="text-success">{{ formatMoney(detailData.desconto) }}</strong></div>
-                 <div class="row-item"><span>Lucro</span> <strong class="text-brand">{{ formatMoney(detailData.lucro) }}</strong></div>
-              </div>
-           </details>
+            </div>
+          </div>
         </div>
 
       </div>
     </div>
-    <ng-template #detailLoading><div class="p-5 text-center text-muted">Carregando detalhes...</div></ng-template>
-  </div>
-</div>
 
-<div class="modal-custom" *ngIf="financeOpen">
-  <div class="modal-card modal-lg" (click)="$event.stopPropagation()">
+    <ng-template #detailLoading>
+      <div class="p-5 text-center text-muted">Carregando detalhes...</div>
+    </ng-template>
+  </div>
+
+  <!-- FINANCE MODAL -->
+  <div
+    *ngIf="financeOpen"
+    #financeModal
+    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-wallet2"></i></span> Financeiro</div>
-      <button type="button" class="btn btn-sm btn-icon" (click)="closeFinance()"><i class="bi bi-x-lg"></i></button>
+      <div class="modal-title">
+        <span class="icon-bg success"><i class="bi bi-wallet2"></i></span> Financeiro
+      </div>
+      <button class="btn btn-sm btn-icon" (click)="closeAllModals()"><i class="bi bi-x-lg"></i></button>
     </div>
+
     <div class="modal-body modern-body bg-light-gray" *ngIf="financeData; else financeLoading">
       <div class="finance-dashboard">
         <div class="finance-card vivo-card">
@@ -588,6 +836,7 @@
             <div class="row-item total"><span>Total Vivo</span> <strong>{{ formatMoney(financeData.valorContratoVivo) }}</strong></div>
           </div>
         </div>
+
         <div class="finance-card line-card">
           <div class="card-header-f"><i class="bi bi-hdd-network-fill me-2"></i> Line Móvel</div>
           <div class="card-body-f">
@@ -599,159 +848,133 @@
           </div>
         </div>
       </div>
+
       <div class="finance-summary mt-3">
-        <div class="summary-item"><span class="lbl">Desconto</span><span class="val text-success">{{ formatMoney(financeData.desconto) }}</span></div>
+        <div class="summary-item">
+          <span class="lbl text-danger">Desconto</span>
+          <span class="val text-danger">{{ formatMoney(financeData.desconto) }}</span>
+        </div>
         <div class="vertical-line"></div>
-        <div class="summary-item"><span class="lbl">Lucro Estimado</span><span class="val text-brand">{{ formatMoney(financeData.lucro) }}</span></div>
+        <div class="summary-item">
+          <span class="lbl">Lucro Estimado</span>
+          <span class="val text-brand">{{ formatMoney(financeData.lucro) }}</span>
+        </div>
       </div>
     </div>
-    <ng-template #financeLoading><div class="p-5 text-center text-muted">Carregando financeiro...</div></ng-template>
-  </div>
-</div>
 
-<div class="modal-custom" *ngIf="editOpen">
-  <div class="modal-card modal-edit" (click)="$event.stopPropagation()">
+    <ng-template #financeLoading>
+      <div class="p-5 text-center text-muted">Carregando financeiro...</div>
+    </ng-template>
+  </div>
+
+  <!-- EDIT MODAL -->
+  <div
+    *ngIf="editOpen"
+    #editModal
+    class="modal-card modal-edit"
+    (click)="$event.stopPropagation()"
+  >
     <div class="modal-header">
-      <div class="modal-title"><span class="icon-bg primary-soft"><i class="bi bi-pencil-square"></i></span> Editar Linha</div>
+      <div class="modal-title">
+        <span class="icon-bg primary-soft"><i class="bi bi-pencil-square"></i></span> Editar Linha
+      </div>
+
       <div class="d-flex align-items-center gap-2">
-        <button type="button" class="btn btn-glass btn-sm" (click)="closeEdit()" [disabled]="editSaving"><i class="bi bi-x-lg me-1"></i> Cancelar</button>
-        <button type="button" class="btn btn-brand btn-sm" (click)="saveEdit()" [disabled]="!editModel || editSaving">
-          <span *ngIf="!editSaving"><i class="bi bi-check2-circle me-1"></i> Salvar</span>
-          <span *ngIf="editSaving"><span class="spinner-border spinner-border-sm me-2"></span> Salvando...</span>
+        <button class="btn btn-glass btn-sm" (click)="closeAllModals()" [disabled]="editSaving">
+          <i class="bi bi-x-lg me-1"></i> Cancelar
+        </button>
+        <button class="btn btn-brand btn-sm" (click)="saveEdit()" [disabled]="!editModel || editSaving">
+          Salvar
         </button>
       </div>
     </div>
+
     <div class="modal-body modern-body bg-light-gray">
       <ng-container *ngIf="editModel; else editLoadingTpl">
         <div class="edit-sections">
-          
           <details open class="detail-box">
-            <summary class="box-header">
-                <span><i class="bi bi-person-badge me-2"></i> Identificação</span>
-                <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-            </summary>
+            <summary class="box-header"><span><i class="bi bi-person-badge me-2"></i> Identificação</span><i class="bi bi-chevron-down ms-auto transition-icon"></i></summary>
             <div class="box-body">
-               <div class="form-grid">
-                  <div class="form-field">
-                      <label>Item</label>
-                      <input class="form-control form-control-sm bg-light" 
-                             type="number" 
-                             [(ngModel)]="editModel.item" 
-                             disabled 
-                             title="O ID não pode ser alterado" />
-                  </div>
-
-                  <div class="form-field">
-                     <label>Conta</label>
-                     <select class="form-select form-select-sm" [(ngModel)]="editModel.conta">
-                        <option *ngFor="let acc of contaOptions" [value]="acc">{{ acc }}</option>
-                     </select>
-                  </div>
-                  <div class="form-field"><label>Linha</label><input class="form-control form-control-sm" [(ngModel)]="editModel.linha" /></div>
-                  <div class="form-field"><label>Chip</label><input class="form-control form-control-sm" [(ngModel)]="editModel.chip" /></div>
-                  <div class="form-field"><label>Cliente</label><input class="form-control form-control-sm" [(ngModel)]="editModel.cliente" /></div>
-                  <div class="form-field"><label>Usuário</label><input class="form-control form-control-sm" [(ngModel)]="editModel.usuario" /></div>
-               </div>
+              <div class="form-grid">
+                <div class="form-field"><label>Item</label><input class="form-control form-control-sm bg-light" type="number" [(ngModel)]="editModel.item" disabled title="O ID não pode ser alterado" /></div>
+                <div class="form-field"><label>Conta</label><select class="form-select form-select-sm" [(ngModel)]="editModel.conta"><option *ngIf="editModel.conta && !contaOptions.includes(editModel.conta)" [value]="editModel.conta">{{ editModel.conta }}</option><option *ngFor="let acc of contaOptions" [value]="acc">{{ acc }}</option></select></div>
+                <div class="form-field"><label>Linha</label><input class="form-control form-control-sm" [(ngModel)]="editModel.linha" /></div>
+                <div class="form-field"><label>Chip</label><input class="form-control form-control-sm" [(ngModel)]="editModel.chip" /></div>
+                <div class="form-field"><label>Cliente</label><input class="form-control form-control-sm" [(ngModel)]="editModel.cliente" /></div>
+                <div class="form-field"><label>Usuário</label><input class="form-control form-control-sm" [(ngModel)]="editModel.usuario" /></div>
+              </div>
             </div>
           </details>
 
           <details open class="detail-box">
-             <summary class="box-header">
-                 <span><i class="bi bi-file-earmark-text me-2"></i> Contrato & Plano</span>
-                 <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-             </summary>
-             <div class="box-body">
-                <div class="form-grid">
-                  <div class="form-field span-2">
-                     <label>Plano Contrato</label>
-                     <select class="form-select form-select-sm" [(ngModel)]="editModel.planoContrato">
-                        <option *ngFor="let p of planOptions" [value]="p">{{ p }}</option>
-                     </select>
-                  </div>
-                  <div class="form-field"><label>Venc. da Conta</label><input class="form-control form-control-sm" [(ngModel)]="editModel.vencConta" /></div>
-                  <div class="form-field"><label>Modalidade</label><input class="form-control form-control-sm" [(ngModel)]="editModel.modalidade" /></div>
-                </div>
-             </div>
+            <summary class="box-header"><span><i class="bi bi-file-earmark-text me-2"></i> Contrato & Plano</span><i class="bi bi-chevron-down ms-auto transition-icon"></i></summary>
+            <div class="box-body">
+              <div class="form-grid">
+                <div class="form-field span-2"><label>Plano Contrato</label><select class="form-select form-select-sm" [(ngModel)]="editModel.planoContrato"><option *ngIf="editModel.planoContrato && !planOptions.includes(editModel.planoContrato)" [ngValue]="editModel.planoContrato">{{ editModel.planoContrato }}</option><option *ngFor="let p of planOptions" [ngValue]="p">{{ p }}</option></select></div>
+                <div class="form-field"><label>Venc. da Conta</label><input class="form-control form-control-sm" [(ngModel)]="editModel.vencConta" /></div>
+                <div class="form-field"><label>Modalidade</label><input class="form-control form-control-sm" [(ngModel)]="editModel.modalidade" /></div>
+              </div>
+            </div>
           </details>
 
           <details open class="detail-box">
-             <summary class="box-header">
-                 <span><i class="bi bi-activity me-2"></i> Status & Logística</span>
-                 <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-             </summary>
-             <div class="box-body">
-                <div class="form-grid">
-                  <div class="form-field">
-                     <label>Status</label>
-                     <select class="form-select form-select-sm" [(ngModel)]="editModel.status">
-                        <option *ngFor="let s of statusOptions" [value]="s">{{ s }}</option>
-                     </select>
-                  </div>
-                  <div class="form-field"><label>Data do Bloqueio</label><input class="form-control form-control-sm" type="date" [(ngModel)]="editModel.dataBloqueio" /></div>
-                  <div class="form-field"><label>Entrega Operadora</label><input class="form-control form-control-sm" type="date" [(ngModel)]="editModel.dataEntregaOpera" /></div>
-                  <div class="form-field"><label>Entrega Cliente</label><input class="form-control form-control-sm" type="date" [(ngModel)]="editModel.dataEntregaCliente" /></div>
-                  <div class="form-field">
-                      <label>Skil</label>
-                      <select class="form-select form-select-sm" [(ngModel)]="editModel.skil">
-                          <option *ngFor="let k of skilOptions" [value]="k">{{ k }}</option>
-                      </select>
-                  </div>
-                  <div class="form-field"><label>Cedente</label><input class="form-control form-control-sm" [(ngModel)]="editModel.cedente" /></div>
-                  <div class="form-field span-2"><label>Solicitante</label><input class="form-control form-control-sm" [(ngModel)]="editModel.solicitante" /></div>
-                </div>
-             </div>
+            <summary class="box-header"><span><i class="bi bi-activity me-2"></i> Status & Logística</span><i class="bi bi-chevron-down ms-auto transition-icon"></i></summary>
+            <div class="box-body">
+              <div class="form-grid">
+                <div class="form-field"><label>Status</label><select class="form-select form-select-sm" [(ngModel)]="editModel.status"><option *ngIf="editModel.status && !statusOptions.includes(editModel.status)" [value]="editModel.status">{{ editModel.status }}</option><option *ngFor="let s of statusOptions" [value]="s">{{ s }}</option></select></div>
+                <div class="form-field"><label>Data do Bloqueio</label><input class="form-control form-control-sm" type="date" [(ngModel)]="editModel.dataBloqueio" /></div>
+                <div class="form-field"><label>Entrega Operadora</label><input class="form-control form-control-sm" type="date" [(ngModel)]="editModel.dataEntregaOpera" /></div>
+                <div class="form-field"><label>Entrega Cliente</label><input class="form-control form-control-sm" type="date" [(ngModel)]="editModel.dataEntregaCliente" /></div>
+                <div class="form-field"><label>Skil</label><select class="form-select form-select-sm" [(ngModel)]="editModel.skil"><option *ngIf="editModel.skil && !skilOptions.includes(editModel.skil)" [value]="editModel.skil">{{ editModel.skil }}</option><option *ngFor="let k of skilOptions" [value]="k">{{ k }}</option></select></div>
+                <div class="form-field"><label>Cedente</label><input class="form-control form-control-sm" [(ngModel)]="editModel.cedente" /></div>
+                <div class="form-field span-2"><label>Solicitante</label><input class="form-control form-control-sm" [(ngModel)]="editModel.solicitante" /></div>
+              </div>
+            </div>
           </details>
 
           <details class="detail-box vivo-border">
-              <summary class="box-header header-vivo">
-                  <span><i class="bi bi-telephone-fill me-2"></i> Financeiro Vivo</span>
-                  <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-              </summary>
-              <div class="box-body">
-                  <div class="form-grid">
-                    <div class="form-field"><label>Franquia Vivo</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.franquiaVivo" /></div>
-                    <div class="form-field"><label>Valor Plano Vivo</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.valorPlanoVivo" /></div>
-                    <div class="form-field"><label>Gestão Voz/Dados</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.gestaoVozDados" /></div>
-                    <div class="form-field"><label>Skeelo</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.skeelo" /></div>
-                    <div class="form-field"><label>Vivo News+</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.vivoNewsPlus" /></div>
-                    <div class="form-field"><label>Vivo Travel Mundo</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.vivoTravelMundo" /></div>
-                    <div class="form-field"><label>Vivo Gestão Disp.</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.vivoGestaoDispositivo" /></div>
-                    <div class="form-field"><label class="text-vivo fw-bold">Valor Contrato Vivo</label><input class="form-control form-control-sm fw-bold border-vivo" type="number" step="0.01" [(ngModel)]="editModel.valorContratoVivo" /></div>
-                  </div>
+            <summary class="box-header header-vivo"><span><i class="bi bi-telephone-fill me-2"></i> Financeiro Vivo</span><i class="bi bi-chevron-down ms-auto transition-icon"></i></summary>
+            <div class="box-body">
+              <div class="form-grid">
+                <div class="form-field"><label>Franquia Vivo</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.franquiaVivo" /></div>
+                <div class="form-field"><label>Valor Plano Vivo</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.valorPlanoVivo" (change)="onFinancialChange(true)" /></div>
+                <div class="form-field"><label>Gestão Voz/Dados</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.gestaoVozDados" (change)="onFinancialChange(true)" /></div>
+                <div class="form-field"><label>Skeelo</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.skeelo" (change)="onFinancialChange(true)" /></div>
+                <div class="form-field"><label>Vivo News+</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.vivoNewsPlus" (change)="onFinancialChange(true)" /></div>
+                <div class="form-field"><label>Vivo Travel Mundo</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.vivoTravelMundo" (change)="onFinancialChange(true)" /></div>
+                <div class="form-field"><label>Vivo Gestão Disp.</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.vivoGestaoDispositivo" (change)="onFinancialChange(true)" /></div>
+                <div class="form-field"><label class="text-vivo fw-bold">Valor Contrato Vivo</label><input class="form-control form-control-sm fw-bold border-vivo bg-light" type="number" step="0.01" [(ngModel)]="editModel.valorContratoVivo" readonly /></div>
               </div>
+            </div>
           </details>
 
           <details class="detail-box line-border">
-              <summary class="box-header header-line">
-                  <span><i class="bi bi-hdd-network-fill me-2"></i> Financeiro Line</span>
-                  <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-              </summary>
-              <div class="box-body">
-                  <div class="form-grid">
-                    <div class="form-field"><label>Franquia Line</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.franquiaLine" /></div>
-                    <div class="form-field"><label>Franquia Gestão</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.franquiaGestao" /></div>
-                    <div class="form-field"><label>Locação Ap.</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.locacaoAp" /></div>
-                    <div class="form-field"><label class="text-line fw-bold">Valor Contrato Line</label><input class="form-control form-control-sm fw-bold border-line" type="number" step="0.01" [(ngModel)]="editModel.valorContratoLine" /></div>
-                  </div>
+            <summary class="box-header header-line"><span><i class="bi bi-hdd-network-fill me-2"></i> Financeiro Line</span><i class="bi bi-chevron-down ms-auto transition-icon"></i></summary>
+            <div class="box-body">
+              <div class="form-grid">
+                <div class="form-field"><label>Franquia Line</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.franquiaLine" /></div>
+                <div class="form-field"><label>Franquia Gestão</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.franquiaGestao" /></div>
+                <div class="form-field"><label>Locação Ap.</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.locacaoAp" /></div>
+                <div class="form-field"><label class="text-line fw-bold">Valor Contrato Line</label><input class="form-control form-control-sm fw-bold border-line" type="number" step="0.01" [(ngModel)]="editModel.valorContratoLine" (change)="onFinancialChange(true)" /></div>
               </div>
+            </div>
           </details>
 
           <details class="detail-box">
-             <summary class="box-header">
-                 <span><i class="bi bi-graph-up-arrow me-2"></i> Resultado</span>
-                 <i class="bi bi-chevron-down ms-auto transition-icon"></i>
-             </summary>
-             <div class="box-body">
-                <div class="form-grid">
-                  <div class="form-field"><label class="text-success">Desconto</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.desconto" /></div>
-                  <div class="form-field"><label class="text-brand">Lucro</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.lucro" /></div>
-                </div>
-             </div>
+            <summary class="box-header"><span><i class="bi bi-graph-up-arrow me-2"></i> Resultado</span><i class="bi bi-chevron-down ms-auto transition-icon"></i></summary>
+            <div class="box-body">
+              <div class="form-grid">
+                <div class="form-field"><label class="text-danger fw-bold">Desconto</label><input class="form-control form-control-sm" type="number" step="0.01" [(ngModel)]="editModel.desconto" /></div>
+                <div class="form-field"><label class="text-brand">Lucro Estimado</label><input class="form-control form-control-sm bg-light fw-bold" type="number" step="0.01" [(ngModel)]="editModel.lucro" readonly /></div>
+              </div>
+            </div>
           </details>
-
         </div>
       </ng-container>
-      <ng-template #editLoadingTpl><div class="p-5 text-center text-muted"><span class="spinner-border spinner-border-sm me-2"></span> Carregando...</div></ng-template>
+
+      <ng-template #editLoadingTpl>
+        <div class="p-5 text-center text-muted">Carregando...</div>
+      </ng-template>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/pages/geral/geral.scss b/src/app/pages/geral/geral.scss
index f59f342..f77e37f 100644
--- a/src/app/pages/geral/geral.scss
+++ b/src/app/pages/geral/geral.scss
@@ -2,14 +2,11 @@
 /* 1. VARIÁVEIS E CONFIGURAÇÕES GERAIS */
 /* ========================================================== */
 :host {
-  /* Paleta de Cores */
-  --brand: #E33DCF;        /* Rosa da marca */
-  --blue: #030FAA;         /* Azul da marca */
-  --text: #111214;         /* Texto principal */
-  --muted: rgba(17, 18, 20, 0.65); /* Texto secundário */
-  
-  /* Cores Específicas (Financeiro/Status) */
-  --bg-vivo: #fbf5fc; 
+  --brand: #E33DCF;
+  --blue: #030FAA;
+  --text: #111214;
+  --muted: rgba(17, 18, 20, 0.65);
+  --bg-vivo: #fbf5fc;
   --text-vivo: #8a2be2;
   --bg-line: #f5f6ff;
   --text-line: #030FAA;
@@ -17,8 +14,6 @@
   --success-text: #198754;
   --danger-bg: rgba(220, 53, 69, 0.1);
   --danger-text: #dc3545;
-
-  /* Dimensões & Bordas */
   --radius-xl: 22px;
   --radius-lg: 16px;
   --radius-md: 12px;
@@ -26,6 +21,10 @@
   --glass-bg: rgba(255, 255, 255, 0.82);
   --glass-border: 1px solid rgba(227, 61, 207, 0.16);
 
+  /* ✅ ajustes: espaçamento responsivo para “sobrar” área até o footer do layout */
+  --page-top-gap: clamp(14px, 4vh, 40px);
+  --page-bottom-gap: clamp(110px, 14vh, 220px);
+
   display: block;
   font-family: 'Inter', sans-serif;
   color: var(--text);
@@ -37,29 +36,33 @@
 /* ========================================================== */
 .geral-page {
   min-height: 100vh;
-  padding: 24px 12px 90px;
+  padding: 0 12px var(--page-bottom-gap); /* ✅ dá respiro para o footer do site */
   display: flex;
+  align-items: flex-start;
   justify-content: center;
   position: relative;
-  overflow: hidden;
-
-  /* Fundo com Gradientes Suaves e modernos */
+  overflow-y: auto;
   background:
     radial-gradient(900px 420px at 20% 10%, rgba(227, 61, 207, 0.14), transparent 60%),
     radial-gradient(820px 380px at 80% 30%, rgba(227, 61, 207, 0.08), transparent 60%),
     linear-gradient(180deg, #ffffff 0%, #f5f5f7 70%);
 
-  /* Overlay sutil */
   &::after {
-    content: ''; position: absolute; inset: 0; pointer-events: none;
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
     background: rgba(255, 255, 255, 0.25);
   }
 }
 
-/* Blobs Flutuantes (Animação de fundo) */
 .page-blob {
-  position: fixed; pointer-events: none; border-radius: 999px; 
-  filter: blur(34px); opacity: 0.55; z-index: 0;
+  position: fixed;
+  pointer-events: none;
+  border-radius: 999px;
+  filter: blur(34px);
+  opacity: 0.55;
+  z-index: 0;
   background: radial-gradient(circle at 30% 30%, rgba(227,61,207,0.55), rgba(227,61,207,0.06));
   animation: floaty 10s ease-in-out infinite;
 
@@ -70,16 +73,22 @@
 }
 
 @keyframes floaty {
-  0%    { transform: translate(0, 0) scale(1); }
-  50%   { transform: translate(18px, 10px) scale(1.03); }
+  0%   { transform: translate(0, 0) scale(1); }
+  50%  { transform: translate(18px, 10px) scale(1.03); }
   100% { transform: translate(0, 0) scale(1); }
 }
 
 .container-geral {
-  width: 100%; max-width: 1180px; position: relative; z-index: 1;
+  width: 100%;
+  max-width: 1180px;
+  position: relative;
+  z-index: 1;
+
+  /* ✅ agora o espaçamento é responsivo e consistente */
+  margin-top: var(--page-top-gap);
+  margin-bottom: var(--page-bottom-gap);
 }
 
-/* Card Principal (Container da Aplicação) */
 .geral-card {
   border-radius: var(--radius-xl);
   overflow: hidden;
@@ -88,19 +97,26 @@
   backdrop-filter: blur(12px);
   box-shadow: var(--shadow-card);
   position: relative;
-  display: flex; flex-direction: column;
-  max-height: 85vh; /* Limita altura para scroll interno */
+  display: flex;
+  flex-direction: column;
+
+  /* ✅ MAIS ALTURA ÚTIL (base) */
+  max-height: calc(100vh - 18px) !important;
+
+  /* ✅ IMPORTANTE: permite a área de listagem crescer sem “estourar” */
+  min-height: 0;
 
-  /* Borda interna brilhante */
   &::before {
-    content: ''; position: absolute; inset: 1px; border-radius: calc(var(--radius-xl) - 1px);
-    pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.65); opacity: 0.75;
+    content: '';
+    position: absolute;
+    inset: 1px;
+    border-radius: calc(var(--radius-xl) - 1px);
+    pointer-events: none;
+    border: 1px solid rgba(255, 255, 255, 0.65);
+    opacity: 0.75;
   }
 }
 
-/* ========================================================== */
-/* 3. HEADER (GRID LAYOUT) */
-/* ========================================================== */
 .geral-header {
   padding: 16px 24px;
   border-bottom: 1px solid rgba(17, 18, 20, 0.06);
@@ -108,10 +124,9 @@
   flex-shrink: 0;
 }
 
-/* GRID: Esquerda (1fr) | Centro (auto) | Direita (1fr) */
 .header-row-top {
   display: grid;
-  grid-template-columns: 1fr auto 1fr; 
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 12px;
 
@@ -119,121 +134,279 @@
     grid-template-columns: 1fr;
     text-align: center;
     gap: 16px;
-    
+
     .title-badge { justify-self: center; margin-bottom: 8px; }
     .header-actions { justify-self: center; }
   }
 }
 
-/* 1. Badge à esquerda */
 .title-badge {
   justify-self: start;
-  display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px;
-  border-radius: 999px; background: rgba(255, 255, 255, 0.78);
-  border: 1px solid rgba(227, 61, 207, 0.22); backdrop-filter: blur(10px);
-  color: var(--text); font-size: 13px; font-weight: 800;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.78);
+  border: 1px solid rgba(227, 61, 207, 0.22);
+  backdrop-filter: blur(10px);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 800;
+
   i { color: var(--brand); }
 }
 
-/* 2. Título Centralizado */
 .header-title {
   justify-self: center;
-  display: flex; flex-direction: column; align-items: center; text-align: center;
-}
-.title { font-size: 26px; font-weight: 950; letter-spacing: -0.3px; color: var(--text); margin-top: 10px; margin-bottom: 0; }
-.subtitle { color: rgba(17, 18, 20, 0.65); font-weight: 700; }
-
-/* 3. Ações à Direita */
-.header-actions {
-  justify-self: end;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
 }
 
-/* Botões do Header */
+.title {
+  font-size: 26px;
+  font-weight: 950;
+  letter-spacing: -0.3px;
+  color: var(--text);
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+
+.subtitle {
+  color: rgba(17, 18, 20, 0.65);
+  font-weight: 700;
+}
+
+.header-actions { justify-self: end; }
+
 .btn-brand {
-  background-color: var(--brand); border-color: var(--brand); color: #fff;
-  font-weight: 900; border-radius: 12px; transition: transform 0.2s, box-shadow 0.2s;
-  &:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(227, 61, 207, 0.25); filter: brightness(1.05); }
-  &:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
+  background-color: var(--brand);
+  border-color: var(--brand);
+  color: #fff;
+  font-weight: 900;
+  border-radius: 12px;
+  transition: transform 0.2s, box-shadow 0.2s;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(227, 61, 207, 0.25);
+    filter: brightness(1.05);
+  }
+
+  &:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+    transform: none;
+  }
 }
 
 .btn-glass {
-  border-radius: 12px; font-weight: 900; background: rgba(255, 255, 255, 0.6);
-  border: 1px solid rgba(3, 15, 170, 0.25); color: var(--blue);
-  &:hover { transform: translateY(-2px); border-color: var(--brand); background: #fff; }
+  border-radius: 12px;
+  font-weight: 900;
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(3, 15, 170, 0.25);
+  color: var(--blue);
+
+  &:hover {
+    transform: translateY(-2px);
+    border-color: var(--brand);
+    background: #fff;
+  }
 }
 
-/* ========================================================== */
-/* 4. FILTROS E DROPDOWN */
-/* ========================================================== */
+/* FILTROS */
 .filters-row {
-  display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
 }
 
 .filter-tabs {
-  display: flex; gap: 4px; padding: 4px;
+  display: flex;
+  gap: 4px;
+  padding: 4px;
   background: rgba(255, 255, 255, 0.6);
   border: 1px solid rgba(17, 18, 20, 0.08);
-  border-radius: 12px; backdrop-filter: blur(8px);
+  border-radius: 12px;
+  backdrop-filter: blur(8px);
 }
 
 .filter-tab {
-  border: none; background: transparent; padding: 8px 16px; border-radius: 8px;
-  font-size: 0.85rem; font-weight: 700; color: var(--muted);
-  transition: all 0.2s ease; display: flex; align-items: center; gap: 6px;
-  &:hover { color: var(--text); background: rgba(255, 255, 255, 0.5); }
-  &.active { background: #fff; color: var(--brand); box-shadow: 0 2px 8px rgba(227, 61, 207, 0.15); }
-  &:disabled { opacity: 0.5; cursor: not-allowed; }
+  border: none;
+  background: transparent;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--muted);
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  &:hover {
+    color: var(--text);
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  &.active {
+    background: #fff;
+    color: var(--brand);
+    box-shadow: 0 2px 8px rgba(227, 61, 207, 0.15);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }
 
-/* Dropdown de Clientes */
+/* --- CLIENTE MULTI-SELECT --- */
 .client-filter-wrap { position: relative; }
 
 .btn-client-filter {
-  display: flex; align-items: center; gap: 8px;
-  padding: 8px 16px; border-radius: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border-radius: 12px;
   border: 1px solid rgba(17, 18, 20, 0.08);
   background: rgba(255, 255, 255, 0.6);
-  color: var(--muted); font-weight: 700; font-size: 0.85rem;
-  backdrop-filter: blur(8px); transition: all 0.2s; white-space: nowrap;
-  &:hover { background: #fff; border-color: var(--blue); color: var(--blue); }
-  &.active { background: var(--blue); color: #fff; border-color: var(--blue); i { color: #fff; } }
+  color: var(--muted);
+  font-weight: 700;
+  font-size: 0.85rem;
+  backdrop-filter: blur(8px);
+  transition: all 0.2s;
+  min-height: 38px;
+  height: auto;
+  flex-wrap: wrap;
+
+  &:hover {
+    background: #fff;
+    border-color: var(--blue);
+    color: var(--blue);
+  }
+
+  &.active,
+  &.has-selection {
+    background: #fff;
+    border-color: var(--brand);
+  }
+}
+
+.chips-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-width: 400px;
+}
+
+.client-chip {
+  display: inline-flex;
+  align-items: center;
+  background: rgba(227, 61, 207, 0.1);
+  color: var(--brand);
+  border: 1px solid rgba(227, 61, 207, 0.2);
+  border-radius: 6px;
+  padding: 2px 6px;
+  font-size: 0.75rem;
+  font-weight: 800;
+  cursor: default;
+  user-select: none;
+}
+
+.chip-close {
+  margin-left: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  transition: background 0.2s;
+
+  &:hover {
+    background: rgba(227, 61, 207, 0.2);
+    color: #b91f9b;
+  }
 }
 
 .client-dropdown {
-  position: absolute; top: calc(100% + 8px); right: 0;
-  width: 280px; max-height: 350px;
-  background: #fff; border-radius: 12px;
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  width: 320px;
+  max-height: 400px;
+  background: #fff;
+  border-radius: 12px;
   box-shadow: 0 10px 30px rgba(0,0,0,0.15);
   border: 1px solid rgba(17,18,20,0.08);
-  z-index: 50; display: flex; flex-direction: column; overflow: hidden;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   animation: fadeIn 0.2s ease;
 }
-@keyframes fadeIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
 
-.dropdown-header-search { padding: 8px; border-bottom: 1px solid rgba(0,0,0,0.05); background: #f9fafb; }
-.dropdown-list { overflow-y: auto; max-height: 300px; }
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.dropdown-header-search {
+  padding: 8px;
+  border-bottom: 1px solid rgba(0,0,0,0.05);
+  background: #f9fafb;
+}
+
+.dropdown-list {
+  overflow-y: auto;
+  max-height: 300px;
+}
+
 .dropdown-item-custom {
-  padding: 10px 16px; font-size: 0.85rem; color: var(--text); cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.03); transition: background 0.1s;
-  &:hover { background: rgba(227,61,207,0.05); color: var(--brand); font-weight: 600; }
-  &.selected { background: rgba(3,15,170,0.08); color: var(--blue); font-weight: 700; }
+  padding: 10px 16px;
+  font-size: 0.85rem;
+  color: var(--text);
+  cursor: pointer;
+  border-bottom: 1px solid rgba(0,0,0,0.03);
+  transition: background 0.1s;
+
+  &:hover {
+    background: rgba(227,61,207,0.05);
+    color: var(--brand);
+    font-weight: 600;
+  }
+
+  &.selected {
+    background: rgba(227, 61, 207, 0.08);
+    color: var(--brand);
+    font-weight: 700;
+  }
 }
 
-/* ========================================================== */
-/* 5. CONTROLES (SEARCH BAR) */
-/* ========================================================== */
+/* CONTROLS */
 .controls {
-  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
 }
 
-/* Estilo Moderno da Busca */
 .search-group {
-  max-width: 225px;
+  max-width: 270px;
   border-radius: 12px;
   overflow: hidden;
   display: flex;
   align-items: stretch;
-  background: #fff; 
-  border: 1px solid rgba(17, 18, 20, 0.15); 
+  background: #fff;
+  border: 1px solid rgba(17, 18, 20, 0.15);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
   transition: all 0.2s ease;
 
@@ -244,301 +417,1141 @@
   }
 
   .input-group-text {
-    background: transparent; border: none; color: var(--muted);
-    padding-left: 14px; padding-right: 8px; display: flex; align-items: center;
+    background: transparent;
+    border: none;
+    color: var(--muted);
+    padding-left: 14px;
+    padding-right: 8px;
+    display: flex;
+    align-items: center;
+
     i { font-size: 1rem; }
   }
 
   .form-control {
-    border: none; background: transparent; padding: 10px 0;
-    font-size: 0.9rem; color: var(--text); box-shadow: none;
+    border: none;
+    background: transparent;
+    padding: 10px 0;
+    font-size: 0.9rem;
+    color: var(--text);
+    box-shadow: none;
+
     &::placeholder { color: rgba(17, 18, 20, 0.4); font-weight: 500; }
     &:focus { outline: none; }
   }
 
+  /* ✅ garante o ícone de limpar aparecer sempre (se o HTML renderizar o botão) */
   .btn-clear {
-    background: transparent; border: none; color: var(--muted); padding: 0 12px;
-    display: flex; align-items: center; cursor: pointer; transition: color 0.2s;
+    display: inline-flex;
+    background: transparent;
+    border: none;
+    color: var(--muted);
+    padding: 0 12px;
+    align-items: center;
+    cursor: pointer;
+    transition: color 0.2s;
+
     &:hover { color: #dc3545; }
     i { font-size: 1rem; }
   }
 }
 
-/* Select de Paginação */
+/* PAGINATION SELECT STYLING */
+.page-size {
+  margin-left: auto;
+
+  @media (max-width: 500px) {
+    margin-left: 0;
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+.select-wrapper {
+  position: relative;
+  display: inline-block;
+  min-width: 90px;
+}
+
 .select-glass {
-  border-radius: 12px;
-  background: #fff;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: rgba(255, 255, 255, 0.7);
   border: 1px solid rgba(17, 18, 20, 0.15);
-  color: var(--text); font-weight: 600;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
-  padding: 8px 32px 8px 12px; cursor: pointer; transition: all 0.2s; width: auto;
-  &:focus { border-color: var(--brand); box-shadow: 0 4px 12px rgba(227, 61, 207, 0.15); outline: none; }
+  border-radius: 12px;
+  color: var(--blue);
+  font-weight: 800;
+  font-size: 0.9rem;
+  text-align: left;
+  padding: 8px 36px 8px 14px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  width: 100%;
+
+  &:hover {
+    background: #fff;
+    border-color: var(--blue);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(3, 15, 170, 0.1);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--brand);
+    box-shadow: 0 0 0 3px rgba(227, 61, 207, 0.15);
+  }
+}
+
+.select-icon {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--muted);
+  font-size: 0.75rem;
+  transition: transform 0.2s ease;
+}
+
+.select-wrapper:hover .select-icon { color: var(--blue); }
+
+/* === KPIs === */
+.geral-kpis {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-top: 20px;
+  margin-bottom: 16px;
+  width: 100%;
+
+  @media (max-width: 992px) { grid-template-columns: repeat(2, 1fr); }
+  @media (max-width: 576px) { grid-template-columns: 1fr; }
+}
+
+.kpi {
+  background: rgba(255,255,255,0.7);
+  border: 1px solid rgba(17,18,20,0.08);
+  border-radius: 16px;
+  padding: 12px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  backdrop-filter: blur(8px);
+  transition: transform 0.2s, box-shadow 0.2s;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 15px rgba(227, 61, 207, 0.1);
+    background: #fff;
+    border-color: var(--brand);
+  }
+
+  .lbl {
+    font-size: 0.72rem;
+    font-weight: 900;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--muted);
+
+    &.text-success { color: var(--success-text) !important; }
+    &.text-danger { color: var(--danger-text) !important; }
+  }
+
+  .val {
+    font-size: 1.25rem;
+    font-weight: 950;
+    color: var(--text);
+  }
+}
+
+/* ANIMAÇÃO */
+.animate-fade-in { animation: simpleFadeIn 0.5s ease-out forwards; }
+@keyframes simpleFadeIn {
+  from { opacity: 0; transform: translateY(5px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 /* ========================================================== */
 /* 6. CORPO, GRUPOS (ACCORDION) & TABELA */
 /* ========================================================== */
 .geral-body {
-  padding: 0; background: transparent; flex: 1; overflow: hidden; display: flex; flex-direction: column;
+  padding: 0;
+  background: transparent;
+  flex: 1;
+  overflow: hidden;
+
+  /* ✅ importante: garante layout flex para a área crescer corretamente */
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* IMPORTANTE p/ flex + scroll interno */
 }
 
-.groups-container { padding: 16px; overflow-y: auto; height: 100%; }
-.group-list { display: flex; flex-direction: column; gap: 12px; }
+/* ✅ AQUI ESTÁ O PONTO PRINCIPAL: */
+/* Em vez de rolar a página toda, o card usa a altura inteira e a listagem cresce. */
+.groups-container {
+  padding: 16px;
+
+  /* ❗️antes: overflow-y: auto; height: 100%; */
+  /* ✅ agora: deixa o container ser o “corpo” e a tabela/lista dominar a altura */
+  flex: 1 1 auto;
+  min-height: 0;
+  height: auto;
+
+  /* ✅ mantém scroll interno quando precisar (mas vai caber mais sem scroll) */
+  overflow-y: auto;
+}
+
+.group-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.empty-group {
+  background: rgba(255,255,255,0.7);
+  border: 1px dashed rgba(17,18,20,0.12);
+  border-radius: 16px;
+  padding: 18px;
+  text-align: center;
+  font-weight: 800;
+  color: var(--muted);
+}
 
-/* Cards de Grupo */
 .client-group-card {
-  background: #fff; border-radius: 16px;
-  border: 1px solid rgba(17,18,20,0.08); overflow: hidden;
+  background: #fff;
+  border-radius: 16px;
+  border: 1px solid rgba(17,18,20,0.08);
+  overflow: hidden;
   transition: all 0.3s ease;
-  &:hover { border-color: var(--brand); box-shadow: 0 4px 12px rgba(227,61,207,0.1); }
-  &.expanded { border-color: var(--brand); box-shadow: 0 8px 24px rgba(227,61,207,0.12); }
+
+  &:hover {
+    border-color: var(--brand);
+    box-shadow: 0 4px 12px rgba(227,61,207,0.1);
+  }
+
+  &.expanded {
+    border-color: var(--brand);
+    box-shadow: 0 8px 24px rgba(227,61,207,0.12);
+  }
 }
 
 .group-header {
-  padding: 16px 24px; display: flex; justify-content: space-between; align-items: center;
-  cursor: pointer; background: linear-gradient(180deg, #fff, #fdfdfd);
+  padding: 16px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  background: linear-gradient(180deg, #fff, #fdfdfd);
+
   &:hover .group-toggle-icon { color: var(--brand); }
 }
 
-.group-info { display: flex; flex-direction: column; gap: 6px; }
-.group-badges { display: flex; gap: 8px; flex-wrap: wrap; }
+.group-info {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.group-badges {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
 
 .badge-pill {
-  font-size: 0.7rem; padding: 4px 10px; border-radius: 99px; font-weight: 800; text-transform: uppercase;
+  font-size: 0.7rem;
+  padding: 4px 10px;
+  border-radius: 99px;
+  font-weight: 800;
+  text-transform: uppercase;
+
   &.total { background: rgba(3,15,170,0.1); color: var(--blue); }
   &.active { background: var(--success-bg); color: var(--success-text); }
   &.blocked { background: var(--danger-bg); color: var(--danger-text); }
 }
 
-.group-toggle-icon { font-size: 1.2rem; color: var(--muted); transition: transform 0.3s ease; }
-.client-group-card.expanded .group-toggle-icon { transform: rotate(180deg); color: var(--brand); }
+.group-toggle-icon {
+  font-size: 1.2rem;
+  color: var(--muted);
+  transition: transform 0.3s ease;
+}
+
+.client-group-card.expanded .group-toggle-icon {
+  transform: rotate(180deg);
+  color: var(--brand);
+}
 
 .group-body {
-  border-top: 1px solid rgba(17,18,20,0.06); background: #fbfbfc;
+  border-top: 1px solid rgba(17,18,20,0.06);
+  background: #fbfbfc;
   animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
-@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
 
-.inner-table-wrap { max-height: 450px; overflow-y: auto; }
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* >>> AQUI: altura da “tabela interna” quando expandir um cliente */
+/* ✅ AUMENTADO (base) para caber mais linhas */
+.inner-table-wrap {
+  max-height: clamp(620px, 72vh, 1250px); /* ✅ aumentei bastante o “campo de visão” */
+  overflow-y: auto;
+
+  /* ✅ evita "tremedeira" no scroll */
+  overscroll-behavior: contain;
+}
+
+.table-wrap {
+  overflow-x: auto;
+  overflow-y: auto;
+  height: 100%;
+}
+
+/* ✅ NOVO: no modo TABELA (view table), este wrapper precisa ocupar o resto do card */
+.table-wrap-tall {
+  /* ✅ o wrapper passa a ser “a área grande” da tabela */
+  flex: 1 1 auto;
+  min-height: 0;
+
+  /* ✅ muito mais alto para ver mais clientes sem scroll */
+  max-height: clamp(760px, 82vh, 1800px) !important;
+
+  /* ✅ scroll só quando realmente precisar */
+  overflow: auto;
+
+  /* ✅ dá acabamento e separa do fundo */
+  border-radius: 14px;
+  border: 1px solid rgba(17,18,20,0.10);
+  background: rgba(255,255,255,0.7);
+  backdrop-filter: blur(6px);
+
+  /* opcional: deixa bem “macio” o scroll */
+  overscroll-behavior: contain;
+}
+
+.geral-body > .table-wrap-tall {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: auto;
+}
 
-/* Tabela */
-.table-wrap { overflow-x: auto; overflow-y: auto; height: 100%; }
 .table-modern {
-  width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0;
+  width: 100%;
+  min-width: 1000px;
+  border-collapse: separate;
+  border-spacing: 0;
+
   thead th {
-    position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px);
-    border-bottom: 2px solid rgba(227, 61, 207, 0.15); padding: 12px;
-    color: rgba(17, 18, 20, 0.7); font-size: 0.8rem; font-weight: 950; letter-spacing: 0.05em; text-transform: uppercase;
-    white-space: nowrap; cursor: pointer; transition: color 0.2s; text-align: center !important;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(8px);
+    border-bottom: 2px solid rgba(227, 61, 207, 0.15);
+    padding: 12px;
+    color: rgba(17, 18, 20, 0.7);
+    font-size: 0.8rem;
+    font-weight: 950;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color 0.2s;
+    text-align: center !important;
+
     &:hover { color: var(--brand); }
   }
+
   tbody tr {
-    transition: background-color 0.2s; border-bottom: 1px solid rgba(17,18,20,0.05);
+    transition: background-color 0.2s;
+    border-bottom: 1px solid rgba(17,18,20,0.05);
+
     &:hover { background-color: rgba(227, 61, 207, 0.05); }
     td { border-bottom: 1px solid rgba(17,18,20,0.04); }
   }
-  td { padding: 12px; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.875rem; color: var(--text); text-align: center !important; }
+
+  td {
+    padding: 12px;
+    vertical-align: middle;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 0.875rem;
+    color: var(--text);
+    text-align: center !important;
+  }
+}
+
+.th-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.sort-caret {
+  display: inline-block;
+  width: 14px;
+  text-align: center;
+  opacity: 0.3;
+
+  &.active { opacity: 1; color: var(--brand); }
 }
 
-.th-content { display: flex; align-items: center; justify-content: center; gap: 4px; }
-.sort-caret { display: inline-block; width: 14px; text-align: center; opacity: 0.3; &.active { opacity: 1; color: var(--brand); } }
 .text-brand { color: var(--brand) !important; }
 .text-blue { color: var(--blue) !important; }
 .fw-black { font-weight: 950; }
-.td-clip { overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
+
+.td-clip {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 250px;
+}
+
 .empty-state { background: rgba(255,255,255,0.4); }
 
 .status-pill {
-  display: inline-block; vertical-align: middle; max-width: 100%; padding: 6px 14px;
-  border-radius: 999px; font-weight: 950; font-size: 0.75rem; letter-spacing: 0.3px; text-align: center; text-transform: uppercase;
-  border: 1px solid rgba(17,18,20,0.1); background: rgba(17,18,20,0.05); color: rgba(17,18,20,0.7);
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-  &.is-active { background: rgba(25, 135, 84, 0.15); border-color: rgba(25, 135, 84, 0.25); color: #157347; }
-  &.is-blocked { background: rgba(220, 53, 69, 0.15); border-color: rgba(220, 53, 69, 0.25); color: #b02a37; }
-  &.static { display: inline-flex; width: auto; }
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 100%;
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-weight: 950;
+  font-size: 0.75rem;
+  letter-spacing: 0.3px;
+  text-align: center;
+  text-transform: uppercase;
+  border: 1px solid rgba(17,18,20,0.1);
+  background: rgba(17,18,20,0.05);
+  color: rgba(17,18,20,0.7);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.is-active {
+    background: rgba(25, 135, 84, 0.15);
+    border-color: rgba(25, 135, 84, 0.25);
+    color: #157347;
+  }
+
+  &.is-blocked {
+    background: rgba(220, 53, 69, 0.15);
+    border-color: rgba(220, 53, 69, 0.25);
+    color: #b02a37;
+  }
+
+  &.static {
+    display: inline-flex;
+    width: auto;
+  }
+}
+
+.action-group {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
 }
 
-/* Botões de Ação na Tabela */
-.action-group { display: flex; justify-content: center; gap: 6px; }
 .btn-icon {
-  width: 32px; height: 32px; border: none; background: transparent; border-radius: 8px;
-  display: flex; align-items: center; justify-content: center; color: rgba(17,18,20,0.5); transition: all 0.2s;
-  &:hover { background: rgba(17,18,20,0.05); color: var(--text); transform: translateY(-1px); }
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(17,18,20,0.5);
+  transition: all 0.2s;
+
+  &:hover {
+    background: rgba(17,18,20,0.05);
+    color: var(--text);
+    transform: translateY(-1px);
+  }
+
   &.success:hover { color: var(--success-text); background: var(--success-bg); }
   &.primary:hover { color: var(--blue); background: rgba(3,15,170,0.1); }
   &.danger:hover { color: var(--danger-text); background: var(--danger-bg); }
 }
 
-/* ========================================================== */
-/* 7. FOOTER (PAGINAÇÃO) */
-/* ========================================================== */
+/* FOOTER */
 .geral-footer {
-  padding: 14px 24px; border-top: 1px solid rgba(17, 18, 20, 0.06);
-  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; flex-shrink: 0;
-  @media (max-width: 768px) { justify-content: center; text-align: center; }
-}
-.pagination-modern .page-link {
-  color: var(--blue); font-weight: 900; border-radius: 10px; border: 1px solid rgba(17,18,20,0.1);
-  background: rgba(255,255,255,0.6); margin: 0 2px;
-  &:hover { transform: translateY(-1px); border-color: var(--brand); color: var(--brand); }
-}
-.pagination-modern .page-item.active .page-link { background-color: var(--blue); border-color: var(--blue); color: #fff; }
+  padding: 14px 24px;
+  border-top: 1px solid rgba(17, 18, 20, 0.06);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  flex-shrink: 0;
 
-/* ========================================================== */
-/* 8. MODAIS (Z-INDEX ALTO) */
-/* ========================================================== */
-.modal-backdrop-custom { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9990; backdrop-filter: blur(4px); }
-.modal-custom { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 9995; padding: 16px; }
+  @media (max-width: 768px) {
+    justify-content: center;
+    text-align: center;
+  }
+}
+
+.pagination-modern .page-link {
+  color: var(--blue);
+  font-weight: 900;
+  border-radius: 10px;
+  border: 1px solid rgba(17,18,20,0.1);
+  background: rgba(255,255,255,0.6);
+  margin: 0 2px;
+
+  &:hover {
+    transform: translateY(-1px);
+    border-color: var(--brand);
+    color: var(--brand);
+  }
+}
+
+.pagination-modern .page-item.active .page-link {
+  background-color: var(--blue);
+  border-color: var(--blue);
+  color: #fff;
+}
+
+/* MODAIS */
+.modal-backdrop-custom {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.45);
+  z-index: 9990;
+  backdrop-filter: blur(4px);
+}
+
+.modal-custom {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9995;
+  padding: 16px;
+}
 
 .modal-card {
-  background: #ffffff; border: 1px solid rgba(255,255,255,0.8); border-radius: 20px;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); overflow: hidden; display: flex; flex-direction: column;
+  background: #ffffff;
+  border: 1px solid rgba(255,255,255,0.8);
+  border-radius: 20px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
   animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  width: min(850px, 100%); max-height: 90vh;
+  width: min(850px, 100%);
+  max-height: 90vh;
+}
+
+@keyframes modalPop {
+  from { opacity: 0; transform: scale(0.95) translateY(10px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
 }
-@keyframes modalPop { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
 
 .modal-header {
-  padding: 16px 24px; border-bottom: 1px solid rgba(0,0,0,0.06); background: #fff; display: flex; justify-content: space-between; align-items: center;
-  .modal-title { font-size: 1.1rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 12px; }
-  .icon-bg { width: 32px; height: 32px; border-radius: 10px; background: rgba(3, 15, 170, 0.1); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 16px; &.success { background: var(--success-bg); color: var(--success-text); } &.primary-soft { background: rgba(3, 15, 170, 0.1); color: var(--blue); } &.brand-soft { background: rgba(227, 61, 207, 0.1); color: var(--brand); } }
-  .btn-icon { color: var(--muted); background: transparent; font-size: 1.2rem; &:hover { color: var(--brand); transform: rotate(90deg); } }
-}
-.modal-body { padding: 24px; overflow-y: auto; &.bg-light-gray { background-color: #f8f9fa; } }
+  padding: 16px 24px;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+  background: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
-/* ========================================================== */
-/* 9. LAYOUT DE DASHBOARD (MODAIS DE CRIAÇÃO E DETALHES) */
-/* ========================================================== */
+  .modal-title {
+    font-size: 1.1rem;
+    font-weight: 800;
+    color: var(--text);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .icon-bg {
+    width: 32px;
+    height: 32px;
+    border-radius: 10px;
+    background: rgba(3, 15, 170, 0.1);
+    color: var(--blue);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+
+    &.success { background: var(--success-bg); color: var(--success-text); }
+    &.primary-soft { background: rgba(3, 15, 170, 0.1); color: var(--blue); }
+    &.brand-soft { background: rgba(227, 61, 207, 0.1); color: var(--brand); }
+  }
+
+  .btn-icon {
+    color: var(--muted);
+    background: transparent;
+    font-size: 1.2rem;
+
+    &:hover { color: var(--brand); }
+  }
+}
+
+.modal-body {
+  padding: 24px;
+  overflow-y: auto;
+
+  &.bg-light-gray { background-color: #f8f9fa; }
+}
+
+/* DASHBOARD & DETAILS */
 .details-dashboard {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
+
+  @media (max-width: 992px) { grid-template-columns: repeat(2, 1fr); }
+  @media (max-width: 700px) { grid-template-columns: 1fr; }
 }
 
-@media (max-width: 992px) {
-  .details-dashboard {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 700px) {
-  .details-dashboard {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* ESTILOS ESPECÍFICOS PARA DETAILS/SUMMARY (ACORDEÃO) 
-*/
 details.detail-box {
-  background: #fff; 
-  border-radius: 16px; 
+  background: #fff;
+  border-radius: 16px;
   border: 1px solid rgba(0,0,0,0.05);
-  box-shadow: 0 2px 8px rgba(0,0,0,0.02); 
-  overflow: hidden; 
-  height: fit-content; 
-  
-  &:not([open]) {
-      padding-bottom: 0;
-  }
+  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
+  overflow: hidden;
+  height: fit-content;
+
+  &:not([open]) { padding-bottom: 0; }
 }
 
-/* O elemento Detail Box padrão (para modais que não usam details tag) */
 div.detail-box {
-  background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,0.05);
-  box-shadow: 0 2px 8px rgba(0,0,0,0.02); overflow: hidden; height: 100%;
+  background: #fff;
+  border-radius: 16px;
+  border: 1px solid rgba(0,0,0,0.05);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 summary.box-header {
-  padding: 10px 16px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; color: var(--muted);
-  border-bottom: 1px solid rgba(0,0,0,0.04); background: #fdfdfd; display: flex; align-items: center;
-  cursor: pointer; 
+  padding: 10px 16px;
+  font-size: 0.8rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  color: var(--muted);
+  border-bottom: 1px solid rgba(0,0,0,0.04);
+  background: #fdfdfd;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
   list-style: none;
   user-select: none;
-  
-  &::-webkit-details-marker {
-      display: none;
-  }
 
+  &::-webkit-details-marker { display: none; }
   i:not(.transition-icon) { color: var(--brand); }
 }
 
 .transition-icon {
-    transition: transform 0.3s ease;
-    font-size: 1rem;
-    color: var(--muted);
+  transition: transform 0.3s ease;
+  font-size: 1rem;
+  color: var(--muted);
 }
 
 details[open] summary .transition-icon {
-    transform: rotate(180deg);
-    color: var(--brand);
+  transform: rotate(180deg);
+  color: var(--brand);
 }
 
-/* Header normal para divs */
 div.box-header {
-  padding: 10px 16px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; color: var(--muted);
-  border-bottom: 1px solid rgba(0,0,0,0.04); background: #fdfdfd; display: flex; align-items: center;
+  padding: 10px 16px;
+  font-size: 0.8rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  color: var(--muted);
+  border-bottom: 1px solid rgba(0,0,0,0.04);
+  background: #fdfdfd;
+  display: flex;
+  align-items: center;
+
   i { color: var(--brand); }
 }
 
-.box-body { padding: 16px; &.compact { padding: 12px 16px; } }
+.box-body {
+  padding: 16px;
 
-/* Células de Informação (Modal Detalhes) */
-.row-item {
-  display: flex; justify-content: space-between; margin-bottom: 8px;
-  font-size: 0.85rem; color: var(--muted); align-items: baseline;
-  &:last-child { margin-bottom: 0; }
-  .lbl { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
-  .val { font-weight: 600; color: var(--text); text-align: right; }
+  &.compact { padding: 12px 16px; }
+  &.compact-padding { padding: 12px; }
 }
 
-.divider { height: 1px; background: rgba(0,0,0,0.06); margin: 12px 0; &.small { margin: 8px 0; } }
+.row-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 0.85rem;
+  color: var(--muted);
+  align-items: baseline;
+
+  &:last-child { margin-bottom: 0; }
+
+  .lbl {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  .val {
+    font-weight: 600;
+    color: var(--text);
+    text-align: right;
+  }
+}
+
+.divider {
+  height: 1px;
+  background: rgba(0,0,0,0.06);
+  margin: 12px 0;
+
+  &.small { margin: 8px 0; }
+}
 
 .row-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
-.mini-item { display: flex; flex-direction: column; .lbl { font-size: 0.65rem; font-weight: 700; color: var(--muted); } .val { font-size: 0.85rem; font-weight: 700; color: var(--text); } }
 
-/* ========================================================== */
-/* 10. ESTILOS DE FORMULÁRIO (PARA O MODAL DE CRIAÇÃO/EDIÇÃO) */
-/* ========================================================== */
-.form-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 12px;
+.mini-item {
+  display: flex;
+  flex-direction: column;
+
+  .lbl { font-size: 0.65rem; font-weight: 700; color: var(--muted); }
+  .val { font-size: 0.85rem; font-weight: 700; color: var(--text); }
 }
 
-.form-field { 
-    display: flex; flex-direction: column; gap: 6px; 
-    label { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(17,18,20,0.65); } 
-    &.span-2 { grid-column: span 2; }
+.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  label {
+    font-size: 0.75rem;
+    font-weight: 900;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: rgba(17,18,20,0.65);
+  }
+
+  &.span-2 { grid-column: span 2; }
 }
 
+/* --- FORM CONTROL (BORDAS MAIS VISÍVEIS) --- */
 .form-control, .form-select {
-    border-radius: 8px; border: 1px solid rgba(17,18,20,0.15);
-    &:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(227,61,207,0.15); }
+  border-radius: 8px;
+  border: 1px solid rgba(17, 18, 20, 0.45);
+  background-color: #fff;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--text);
+  transition: border-color 0.2s, box-shadow 0.2s;
+
+  &:hover { border-color: rgba(17, 18, 20, 0.7); }
+
+  &:focus {
+    border-color: var(--brand);
+    box-shadow: 0 0 0 3px rgba(227, 61, 207, 0.15);
+    outline: none;
+  }
+
+  &:disabled,
+  &[readonly] {
+    background-color: rgba(17, 18, 20, 0.04);
+    border-color: rgba(17, 18, 20, 0.2);
+    color: var(--muted);
+  }
 }
 
-/* Bordas coloridas para seções financeiras */
 .vivo-border { border-left: 4px solid #8a2be2; }
 .header-vivo { color: #8a2be2; background-color: #fbf5fc; i { color: #8a2be2; } }
-.border-vivo { border-color: #8a2be2 !important; }
+.border-vivo { border-color: #8a2be2 !important; border-width: 2px !important; }
 .text-vivo { color: #8a2be2 !important; }
 
 .line-border { border-left: 4px solid var(--blue); }
 .header-line { color: var(--blue); background-color: #f5f6ff; i { color: var(--blue); } }
-.border-line { border-color: var(--blue) !important; }
+.border-line { border-color: var(--blue) !important; border-width: 2px !important; }
 .text-line { color: var(--blue) !important; }
 
-/* ========================================================== */
-/* 11. FINANCEIRO (MODAL DE VISUALIZAÇÃO) & EDIÇÃO (ACCORDION) */
-/* ========================================================== */
-.finance-dashboard { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; @media(max-width: 700px) { grid-template-columns: 1fr; } }
-.finance-card { background: #fff; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.04); overflow: hidden; &.vivo-card { border-top: 4px solid var(--brand); .card-header-f { color: var(--brand); background: var(--bg-vivo); } } &.line-card { border-top: 4px solid var(--blue); .card-header-f { color: var(--blue); background: var(--bg-line); } } }
-.card-header-f { padding: 12px 16px; font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; }
-.card-body-f { padding: 16px; .row-item { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.85rem; color: var(--muted); strong { color: var(--text); font-weight: 700; } &.total { font-size: 1rem; color: var(--text); margin-top: 8px; margin-bottom: 0; strong { color: var(--text); font-weight: 900; } } } .divider { height: 1px; background: rgba(0,0,0,0.06); margin: 12px 0; } }
-.finance-summary { background: #fff; border-radius: 16px; padding: 16px 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.03); display: flex; align-items: center; justify-content: space-around; .summary-item { display: flex; flex-direction: column; align-items: center; .lbl { font-size: 0.75rem; text-transform: uppercase; font-weight: 800; color: var(--muted); } .val { font-size: 1.25rem; font-weight: 900; } } .vertical-line { width: 1px; height: 40px; background: rgba(0,0,0,0.08); } }
+.finance-dashboard {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+
+  @media(max-width: 700px) { grid-template-columns: 1fr; }
+}
+
+.finance-card {
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  border: 1px solid rgba(0,0,0,0.04);
+  overflow: hidden;
+
+  &.vivo-card {
+    border-top: 4px solid var(--brand);
+
+    .card-header-f {
+      color: var(--brand);
+      background: var(--bg-vivo);
+    }
+  }
+
+  &.line-card {
+    border-top: 4px solid var(--blue);
+
+    .card-header-f {
+      color: var(--blue);
+      background: var(--bg-line);
+    }
+  }
+}
+
+.card-header-f {
+  padding: 12px 16px;
+  font-weight: 800;
+  font-size: 0.95rem;
+  display: flex;
+  align-items: center;
+}
+
+.card-body-f {
+  padding: 16px;
+
+  .row-item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    font-size: 0.85rem;
+    color: var(--muted);
+
+    strong {
+      color: var(--text);
+      font-weight: 700;
+    }
+
+    &.total {
+      font-size: 1rem;
+      color: var(--text);
+      margin-top: 8px;
+      margin-bottom: 0;
+
+      strong { color: var(--text); font-weight: 900; }
+    }
+  }
+
+  .divider {
+    height: 1px;
+    background: rgba(0,0,0,0.06);
+    margin: 12px 0;
+  }
+}
+
+.finance-summary {
+  background: #fff;
+  border-radius: 16px;
+  padding: 16px 24px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  .summary-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .lbl {
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      font-weight: 800;
+      color: var(--muted);
+    }
+
+    .val {
+      font-size: 1.25rem;
+      font-weight: 900;
+    }
+  }
+
+  .vertical-line {
+    width: 1px;
+    height: 40px;
+    background: rgba(0,0,0,0.08);
+  }
+}
+
 .text-success { color: var(--success-text) !important; }
+.text-danger { color: var(--danger-text) !important; }
 
 .modal-card.modal-edit { width: min(1100px, 100%); }
-.edit-sections { display: grid; gap: 12px; }
-.edit-section { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.03); summary { cursor: pointer; user-select: none; padding: 12px 16px; font-weight: 950; color: rgba(17,18,20,0.75); display: flex; align-items: center; background: linear-gradient(180deg, rgba(227,61,207,0.06), rgba(255,255,255,0.6)); border-bottom: 1px solid rgba(0,0,0,0.06); i { color: var(--blue); } } }
-.edit-grid { padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; @media (max-width: 700px) { grid-template-columns: 1fr; } }
-.edit-section .form-control { border-radius: 12px; border: 1px solid rgba(17,18,20,0.12); background: rgba(255,255,255,0.85); &:focus { border-color: rgba(227,61,207,0.5); box-shadow: 0 0 0 2px rgba(227,61,207,0.12); } }
\ No newline at end of file
+
+.edit-sections {
+  display: grid;
+  gap: 12px;
+}
+
+.edit-section {
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.06);
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
+
+  summary {
+    cursor: pointer;
+    user-select: none;
+    padding: 12px 16px;
+    font-weight: 950;
+    color: rgba(17,18,20,0.75);
+    display: flex;
+    align-items: center;
+    background: linear-gradient(180deg, rgba(227,61,207,0.06), rgba(255,255,255,0.6));
+    border-bottom: 1px solid rgba(0,0,0,0.06);
+
+    i { color: var(--blue); }
+  }
+}
+
+.edit-grid {
+  padding: 14px 16px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+
+  @media (max-width: 700px) { grid-template-columns: 1fr; }
+}
+
+/* --- MODAL DETALHES NOVO LAYOUT (Compacto) --- */
+.modal-xl-custom {
+  width: min(1100px, 95vw);
+  max-height: 85vh;
+}
+
+.h-100 { height: 100% !important; }
+
+/* Grid principal compactado */
+.info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  padding: 0;
+}
+
+.compact-gap { gap: 6px !important; }
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 5px 8px;
+  background: rgba(245, 245, 247, 0.5);
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.03);
+  transition: background 0.2s;
+
+  &:hover {
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+  }
+
+  &.span-2 { grid-column: span 2; }
+
+  .lbl {
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 800;
+    color: var(--muted);
+    margin-bottom: 2px;
+  }
+
+  .val {
+    font-size: 0.9rem;
+    font-weight: 700;
+    color: var(--text);
+    word-break: break-word;
+    line-height: 1.2;
+
+    &.fs-4 { font-size: 1.1rem !important; }
+    &.small-text { font-size: 0.75rem; font-family: monospace; }
+  }
+}
+
+.scale-up { transform: scale(1.05); }
+
+.box-header.justify-content-center {
+  justify-content: center !important;
+  text-align: center;
+  background: rgba(227, 61, 207, 0.04);
+  color: var(--brand);
+  padding: 8px;
+
+  i { margin-right: 8px; }
+}
+
+/* ==========================================================
+   AJUSTES DE RESPONSIVIDADE (SEM ALTERAR ESTILIZAÇÃO/TEMA)
+   ========================================================== */
+
+/* 1) Notebook / telas médias: aumenta “presença” da tabela */
+@media (max-width: 1440px) and (min-width: 992px) {
+  :host {
+    /* ✅ reduz um pouco o “respiro” externo pra sobrar altura útil */
+    --page-top-gap: 10px;
+    --page-bottom-gap: clamp(70px, 9vh, 130px);
+  }
+
+  .container-geral { max-width: 96vw; }
+
+  /* ✅ compacta topo para liberar mais área de listagem */
+  .geral-header { padding: 12px 18px !important; }
+  .title { margin-top: 6px !important; }
+
+  .table-modern {
+    min-width: 980px;
+    td { padding: 14px; font-size: 0.92rem; }
+    thead th { padding: 14px; font-size: 0.84rem; }
+  }
+
+  .btn-icon { width: 34px; height: 34px; }
+
+  /* ✅ MAIS ALTURA NO CARD */
+  .geral-card { max-height: calc(100vh - 10px) !important; }
+
+  /* listagem com menos padding */
+  .groups-container { padding: 12px 14px !important; }
+  .group-list { gap: 10px !important; }
+  .group-header { padding: 12px 18px !important; }
+
+  /* ✅ NOVO: modo tabela (lista de clientes) com campo de visão maior */
+  .table-wrap-tall {
+    max-height: clamp(820px, 86vh, 2000px) !important;
+  }
+
+  /* quando expandir: tabela interna mais alta também */
+  .inner-table-wrap {
+    max-height: clamp(700px, 78vh, 1400px) !important;
+  }
+}
+
+/* 2) Desktop grande / TV */
+@media (min-width: 1600px) {
+  :host {
+    --page-top-gap: 10px;
+    --page-bottom-gap: clamp(80px, 9vh, 150px);
+  }
+
+  .container-geral { max-width: 1500px; }
+
+  .table-modern {
+    min-width: 0;
+    td { padding: 14px 16px; font-size: 0.95rem; }
+    thead th { padding: 14px 16px; font-size: 0.86rem; }
+  }
+
+  .btn-icon { width: 36px; height: 36px; }
+
+  /* ✅ MAIS ALTURA NO CARD */
+  .geral-card { max-height: calc(100vh - 8px) !important; }
+
+  /* compacta topo */
+  .geral-header { padding: 12px 22px !important; }
+  .geral-kpis { margin-top: 12px !important; margin-bottom: 10px !important; }
+
+  .groups-container { padding: 14px 18px !important; }
+
+  /* ✅ NOVO: modo tabela bem maior na TV */
+  .table-wrap-tall {
+    max-height: clamp(980px, 88vh, 2400px) !important;
+  }
+
+  /* ✅ tabela interna (expandido) ainda maior */
+  .inner-table-wrap {
+    max-height: clamp(820px, 80vh, 1700px) !important;
+  }
+}
+
+/* 3) TV muito grande / 4K */
+@media (min-width: 2200px) {
+  :host {
+    --page-bottom-gap: clamp(90px, 8vh, 170px);
+  }
+
+  .container-geral { max-width: 1750px; }
+
+  .table-modern {
+    td { padding: 16px 18px; font-size: 1rem; }
+    thead th { padding: 16px 18px; font-size: 0.9rem; }
+  }
+
+  .btn-icon { width: 38px; height: 38px; }
+
+  .geral-card { max-height: calc(100vh - 6px) !important; }
+
+  /* ✅ NOVO: campo de visão máximo */
+  .table-wrap-tall {
+    max-height: clamp(1180px, 90vh, 3200px) !important;
+  }
+
+  .inner-table-wrap {
+    max-height: clamp(980px, 82vh, 2200px) !important;
+  }
+}
+
+/* 4) 4K extremo (opcional) */
+@media (min-width: 3000px) {
+  :host {
+    --page-bottom-gap: clamp(100px, 8vh, 190px);
+  }
+
+  .container-geral { max-width: 2100px; }
+  .title { font-size: 28px; }
+  .subtitle { font-size: 1rem; }
+
+  .table-modern {
+    td { padding: 18px 20px; font-size: 1.05rem; }
+    thead th { padding: 18px 20px; font-size: 0.95rem; }
+  }
+
+  .btn-icon { width: 40px; height: 40px; }
+
+  /* ✅ NOVO: modo tabela ainda mais alto */
+  .table-wrap-tall {
+    max-height: clamp(1400px, 92vh, 3800px) !important;
+  }
+
+  .inner-table-wrap {
+    max-height: clamp(1150px, 84vh, 2600px) !important;
+  }
+}
+
+/* 5) Mobile continua protegido */
+@media (max-width: 576px) {
+  :host {
+    --page-top-gap: 16px;
+    --page-bottom-gap: 140px; /* ✅ mobile com footer geralmente maior */
+  }
+
+  .container-geral { max-width: 100%; }
+  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .table-modern { min-width: 900px; }
+
+  /* no mobile, evita exagero de altura da tabela interna */
+  .inner-table-wrap {
+    max-height: 420px !important;
+  }
+
+  /* no mobile, não estoura em altura gigante */
+  .table-wrap-tall {
+    max-height: 70vh !important;
+  }
+}
diff --git a/src/app/pages/geral/geral.ts b/src/app/pages/geral/geral.ts
index 964dac3..9eefd14 100644
--- a/src/app/pages/geral/geral.ts
+++ b/src/app/pages/geral/geral.ts
@@ -1,32 +1,100 @@
-import { Component, ElementRef, ViewChild, Inject, PLATFORM_ID, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  ViewChild,
+  Inject,
+  PLATFORM_ID,
+  AfterViewInit,
+  ChangeDetectorRef,
+  OnDestroy,
+  HostListener
+} from '@angular/core';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { HttpClient, HttpClientModule, HttpParams, HttpErrorResponse } from '@angular/common/http';
+import {
+  HttpClient,
+  HttpClientModule,
+  HttpParams,
+  HttpErrorResponse
+} from '@angular/common/http';
 
 type SortDir = 'asc' | 'desc';
 type CreateMode = 'NEW_CLIENT' | 'NEW_LINE_IN_GROUP';
 
 interface LineRow {
-  id: string; item: string; linha: string; cliente: string; usuario: string; status: string; skil: string; contrato: string;
+  id: string;
+  item: string;
+  linha: string;
+  cliente: string;
+  usuario: string;
+  status: string;
+  skil: string;
+  contrato: string;
 }
 
 interface ApiPagedResult<T> {
-  page: number; pageSize: number; total: number; items: T[];
+  page: number;
+  pageSize: number;
+  total: number;
+  items: T[];
 }
 
 interface ApiLineList {
-  id: string; item: number; linha: string | null; cliente: string | null; usuario: string | null; vencConta: string | null; status?: string | null; skil?: string | null;
+  id: string;
+  item: number;
+  linha: string | null;
+  cliente: string | null;
+  usuario: string | null;
+  vencConta: string | null;
+  status?: string | null;
+  skil?: string | null;
 }
 
 interface ApiLineDetail {
-  id: string; item: number; conta?: string | null; linha?: string | null; chip?: string | null; cliente?: string | null; usuario?: string | null; planoContrato?: string | null; status?: string | null; skil?: string | null; modalidade?: string | null; dataBloqueio?: string | null; cedente?: string | null; solicitante?: string | null; dataEntregaOpera?: string | null; dataEntregaCliente?: string | null; vencConta?: string | null; franquiaVivo?: number | null; valorPlanoVivo?: number | null; gestaoVozDados?: number | null; skeelo?: number | null; vivoNewsPlus?: number | null; vivoTravelMundo?: number | null; vivoGestaoDispositivo?: number | null; valorContratoVivo?: number | null; franquiaLine?: number | null; franquiaGestao?: number | null; locacaoAp?: number | null; valorContratoLine?: number | null; desconto?: number | null; lucro?: number | null;
+  id: string;
+  item: number;
+  conta?: string | null;
+  linha?: string | null;
+  chip?: string | null;
+  cliente?: string | null;
+  usuario?: string | null;
+  planoContrato?: string | null;
+  status?: string | null;
+  skil?: string | null;
+  modalidade?: string | null;
+  dataBloqueio?: string | null;
+  cedente?: string | null;
+  solicitante?: string | null;
+  dataEntregaOpera?: string | null;
+  dataEntregaCliente?: string | null;
+  vencConta?: string | null;
+
+  franquiaVivo?: number | null;
+  valorPlanoVivo?: number | null;
+  gestaoVozDados?: number | null;
+  skeelo?: number | null;
+  vivoNewsPlus?: number | null;
+  vivoTravelMundo?: number | null;
+  vivoGestaoDispositivo?: number | null;
+  valorContratoVivo?: number | null;
+
+  franquiaLine?: number | null;
+  franquiaGestao?: number | null;
+  locacaoAp?: number | null;
+  valorContratoLine?: number | null;
+
+  desconto?: number | null;
+  lucro?: number | null;
 }
 
 type UpdateMobileLineRequest = Omit<ApiLineDetail, 'id'>;
 type CreateMobileLineRequest = Omit<ApiLineDetail, 'id'>;
 
 interface ClientGroupDto {
-  cliente: string; totalLinhas: number; ativos: number; bloqueados: number;
+  cliente: string;
+  totalLinhas: number;
+  ativos: number;
+  bloqueados: number;
 }
 
 @Component({
@@ -35,16 +103,26 @@ interface ClientGroupDto {
   templateUrl: './geral.html',
   styleUrls: ['./geral.scss']
 })
-export class Geral implements AfterViewInit {
+export class Geral implements AfterViewInit, OnDestroy {
   toastMessage = '';
+
   @ViewChild('successToast', { static: false }) successToast!: ElementRef;
   @ViewChild('excelInput') excelInput!: ElementRef<HTMLInputElement>;
 
-  constructor(@Inject(PLATFORM_ID) private platformId: object, private http: HttpClient, private cdr: ChangeDetectorRef) {}
+  @ViewChild('editModal', { static: false }) editModal!: ElementRef<HTMLElement>;
+  @ViewChild('createModal', { static: false }) createModal!: ElementRef<HTMLElement>;
+  @ViewChild('detailModal', { static: false }) detailModal!: ElementRef<HTMLElement>;
+  @ViewChild('financeModal', { static: false }) financeModal!: ElementRef<HTMLElement>;
+
+  constructor(
+    @Inject(PLATFORM_ID) private platformId: object,
+    private http: HttpClient,
+    private cdr: ChangeDetectorRef
+  ) {}
 
   private readonly apiBase = 'https://localhost:7205/api/lines';
   loading = false;
-  
+
   rows: LineRow[] = [];
   clientGroups: ClientGroupDto[] = [];
   groupLines: LineRow[] = [];
@@ -53,8 +131,11 @@ export class Geral implements AfterViewInit {
 
   searchTerm = '';
   filterSkil: 'ALL' | 'PF' | 'PJ' | 'RESERVA' = 'ALL';
+
   clientsList: string[] = [];
-  selectedClient: string | null = null;
+  loadingClientsList = false;
+
+  selectedClients: string[] = [];
   showClientMenu = false;
   clientSearchTerm = '';
 
@@ -66,56 +147,156 @@ export class Geral implements AfterViewInit {
   pageSize = 10;
   total = 0;
 
-  detailOpen = false; financeOpen = false; editOpen = false; editSaving = false;
-  createOpen = false; createSaving = false;
+  detailOpen = false;
+  financeOpen = false;
+  editOpen = false;
+  editSaving = false;
+
+  createOpen = false;
+  createSaving = false;
   createMode: CreateMode = 'NEW_CLIENT';
 
-  detailData: any = null; financeData: any = null; editModel: any = null;
+  detailData: any = null;
+  financeData: any = null;
+  editModel: any = null;
+
   private editingId: string | null = null;
   private searchTimer: any = null;
 
-  // ========================================================================
-  // ✅ STATUS CORRIGIDOS (Apenas as opções permitidas)
-  // ========================================================================
-  readonly statusOptions = ['ATIVA', 'BLOQUEIO PERDA/ROUBO', 'BLOQUEIO 120 DIAS'];
-  
+  private searchResolvedClient: string | null = null;
+
+  loadingKpis = false;
+  kpiTotalClientes = 0;
+  kpiTotalLinhas = 0;
+  kpiAtivas = 0;
+  kpiBloqueadas = 0;
+
+  readonly statusOptions = ['ATIVO', 'BLOQUEIO PERDA/ROUBO', 'BLOQUEIO 120 DIAS'];
   readonly skilOptions = ['PESSOA FÍSICA', 'PESSOA JURÍDICA', 'RESERVA'];
-  
+
   readonly planOptions = [
-    'SMART EMPRESAS 0.2GB TE', 'SMART EMPRESAS 0.5GB TE', 'SMART EMPRESAS 2GB D', 
-    'SMART EMPRESAS 4GB', 'SMART EMPRESAS 6GB', 'SMART EMPRESAS 8GB', 
-    'SMART EMPRESAS 10GB', 'SMART EMPRESAS 20GB', 'SMART EMPRESAS 50GB', 
-    'M2M 20MB', 'M2M 50MB'
+    'SMART EMPRESAS 0.2GB TE',
+    'SMART EMPRESAS 0.5GB TE',
+    'SMART EMPRESAS 2GB D',
+    'SMART EMPRESAS 4GB',
+    'SMART EMPRESAS 6GB',
+    'SMART EMPRESAS 8GB',
+    'SMART EMPRESAS 10GB',
+    'SMART EMPRESAS 20GB',
+    'SMART EMPRESAS 50GB',
+    'M2M 20MB',
+    'M2M 50MB'
   ];
-  
+
   readonly contaOptions = [
-    '0172593311', '0172593840', '0430237019', '0435288088', 
-    '0437488125', '0449508564', '0455371844', 'CLARO', 'TIM'
+    '0172593311',
+    '0172593840',
+    '0430237019',
+    '0435288088',
+    '0437488125',
+    '0449508564',
+    '0455371844',
+    'CLARO',
+    'TIM'
   ];
 
   createModel: any = {
-    cliente: '', docType: 'PF', docNumber: '', linha: '', chip: '', usuario: '',
-    status: '', planoContrato: '', conta: '', vencConta: '', skil: 'PESSOA FÍSICA',
-    modalidade: '', item: 0, cedente: '', solicitante: '',
-    dataBloqueio: '', dataEntregaOpera: '', dataEntregaCliente: '',
-    franquiaVivo: null, valorPlanoVivo: null, gestaoVozDados: null, skeelo: null,
-    vivoNewsPlus: null, vivoTravelMundo: null, vivoGestaoDispositivo: null, valorContratoVivo: null,
-    franquiaLine: null, franquiaGestao: null, locacaoAp: null, valorContratoLine: null,
-    desconto: null, lucro: null
+    cliente: '',
+    docType: 'PF',
+    docNumber: '',
+    linha: '',
+    chip: '',
+    usuario: '',
+    status: '',
+    planoContrato: '',
+    conta: '',
+    vencConta: '',
+    skil: 'PESSOA FÍSICA',
+    modalidade: '',
+    item: 0,
+    cedente: '',
+    solicitante: '',
+    dataBloqueio: '',
+    dataEntregaOpera: '',
+    dataEntregaCliente: '',
+    franquiaVivo: null,
+    valorPlanoVivo: null,
+    gestaoVozDados: null,
+    skeelo: null,
+    vivoNewsPlus: null,
+    vivoTravelMundo: null,
+    vivoGestaoDispositivo: null,
+    valorContratoVivo: null,
+    franquiaLine: null,
+    franquiaGestao: null,
+    locacaoAp: null,
+    valorContratoLine: null,
+    desconto: null,
+    lucro: null
   };
 
-  get isGroupMode(): boolean { return this.viewMode === 'GROUPS'; }
+  get isGroupMode(): boolean {
+    return this.viewMode === 'GROUPS';
+  }
+
+  // ✅ fecha dropdown ao clicar fora
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(ev: MouseEvent) {
+    if (!isPlatformBrowser(this.platformId)) return;
+
+    // Se modal estiver aberto, não mexe no dropdown por clique no overlay
+    if (this.anyModalOpen()) return;
+
+    if (!this.showClientMenu) return;
+    const target = ev.target as HTMLElement | null;
+    if (!target) return;
+
+    const inside = !!target.closest('.client-filter-wrap');
+    if (!inside) {
+      this.showClientMenu = false;
+      this.cdr.detectChanges();
+    }
+  }
+
+  // ✅ ESC fecha dropdown OU modal (sem conflito)
+  @HostListener('document:keydown', ['$event'])
+  onDocumentKeydown(ev: KeyboardEvent) {
+    if (!isPlatformBrowser(this.platformId)) return;
+
+    if (ev.key === 'Escape') {
+      if (this.anyModalOpen()) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.closeAllModals();
+        return;
+      }
+
+      if (this.showClientMenu) {
+        this.showClientMenu = false;
+        ev.stopPropagation();
+        this.cdr.detectChanges();
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.searchTimer) clearTimeout(this.searchTimer);
+  }
 
   async ngAfterViewInit() {
     if (!isPlatformBrowser(this.platformId)) return;
+
     this.initAnimations();
+
     setTimeout(() => {
       this.refreshData();
       this.loadClients();
+
       const state = history.state;
       if (state && state.toastMessage) {
         const msg = String(state.toastMessage);
-        const newState = { ...state }; delete newState.toastMessage;
+        const newState = { ...state };
+        delete newState.toastMessage;
         history.replaceState(newState, '', location.href);
         this.showToast(msg);
       }
@@ -126,69 +307,312 @@ export class Geral implements AfterViewInit {
     document.documentElement.classList.add('js-animate');
     setTimeout(() => {
       const items = document.querySelectorAll<HTMLElement>('[data-animate]');
-      items.forEach(el => el.classList.add('is-visible'));
+      items.forEach((el) => el.classList.add('is-visible'));
     }, 100);
   }
 
+  // ============================================================
+  // ✅ FIX PRINCIPAL: limpeza forçada de backdrops/scroll lock
+  // ============================================================
+  private anyModalOpen(): boolean {
+    return !!(this.detailOpen || this.financeOpen || this.editOpen || this.createOpen);
+  }
+
+  private cleanupModalArtifacts() {
+    if (!isPlatformBrowser(this.platformId)) return;
+
+    // Remove qualquer backdrop “preso” (Bootstrap ou o seu custom)
+    document
+      .querySelectorAll('.modal-backdrop, .modal-backdrop-custom')
+      .forEach((el) => el.remove());
+
+    // Remove lock de scroll que o Bootstrap às vezes aplica
+    document.body.classList.remove('modal-open');
+    document.body.style.removeProperty('overflow');
+    document.body.style.removeProperty('padding-right');
+
+    // Às vezes também cai no html
+    document.documentElement.style.removeProperty('overflow');
+  }
+
+  closeAllModals() {
+    // Fecha tudo de forma imediata (sem await) para o overlay sumir na hora
+    this.detailOpen = false;
+    this.financeOpen = false;
+    this.editOpen = false;
+    this.createOpen = false;
+
+    this.detailData = null;
+    this.financeData = null;
+
+    this.editSaving = false;
+    this.createSaving = false;
+
+    this.editModel = null;
+    this.editingId = null;
+
+    // Limpa overlays/locks residuais
+    this.cleanupModalArtifacts();
+
+    // Garante que o Angular replique no DOM imediatamente
+    this.cdr.detectChanges();
+
+    // Segurança extra: um “tick” depois, limpa de novo (caso algo tenha sido inserido depois)
+    setTimeout(() => this.cleanupModalArtifacts(), 0);
+  }
+
+  // ============================================================
+
   refreshData() {
-    if (this.selectedClient) {
-      this.viewMode = 'TABLE';
-      this.loadFromApi();
-      return;
-    }
-    if (!this.searchTerm.trim()) {
-      this.viewMode = 'GROUPS';
-      this.loadGroups();
-    } else {
-      if (this.viewMode === 'GROUPS') this.loadGroups();
-      else this.loadFromApi();
-    }
+    this.searchResolvedClient = null;
+    this.loadKpis();
+    this.viewMode = 'GROUPS';
+    this.loadGroups();
   }
 
-  onSearch() {
-    if (this.searchTimer) clearTimeout(this.searchTimer);
-    this.searchTimer = setTimeout(() => {
-      this.page = 1;
-      const s = this.searchTerm.trim();
+  private isSpecificSearchTerm(term: string): boolean {
+    const t = (term ?? '').trim();
+    if (!t) return false;
 
-      if (!s) {
-        this.viewMode = 'GROUPS';
-        this.loadGroups();
-        return;
-      }
+    const digits = t.replace(/\D/g, '');
+    if (!digits) return false;
 
-      if (/\d/.test(s)) {
-        this.viewMode = 'TABLE';
-        this.loadFromApi();
-      } else {
-        this.viewMode = 'GROUPS';
-        this.loadGroups(); 
-      }
-    }, 300);
+    if (digits.length >= 17) return true; // ICCID
+    if (digits.length >= 8 && digits.length <= 14) return true; // linha
+
+    return false;
   }
 
-  private loadGroups() {
-    this.loading = true;
-    let params = new HttpParams()
-        .set('page', String(this.page))
-        .set('pageSize', String(this.pageSize));
+  private resolveSearchToClient(term: string): Promise<string | null> {
+    const s = (term ?? '').trim();
+    if (!s) return Promise.resolve(null);
+
+    let params = new HttpParams().set('page', '1').set('pageSize', '1').set('search', s);
 
     if (this.filterSkil === 'PF') params = params.set('skil', 'PESSOA FÍSICA');
     else if (this.filterSkil === 'PJ') params = params.set('skil', 'PESSOA JURÍDICA');
     else if (this.filterSkil === 'RESERVA') params = params.set('skil', 'RESERVA');
 
-    if (this.searchTerm) params = params.set('search', this.searchTerm);
+    if (this.selectedClients.length > 0) {
+      this.selectedClients.forEach((c) => (params = params.append('client', c)));
+    }
+
+    return new Promise((resolve) => {
+      this.http.get<ApiPagedResult<ApiLineList>>(this.apiBase, { params }).subscribe({
+        next: (res) => {
+          const first = (res.items ?? [])[0];
+          const client = (first?.cliente ?? '').trim();
+          resolve(client || null);
+        },
+        error: () => resolve(null)
+      });
+    });
+  }
+
+  onSearch() {
+    if (this.searchTimer) clearTimeout(this.searchTimer);
+
+    this.searchTimer = setTimeout(async () => {
+      this.expandedGroup = null;
+      this.groupLines = [];
+      this.page = 1;
+
+      const term = (this.searchTerm ?? '').trim();
+
+      if (!term) {
+        this.searchResolvedClient = null;
+        this.loadKpis();
+        this.loadGroups();
+        return;
+      }
+
+      if (this.isSpecificSearchTerm(term)) {
+        const client = await this.resolveSearchToClient(term);
+
+        if (client) {
+          this.searchResolvedClient = client;
+          this.loadKpis();
+          await this.loadOnlyThisClientGroup(client);
+          this.expandedGroup = client;
+          this.fetchGroupLines(client, term);
+          return;
+        }
+      }
+
+      this.searchResolvedClient = null;
+      this.loadKpis();
+      this.loadGroups();
+    }, 300);
+  }
+
+  private loadOnlyThisClientGroup(clientName: string): Promise<void> {
+    this.loading = true;
+
+    let params = new HttpParams().set('page', '1').set('pageSize', '9999');
+
+    if (this.filterSkil === 'PF') params = params.set('skil', 'PESSOA FÍSICA');
+    else if (this.filterSkil === 'PJ') params = params.set('skil', 'PESSOA JURÍDICA');
+    else if (this.filterSkil === 'RESERVA') params = params.set('skil', 'RESERVA');
+
+    params = params.append('client', clientName);
+
+    return new Promise((resolve) => {
+      this.http.get<ApiPagedResult<ClientGroupDto>>(`${this.apiBase}/groups`, { params }).subscribe({
+        next: (res) => {
+          let items = res.items || [];
+          items = items.filter(
+            (g) => (g.cliente || '').trim().toUpperCase() === (clientName || '').trim().toUpperCase()
+          );
+
+          this.clientGroups = items;
+          this.total = items.length;
+          this.loading = false;
+          this.cdr.detectChanges();
+          resolve();
+        },
+        error: () => {
+          this.loading = false;
+          this.showToast('Erro ao carregar grupos.');
+          resolve();
+        }
+      });
+    });
+  }
+
+  private loadClients() {
+    this.loadingClientsList = true;
+    this.clientsList = [];
+
+    let params = new HttpParams();
+
+    if (this.filterSkil === 'PF') params = params.set('skil', 'PESSOA FÍSICA');
+    else if (this.filterSkil === 'PJ') params = params.set('skil', 'PESSOA JURÍDICA');
+    else if (this.filterSkil === 'RESERVA') params = params.set('skil', 'RESERVA');
+
+    this.http.get<string[]>(`${this.apiBase}/clients`, { params }).subscribe({
+      next: (data) => {
+        this.clientsList = data || [];
+        this.loadingClientsList = false;
+      },
+      error: () => {
+        this.loadingClientsList = false;
+        console.error('Erro ao carregar lista de clientes para o filtro.');
+      }
+    });
+  }
+
+  setFilter(type: 'ALL' | 'PF' | 'PJ' | 'RESERVA') {
+    if (this.filterSkil === type) return;
+
+    this.expandedGroup = null;
+    this.groupLines = [];
+    this.filterSkil = type;
+
+    this.selectedClients = [];
+    this.clientSearchTerm = '';
+    this.searchResolvedClient = null;
+
+    this.loadClients();
+
+    this.page = 1;
+    this.refreshData();
+  }
+
+  private loadKpis() {
+    this.loadingKpis = true;
+
+    let params = new HttpParams().set('page', '1').set('pageSize', '99999');
+
+    if (this.filterSkil === 'PF') params = params.set('skil', 'PESSOA FÍSICA');
+    else if (this.filterSkil === 'PJ') params = params.set('skil', 'PESSOA JURÍDICA');
+    else if (this.filterSkil === 'RESERVA') params = params.set('skil', 'RESERVA');
+
+    if (this.searchResolvedClient) {
+      params = params.append('client', this.searchResolvedClient);
+    } else {
+      if (this.searchTerm) params = params.set('search', this.searchTerm);
+
+      if (this.selectedClients.length > 0) {
+        this.selectedClients.forEach((c) => (params = params.append('client', c)));
+      }
+    }
 
     this.http.get<ApiPagedResult<ClientGroupDto>>(`${this.apiBase}/groups`, { params }).subscribe({
       next: (res) => {
-        if (this.searchTerm && res.total === 0 && !/\d/.test(this.searchTerm)) {
-            this.viewMode = 'TABLE';
-            this.loadFromApi();
-            return;
+        let allGroups = res.items || [];
+
+        if (this.searchResolvedClient) {
+          const target = (this.searchResolvedClient || '').trim().toUpperCase();
+          allGroups = allGroups.filter((g) => (g.cliente || '').trim().toUpperCase() === target);
+        } else if (this.selectedClients.length > 0) {
+          allGroups = allGroups.filter((g) =>
+            this.selectedClients.some(
+              (selected) =>
+                (selected || '').trim().toUpperCase() === (g.cliente || '').trim().toUpperCase()
+            )
+          );
         }
-        this.clientGroups = res.items || [];
-        this.total = res.total;
+
+        this.kpiTotalClientes = allGroups.length;
+        this.kpiTotalLinhas = allGroups.reduce((acc, g) => acc + (g.totalLinhas || 0), 0);
+        this.kpiAtivas = allGroups.reduce((acc, g) => acc + (g.ativos || 0), 0);
+        this.kpiBloqueadas = allGroups.reduce((acc, g) => acc + (g.bloqueados || 0), 0);
+
+        this.loadingKpis = false;
+        this.cdr.detectChanges();
+      },
+      error: () => {
+        this.loadingKpis = false;
+      }
+    });
+  }
+
+  private loadGroups() {
+    this.loading = true;
+
+    const hasSelection = this.selectedClients.length > 0;
+    const hasResolved = !!this.searchResolvedClient;
+
+    const pageToLoad = (hasSelection || hasResolved) ? '1' : String(this.page);
+    const sizeToLoad = (hasSelection || hasResolved) ? '9999' : String(this.pageSize);
+
+    let params = new HttpParams().set('page', pageToLoad).set('pageSize', sizeToLoad);
+
+    if (this.filterSkil === 'PF') params = params.set('skil', 'PESSOA FÍSICA');
+    else if (this.filterSkil === 'PJ') params = params.set('skil', 'PESSOA JURÍDICA');
+    else if (this.filterSkil === 'RESERVA') params = params.set('skil', 'RESERVA');
+
+    if (!hasResolved && this.searchTerm) params = params.set('search', this.searchTerm);
+
+    if (hasResolved) {
+      params = params.append('client', this.searchResolvedClient!);
+    } else if (hasSelection) {
+      this.selectedClients.forEach((c) => (params = params.append('client', c)));
+    }
+
+    this.http.get<ApiPagedResult<ClientGroupDto>>(`${this.apiBase}/groups`, { params }).subscribe({
+      next: (res) => {
+        let items = res.items || [];
+
+        if (hasResolved) {
+          const target = (this.searchResolvedClient || '').trim().toUpperCase();
+          items = items.filter((g) => (g.cliente || '').trim().toUpperCase() === target);
+          this.total = items.length;
+        } else if (hasSelection) {
+          items = items.filter((g) =>
+            this.selectedClients.some(
+              (selected) =>
+                (selected || '').trim().toUpperCase() === (g.cliente || '').trim().toUpperCase()
+            )
+          );
+          this.total = items.length;
+        } else {
+          this.total = res.total;
+        }
+
+        this.clientGroups = items;
         this.loading = false;
+        this.cdr.detectChanges();
       },
       error: () => {
         this.loading = false;
@@ -203,165 +627,427 @@ export class Geral implements AfterViewInit {
       return;
     }
     this.expandedGroup = clientName;
+
+    const term = (this.searchTerm ?? '').trim();
+    const useTerm = term && this.isSpecificSearchTerm(term) ? term : undefined;
+
+    this.fetchGroupLines(clientName, useTerm);
+  }
+
+  fetchGroupLines(clientName: string, search?: string) {
     this.groupLines = [];
     this.loadingLines = true;
 
     let params = new HttpParams()
-        .set('client', clientName)
-        .set('page', '1')
-        .set('pageSize', '500')
-        .set('sortBy', 'item')
-        .set('sortDir', 'asc');
+      .set('client', clientName)
+      .set('page', '1')
+      .set('pageSize', '500')
+      .set('sortBy', 'item')
+      .set('sortDir', 'asc');
 
     if (this.filterSkil === 'PF') params = params.set('skil', 'PESSOA FÍSICA');
     else if (this.filterSkil === 'PJ') params = params.set('skil', 'PESSOA JURÍDICA');
     else if (this.filterSkil === 'RESERVA') params = params.set('skil', 'RESERVA');
 
-    this.http.get<ApiPagedResult<ApiLineList>>(this.apiBase, { params }).subscribe({
-       next: (res) => {
-         this.groupLines = (res.items ?? []).map(x => ({
-           id: x.id, item: String(x.item ?? ''), linha: x.linha ?? '', cliente: x.cliente ?? '', usuario: x.usuario ?? '', status: x.status ?? '', skil: x.skil ?? '', contrato: x.vencConta ?? ''
-         }));
-         this.loadingLines = false;
-       },
-       error: () => {
-         this.loadingLines = false;
-         this.showToast('Erro ao carregar linhas do grupo.');
-       }
-    });
-  }
-
-  private loadFromApi() {
-    this.loading = true;
-    let params = new HttpParams().set('page', String(this.page)).set('pageSize', String(this.pageSize)).set('search', (this.searchTerm ?? '').trim()).set('sortBy', this.mapSortKeyToApi(this.sortKey)).set('sortDir', this.sortDir);
-    
-    if (this.filterSkil === 'PF') params = params.set('skil', 'PESSOA FÍSICA');
-    else if (this.filterSkil === 'PJ') params = params.set('skil', 'PESSOA JURÍDICA');
-    else if (this.filterSkil === 'RESERVA') params = params.set('skil', 'RESERVA');
-
-    if (this.selectedClient) params = params.set('client', this.selectedClient);
+    if (search) params = params.set('search', search);
 
     this.http.get<ApiPagedResult<ApiLineList>>(this.apiBase, { params }).subscribe({
       next: (res) => {
-        this.total = res.total ?? 0;
-        this.rows = (res.items ?? []).map(x => ({
-          id: x.id, item: String(x.item ?? ''), linha: x.linha ?? '', cliente: x.cliente ?? '', usuario: x.usuario ?? '', status: x.status ?? '', skil: x.skil ?? '', contrato: x.vencConta ?? ''
+        this.groupLines = (res.items ?? []).map((x) => ({
+          id: x.id,
+          item: String(x.item ?? ''),
+          linha: x.linha ?? '',
+          cliente: x.cliente ?? '',
+          usuario: x.usuario ?? '',
+          status: x.status ?? '',
+          skil: x.skil ?? '',
+          contrato: x.vencConta ?? ''
         }));
-        this.loading = false;
+        this.loadingLines = false;
       },
-      error: async () => {
-        this.loading = false;
-        await this.showToast('Erro ao carregar dados.');
+      error: () => {
+        this.loadingLines = false;
+        this.showToast('Erro ao carregar linhas do grupo.');
       }
     });
   }
 
-  setFilter(type: 'ALL' | 'PF' | 'PJ' | 'RESERVA') {
-    if (this.filterSkil === type) return;
-    this.filterSkil = type;
+  toggleClientMenu() {
+    this.showClientMenu = !this.showClientMenu;
+  }
+
+  closeClientDropdown() {
+    this.showClientMenu = false;
+  }
+
+  selectClient(client: string | null) {
+    if (client === null) {
+      this.selectedClients = [];
+    } else {
+      const idx = this.selectedClients.indexOf(client);
+      if (idx >= 0) this.selectedClients.splice(idx, 1);
+      else this.selectedClients.push(client);
+    }
+
+    this.page = 1;
+    this.expandedGroup = null;
+    this.searchResolvedClient = null;
+    this.refreshData();
+  }
+
+  removeClient(client: string, event: Event) {
+    event.stopPropagation();
+    const idx = this.selectedClients.indexOf(client);
+    if (idx >= 0) {
+      this.selectedClients.splice(idx, 1);
+      this.page = 1;
+
+      this.searchResolvedClient = null;
+      this.refreshData();
+    }
+  }
+
+  clearClientSelection(event?: Event) {
+    if (event) event.stopPropagation();
+    this.selectedClients = [];
+    this.clientSearchTerm = '';
+    this.page = 1;
+
+    this.searchResolvedClient = null;
+    this.refreshData();
+  }
+
+  isClientSelected(client: string): boolean {
+    return this.selectedClients.includes(client);
+  }
+
+  get filteredClientsList(): string[] {
+    if (!this.clientSearchTerm) return this.clientsList;
+    const s = this.clientSearchTerm.toLowerCase();
+    return this.clientsList.filter((c) => c.toLowerCase().includes(s));
+  }
+
+  setSort(key: keyof LineRow) {
+    if (this.sortKey === key) this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
+    else {
+      this.sortKey = key;
+      this.sortDir = 'asc';
+    }
+    this.page = 1;
+    this.loadGroups();
+  }
+
+  onPageSizeChange() {
     this.page = 1;
     this.refreshData();
   }
 
-  clearSearch() { this.searchTerm = ''; this.page = 1; this.refreshData(); }
-  private loadClients() { this.http.get<string[]>(`${this.apiBase}/clients`).subscribe({ next: (data) => this.clientsList = data || [] }); }
-  toggleClientMenu() { this.showClientMenu = !this.showClientMenu; this.clientSearchTerm = ''; }
-  closeClientDropdown() { this.showClientMenu = false; }
-  selectClient(client: string | null) { this.selectedClient = client; this.showClientMenu = false; this.page = 1; this.refreshData(); }
-  get filteredClientsList(): string[] { if (!this.clientSearchTerm) return this.clientsList; const s = this.clientSearchTerm.toLowerCase(); return this.clientsList.filter(c => c.toLowerCase().includes(s)); }
-  setSort(key: keyof LineRow) { if (this.sortKey === key) this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc'; else { this.sortKey = key; this.sortDir = 'asc'; } this.page = 1; this.loadFromApi(); }
-  onPageSizeChange() { this.page = 1; this.refreshData(); }
-  goToPage(p: number) { this.page = Math.max(1, Math.min(this.totalPages, p)); this.refreshData(); }
-  trackById(_: number, row: LineRow) { return row.id; }
-  get pagedRows() { return this.rows; }
-  get totalPages() { return Math.ceil((this.total || 0) / this.pageSize) || 1; }
-  get filteredCount() { return this.total || 0; }
-  get pageStart() { return this.filteredCount === 0 ? 0 : (this.page - 1) * this.pageSize + 1; }
-  get pageEnd() { return this.filteredCount === 0 ? 0 : Math.min((this.page - 1) * this.pageSize + (this.isGroupMode ? this.clientGroups.length : this.rows.length), this.filteredCount); }
-  get pageNumbers() { const total = this.totalPages; const current = this.page; const max = 5; let start = Math.max(1, current - 2); let end = Math.min(total, start + (max - 1)); start = Math.max(1, end - (max - 1)); const pages = []; for (let i = start; i <= end; i++) pages.push(i); return pages; }
-  async onImportExcel() { if (!this.excelInput?.nativeElement) return; this.excelInput.nativeElement.value = ''; this.excelInput.nativeElement.click(); }
-  onExcelSelected(ev: Event) { const file = (ev.target as HTMLInputElement).files?.[0]; if (!file) return; const form = new FormData(); form.append('file', file); this.loading = true; this.http.post<{ imported: number }>(`${this.apiBase}/import-excel`, form).subscribe({ next: async (r) => { await this.showToast(`Sucesso! ${r?.imported ?? 0} registros importados.`); this.page = 1; this.refreshData(); }, error: async () => { this.loading = false; await this.showToast('Falha ao importar planilha.'); } }); }
-  private getById(id: string, cb: (d: any) => void) { this.http.get(`${this.apiBase}/${id}`).subscribe({ next: cb, error: () => this.showToast('Erro ao carregar detalhes.') }); }
-  onDetalhes(r: LineRow) { this.detailOpen = true; this.detailData = null; this.getById(r.id, d => this.detailData = d); }
-  onFinanceiro(r: LineRow) { this.financeOpen = true; this.financeData = null; this.getById(r.id, d => this.financeData = d); }
-  closeDetail() { this.detailOpen = false; this.detailData = null; }
-  closeFinance() { this.financeOpen = false; this.financeData = null; }
-  
+  goToPage(p: number) {
+    this.page = Math.max(1, Math.min(this.totalPages, p));
+    this.refreshData();
+  }
+
+  trackById(_: number, row: LineRow) {
+    return row.id;
+  }
+
+  get pagedRows() {
+    return this.rows;
+  }
+
+  get totalPages() {
+    if (this.selectedClients.length > 0) return 1;
+    if (this.searchResolvedClient) return 1;
+    return Math.ceil((this.total || 0) / this.pageSize) || 1;
+  }
+
+  get filteredCount() {
+    return this.total || 0;
+  }
+
+  get pageStart() {
+    return this.filteredCount === 0 ? 0 : (this.page - 1) * this.pageSize + 1;
+  }
+
+  get pageEnd() {
+    if (this.selectedClients.length > 0 || this.searchResolvedClient) {
+      return this.filteredCount;
+    }
+
+    return this.filteredCount === 0
+      ? 0
+      : Math.min(
+          (this.page - 1) * this.pageSize +
+            (this.isGroupMode ? this.clientGroups.length : this.rows.length),
+          this.filteredCount
+        );
+  }
+
+  get pageNumbers() {
+    const total = this.totalPages;
+    const current = this.page;
+    const max = 5;
+    let start = Math.max(1, current - 2);
+    let end = Math.min(total, start + (max - 1));
+    start = Math.max(1, end - (max - 1));
+    const pages: number[] = [];
+    for (let i = start; i <= end; i++) pages.push(i);
+    return pages;
+  }
+
+  clearSearch() {
+    this.searchTerm = '';
+    this.searchResolvedClient = null;
+    this.expandedGroup = null;
+    this.groupLines = [];
+    this.page = 1;
+    this.refreshData();
+  }
+
+  async onImportExcel() {
+    if (!this.excelInput?.nativeElement) return;
+    this.excelInput.nativeElement.value = '';
+    this.excelInput.nativeElement.click();
+  }
+
+  onExcelSelected(ev: Event) {
+    const file = (ev.target as HTMLInputElement).files?.[0];
+    if (!file) return;
+
+    const form = new FormData();
+    form.append('file', file);
+
+    this.loading = true;
+
+    this.http.post<{ imported: number }>(`${this.apiBase}/import-excel`, form).subscribe({
+      next: async (r) => {
+        await this.showToast(`Sucesso! ${r?.imported ?? 0} registros importados.`);
+        this.page = 1;
+        this.refreshData();
+      },
+      error: async () => {
+        this.loading = false;
+        await this.showToast('Falha ao importar planilha.');
+      }
+    });
+  }
+
+  private getById(id: string, cb: (d: any) => void) {
+    this.http.get(`${this.apiBase}/${id}`).subscribe({
+      next: cb,
+      error: () => this.showToast('Erro ao carregar detalhes.')
+    });
+  }
+
+  async onDetalhes(r: LineRow) {
+    this.detailOpen = true;
+    this.detailData = null;
+    this.cdr.detectChanges();
+    this.getById(r.id, (d) => {
+      this.detailData = d;
+      this.cdr.detectChanges();
+    });
+  }
+
+  async onFinanceiro(r: LineRow) {
+    this.financeOpen = true;
+    this.financeData = null;
+    this.cdr.detectChanges();
+    this.getById(r.id, (d) => {
+      this.financeData = d;
+      this.cdr.detectChanges();
+    });
+  }
+
   async onEditar(r: LineRow) {
     this.editOpen = true;
     this.editSaving = false;
     this.editModel = null;
     this.editingId = r.id;
+
+    this.cdr.detectChanges();
+
     this.http.get<ApiLineDetail>(`${this.apiBase}/${r.id}`).subscribe({
-      next: (d) => { this.editModel = this.toEditModel(d); },
-      error: async () => { this.editOpen = false; await this.showToast('Erro ao carregar dados para edição.'); }
+      next: (d) => {
+        this.editModel = this.toEditModel(d);
+        this.cdr.detectChanges();
+      },
+      error: async () => {
+        this.closeAllModals();
+        await this.showToast('Erro ao carregar dados para edição.');
+      }
     });
   }
-  closeEdit() { this.editOpen = false; this.editSaving = false; this.editModel = null; this.editingId = null; }
-  
+
+  calculateFinancials(model: any) {
+    if (!model) return;
+
+    const parse = (v: any): number => {
+      if (v === null || v === undefined || v === '') return 0;
+      if (typeof v === 'number') return v;
+      return parseFloat(v.toString().replace(',', '.')) || 0;
+    };
+
+    const valorPlano = parse(model.valorPlanoVivo);
+    const gestaoVoz = parse(model.gestaoVozDados);
+    const skeelo = parse(model.skeelo);
+    const news = parse(model.vivoNewsPlus);
+    const travel = parse(model.vivoTravelMundo);
+    const gestaoDisp = parse(model.vivoGestaoDispositivo);
+
+    const totalVivo = valorPlano + gestaoVoz + skeelo + news + travel + gestaoDisp;
+    model.valorContratoVivo = parseFloat(totalVivo.toFixed(2));
+
+    const totalLineManual = parse(model.valorContratoLine);
+    const lucro = totalLineManual - totalVivo;
+    model.lucro = parseFloat(lucro.toFixed(2));
+
+    model.desconto = model.desconto ? parse(model.desconto) : 0.0;
+  }
+
+  onFinancialChange(isEdit: boolean) {
+    const model = isEdit ? this.editModel : this.createModel;
+    this.calculateFinancials(model);
+  }
+
   async saveEdit() {
     if (!this.editingId || !this.editModel) return;
+
     this.editSaving = true;
-    const payload: UpdateMobileLineRequest = { ...this.editModel, item: this.toInt(this.editModel.item), dataBloqueio: this.dateInputToIso(this.editModel.dataBloqueio), dataEntregaOpera: this.dateInputToIso(this.editModel.dataEntregaOpera), dataEntregaCliente: this.dateInputToIso(this.editModel.dataEntregaCliente), vencConta: (this.editModel.vencConta ?? '').toString(), franquiaVivo: this.toNullableNumber(this.editModel.franquiaVivo), valorPlanoVivo: this.toNullableNumber(this.editModel.valorPlanoVivo), gestaoVozDados: this.toNullableNumber(this.editModel.gestaoVozDados), skeelo: this.toNullableNumber(this.editModel.skeelo), vivoNewsPlus: this.toNullableNumber(this.editModel.vivoNewsPlus), vivoTravelMundo: this.toNullableNumber(this.editModel.vivoTravelMundo), vivoGestaoDispositivo: this.toNullableNumber(this.editModel.vivoGestaoDispositivo), valorContratoVivo: this.toNullableNumber(this.editModel.valorContratoVivo), franquiaLine: this.toNullableNumber(this.editModel.franquiaLine), franquiaGestao: this.toNullableNumber(this.editModel.franquiaGestao), locacaoAp: this.toNullableNumber(this.editModel.locacaoAp), valorContratoLine: this.toNullableNumber(this.editModel.valorContratoLine), desconto: this.toNullableNumber(this.editModel.desconto), lucro: this.toNullableNumber(this.editModel.lucro) };
-    
+    this.calculateFinancials(this.editModel);
+
+    const payload: UpdateMobileLineRequest = {
+      ...this.editModel,
+      item: this.toInt(this.editModel.item),
+      dataBloqueio: this.dateInputToIso(this.editModel.dataBloqueio),
+      dataEntregaOpera: this.dateInputToIso(this.editModel.dataEntregaOpera),
+      dataEntregaCliente: this.dateInputToIso(this.editModel.dataEntregaCliente),
+      vencConta: (this.editModel.vencConta ?? '').toString(),
+      franquiaVivo: this.toNullableNumber(this.editModel.franquiaVivo),
+      valorPlanoVivo: this.toNullableNumber(this.editModel.valorPlanoVivo),
+      gestaoVozDados: this.toNullableNumber(this.editModel.gestaoVozDados),
+      skeelo: this.toNullableNumber(this.editModel.skeelo),
+      vivoNewsPlus: this.toNullableNumber(this.editModel.vivoNewsPlus),
+      vivoTravelMundo: this.toNullableNumber(this.editModel.vivoTravelMundo),
+      vivoGestaoDispositivo: this.toNullableNumber(this.editModel.vivoGestaoDispositivo),
+      valorContratoVivo: this.toNullableNumber(this.editModel.valorContratoVivo),
+      franquiaLine: this.toNullableNumber(this.editModel.franquiaLine),
+      franquiaGestao: this.toNullableNumber(this.editModel.franquiaGestao),
+      locacaoAp: this.toNullableNumber(this.editModel.locacaoAp),
+      valorContratoLine: this.toNullableNumber(this.editModel.valorContratoLine),
+      desconto: this.toNullableNumber(this.editModel.desconto),
+      lucro: this.toNullableNumber(this.editModel.lucro)
+    };
+
     this.http.put(`${this.apiBase}/${this.editingId}`, payload).subscribe({
       next: async () => {
         this.editSaving = false;
-        this.closeEdit();
+
+        // fecha e limpa overlay SEMPRE
+        this.closeAllModals();
+
         await this.showToast('Registro atualizado!');
-        if(this.isGroupMode && this.expandedGroup) {
-             this.toggleGroup(this.expandedGroup!); 
+
+        if (this.isGroupMode && this.expandedGroup) {
+          const term = (this.searchTerm ?? '').trim();
+          const useTerm = term && this.isSpecificSearchTerm(term) ? term : undefined;
+
+          this.fetchGroupLines(this.expandedGroup, useTerm);
+          this.loadGroups();
+          this.loadKpis();
         } else {
-             this.refreshData();
+          this.refreshData();
         }
       },
-      error: async () => { this.editSaving = false; await this.showToast('Erro ao salvar.'); }
+      error: async () => {
+        this.editSaving = false;
+        await this.showToast('Erro ao salvar.');
+      }
     });
   }
 
   async onRemover(r: LineRow, fromGroup = false) {
     if (!confirm(`Remover linha ${r.linha}?`)) return;
+
     this.loading = true;
+
     this.http.delete(`${this.apiBase}/${r.id}`).subscribe({
       next: async () => {
         await this.showToast('Removido com sucesso.');
-        if(fromGroup && this.expandedGroup) {
-            this.toggleGroup(this.expandedGroup!); 
+        this.loading = false;
+
+        if (fromGroup && this.expandedGroup) {
+          const term = (this.searchTerm ?? '').trim();
+          const useTerm = term && this.isSpecificSearchTerm(term) ? term : undefined;
+
+          this.fetchGroupLines(this.expandedGroup, useTerm);
+          this.loadGroups();
+          this.loadKpis();
         } else {
-            this.refreshData();
+          this.refreshData();
         }
       },
-      error: async () => { this.loading = false; await this.showToast('Erro ao remover.'); }
+      error: async () => {
+        this.loading = false;
+        await this.showToast('Erro ao remover.');
+      }
     });
   }
 
-  onCadastrarLinha() {
+  async onCadastrarLinha() {
     this.createMode = 'NEW_CLIENT';
     this.resetCreateModel();
-    this.createOpen = true; 
+    this.createOpen = true;
+    this.cdr.detectChanges();
   }
 
-  onAddLineToGroup(clientName: string) {
+  async onAddLineToGroup(clientName: string) {
     this.createMode = 'NEW_LINE_IN_GROUP';
     this.resetCreateModel();
+
     this.createModel.cliente = clientName;
+
     if (this.filterSkil === 'PJ') this.createModel.skil = 'PESSOA JURÍDICA';
     else if (this.filterSkil === 'RESERVA') this.createModel.skil = 'RESERVA';
-    this.createOpen = true;
-  }
 
-  closeCreate() { this.createOpen = false; }
+    this.createOpen = true;
+    this.cdr.detectChanges();
+  }
 
   private resetCreateModel() {
     this.createModel = {
-      cliente: '', docType: 'PF', docNumber: '', linha: '', chip: '', usuario: '',
-      status: '', planoContrato: '', conta: '', vencConta: '', skil: 'PESSOA FÍSICA',
-      modalidade: '', item: 0, cedente: '', solicitante: '',
-      dataBloqueio: '', dataEntregaOpera: '', dataEntregaCliente: '',
-      franquiaVivo: null, valorPlanoVivo: null, gestaoVozDados: null, skeelo: null,
-      vivoNewsPlus: null, vivoTravelMundo: null, vivoGestaoDispositivo: null,
-      valorContratoVivo: null, franquiaLine: null, franquiaGestao: null,
-      locacaoAp: null, valorContratoLine: null, desconto: null, lucro: null
+      cliente: '',
+      docType: 'PF',
+      docNumber: '',
+      linha: '',
+      chip: '',
+      usuario: '',
+      status: '',
+      planoContrato: '',
+      conta: '',
+      vencConta: '',
+      skil: 'PESSOA FÍSICA',
+      modalidade: '',
+      item: 0,
+      cedente: '',
+      solicitante: '',
+      dataBloqueio: '',
+      dataEntregaOpera: '',
+      dataEntregaCliente: '',
+      franquiaVivo: null,
+      valorPlanoVivo: null,
+      gestaoVozDados: null,
+      skeelo: null,
+      vivoNewsPlus: null,
+      vivoTravelMundo: null,
+      vivoGestaoDispositivo: null,
+      valorContratoVivo: null,
+      franquiaLine: null,
+      franquiaGestao: null,
+      locacaoAp: null,
+      valorContratoLine: null,
+      desconto: null,
+      lucro: null
     };
     this.createSaving = false;
   }
@@ -389,19 +1075,40 @@ export class Geral implements AfterViewInit {
   }
 
   async saveCreate() {
-    if (!this.createModel.linha) { this.showToast('O número da Linha é obrigatório.'); return; }
-    if (!this.createModel.chip) { this.showToast('O Chip (ICCID) é obrigatório.'); return; }
-    if (!this.createModel.status) { this.showToast('Selecione um Status.'); return; }
-    if (!this.createModel.planoContrato) { this.showToast('Selecione um Plano.'); return; }
-    if (!this.createModel.conta) { this.showToast('Selecione uma Conta.'); return; }
-    if (!this.createModel.skil) { this.showToast('Selecione o Tipo (Skil).'); return; }
-
     if (this.createMode === 'NEW_CLIENT') {
-      if (!this.createModel.cliente) { this.showToast(this.createModel.docType === 'PF' ? 'Informe o Nome Completo.' : 'Informe a Razão Social.'); return; }
-      if (!this.createModel.docNumber) { this.showToast(`O ${this.createModel.docType === 'PF' ? 'CPF' : 'CNPJ'} é obrigatório.`); return; }
+      if (!this.createModel.cliente) {
+        this.showToast(this.createModel.docType === 'PF' ? 'Informe o Nome Completo.' : 'Informe a Razão Social.');
+        return;
+      }
+      if (!this.createModel.docNumber) {
+        this.showToast(`O ${this.createModel.docType === 'PF' ? 'CPF' : 'CNPJ'} é obrigatório.`);
+        return;
+      }
+    }
+
+    if (!this.createModel.conta) {
+      this.showToast('Selecione uma Conta.');
+      return;
+    }
+    if (!this.createModel.linha) {
+      this.showToast('O número da Linha é obrigatório.');
+      return;
+    }
+    if (!this.createModel.chip) {
+      this.showToast('O Chip (ICCID) é obrigatório.');
+      return;
+    }
+    if (!this.createModel.status) {
+      this.showToast('Selecione um Status.');
+      return;
+    }
+    if (!this.createModel.planoContrato) {
+      this.showToast('Selecione um Plano.');
+      return;
     }
 
     this.createSaving = true;
+    this.calculateFinancials(this.createModel);
 
     const payload: CreateMobileLineRequest = {
       ...this.createModel,
@@ -426,36 +1133,141 @@ export class Geral implements AfterViewInit {
     };
 
     this.http.post<ApiLineDetail>(this.apiBase, payload).subscribe({
-      next: async (newRecord) => {
+      next: async () => {
         this.createSaving = false;
-        this.closeCreate();
-        await this.showToast('Sucesso! Registro criado.');
+
+        // fecha e limpa overlay SEMPRE
+        this.closeAllModals();
+
+        await this.showToast('Sucesso! Cliente cadastrado.');
+
         if (this.createMode === 'NEW_LINE_IN_GROUP' && this.expandedGroup === this.createModel.cliente) {
-          this.toggleGroup(this.expandedGroup!); 
+          const term = (this.searchTerm ?? '').trim();
+          const useTerm = term && this.isSpecificSearchTerm(term) ? term : undefined;
+
+          this.fetchGroupLines(this.expandedGroup!, useTerm);
+          this.loadGroups();
+          this.loadKpis();
         } else {
           this.refreshData();
         }
       },
       error: async (err: HttpErrorResponse) => {
         this.createSaving = false;
-        const msg = err.error?.message || 'Erro ao criar registro.';
+        const msg = (err.error as any)?.message || 'Erro ao criar registro.';
         await this.showToast(msg);
       }
     });
   }
 
-  // Helpers
-  private async showToast(message: string) { if (!isPlatformBrowser(this.platformId)) return; this.toastMessage = message; this.cdr.detectChanges(); if (!this.successToast?.nativeElement) return; try { const bs = await import('bootstrap'); const toastInstance = bs.Toast.getOrCreateInstance(this.successToast.nativeElement, { autohide: true, delay: 3000 }); toastInstance.show(); } catch (error) { console.error(error); } }
-  formatMoney(v: any): string { if (v == null || Number.isNaN(v)) return '-'; return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(v); }
-  formatNumber(v: any): string { if (v == null || Number.isNaN(v)) return '-'; return new Intl.NumberFormat('pt-BR').format(v); }
-  formatFranquia(v: any): string { if (v == null || Number.isNaN(v)) return '-'; return `${new Intl.NumberFormat('pt-BR').format(v)} GB`; }
-  formatDateBr(iso: any): string { if (!iso) return '-'; const d = new Date(iso); return Number.isNaN(d.getTime()) ? '-' : new Intl.DateTimeFormat('pt-BR').format(d); }
-  statusClass(s: any): string { const n = (s??'').toLowerCase(); if(n.includes('bloq')||n.includes('perda')) return 'is-blocked'; if(n.includes('ativo')) return 'is-active'; return ''; }
-  statusLabel(s: any): string { return s || '-'; }
-  private mapSortKeyToApi(sortKey: keyof LineRow): string { const map: Record<string, string> = { item: 'item', linha: 'linha', cliente: 'cliente', status: 'status', skil: 'skil', contrato: 'vencConta' }; return map[String(sortKey)] ?? 'item'; }
-  private isoToDateInput(iso: string | null | undefined): string { if (!iso) return ''; const dt = new Date(iso); return Number.isNaN(dt.getTime()) ? '' : dt.toISOString().slice(0, 10); }
-  private dateInputToIso(dateStr: string | null | undefined): string | null { const s = (dateStr ?? '').trim(); return s ? new Date(`${s}T00:00:00.000Z`).toISOString() : null; }
-  private toNullableNumber(v: any): number | null { if (v === null || v === undefined || v === '') return null; const n = Number(String(v).trim().replace(',', '.')); return Number.isFinite(n) ? n : null; }
-  private toInt(v: any): number { const n = parseInt(String(v ?? '0'), 10); return Number.isFinite(n) ? n : 0; }
-  private toEditModel(d: ApiLineDetail) { return { ...d, dataBloqueio: this.isoToDateInput(d.dataBloqueio), dataEntregaOpera: this.isoToDateInput(d.dataEntregaOpera), dataEntregaCliente: this.isoToDateInput(d.dataEntregaCliente) }; }
-}
\ No newline at end of file
+  private async showToast(message: string) {
+    if (!isPlatformBrowser(this.platformId)) return;
+
+    this.toastMessage = message;
+    this.cdr.detectChanges();
+
+    if (!this.successToast?.nativeElement) return;
+
+    try {
+      const bs = await import('bootstrap');
+      const toastInstance = bs.Toast.getOrCreateInstance(this.successToast.nativeElement, {
+        autohide: true,
+        delay: 3000
+      });
+      toastInstance.show();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  formatMoney(v: any): string {
+    if (v == null || Number.isNaN(v)) return '-';
+    return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(v);
+  }
+
+  formatNumber(v: any): string {
+    if (v == null || Number.isNaN(v)) return '-';
+    return new Intl.NumberFormat('pt-BR').format(v);
+  }
+
+  formatFranquia(v: any): string {
+    if (v == null || Number.isNaN(v)) return '-';
+    return `${new Intl.NumberFormat('pt-BR').format(v)} GB`;
+  }
+
+  formatDateBr(iso: any): string {
+    if (!iso) return '-';
+    const d = new Date(iso);
+    return Number.isNaN(d.getTime()) ? '-' : new Intl.DateTimeFormat('pt-BR').format(d);
+  }
+
+  statusClass(s: any): string {
+    const n = (s ?? '').toString().toLowerCase();
+    if (n.includes('bloq') || n.includes('perda') || n.includes('roubo')) return 'is-blocked';
+    if (n.includes('ativo')) return 'is-active';
+    return '';
+  }
+
+  statusLabel(s: any): string {
+    const v = (s ?? '').toString().trim();
+    return v || '-';
+  }
+
+  private toEditModel(d: ApiLineDetail): any {
+    return {
+      ...d,
+      item: d.item ?? 0,
+      dataBloqueio: this.isoToDateInput(d.dataBloqueio),
+      dataEntregaOpera: this.isoToDateInput(d.dataEntregaOpera),
+      dataEntregaCliente: this.isoToDateInput(d.dataEntregaCliente),
+
+      franquiaVivo: d.franquiaVivo ?? null,
+      valorPlanoVivo: d.valorPlanoVivo ?? null,
+      gestaoVozDados: d.gestaoVozDados ?? null,
+      skeelo: d.skeelo ?? null,
+      vivoNewsPlus: d.vivoNewsPlus ?? null,
+      vivoTravelMundo: d.vivoTravelMundo ?? null,
+      vivoGestaoDispositivo: d.vivoGestaoDispositivo ?? null,
+      valorContratoVivo: d.valorContratoVivo ?? null,
+
+      franquiaLine: d.franquiaLine ?? null,
+      franquiaGestao: d.franquiaGestao ?? null,
+      locacaoAp: d.locacaoAp ?? null,
+      valorContratoLine: d.valorContratoLine ?? null,
+
+      desconto: d.desconto ?? null,
+      lucro: d.lucro ?? null
+    };
+  }
+
+  private isoToDateInput(iso?: string | null): string {
+    if (!iso) return '';
+    const s = iso.toString();
+    // se já vier YYYY-MM-DD, mantém
+    if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s;
+    // se vier ISO completo, pega só a data
+    if (s.includes('T')) return s.slice(0, 10);
+    return s;
+  }
+
+  private dateInputToIso(v: any): string | null {
+    const s = (v ?? '').toString().trim();
+    if (!s) return null;
+    // Mantém YYYY-MM-DD (excelente para DateOnly no backend)
+    if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s;
+    return s;
+  }
+
+  private toInt(v: any): number {
+    if (v === null || v === undefined || v === '') return 0;
+    const n = parseInt(v.toString(), 10);
+    return Number.isNaN(n) ? 0 : n;
+  }
+
+  private toNullableNumber(v: any): number | null {
+    if (v === null || v === undefined || v === '') return null;
+    if (typeof v === 'number') return Number.isNaN(v) ? null : v;
+    const n = parseFloat(v.toString().replace(',', '.'));
+    return Number.isNaN(n) ? null : n;
+  }
+}
diff --git a/src/app/pages/mureg/mureg.html b/src/app/pages/mureg/mureg.html
new file mode 100644
index 0000000..3c7f35f
--- /dev/null
+++ b/src/app/pages/mureg/mureg.html
@@ -0,0 +1,292 @@
+<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 10000;">
+  <div #successToast class="toast text-bg-success border-0 shadow" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header border-bottom-0">
+      <strong class="me-auto text-primary">LineGestão</strong>
+      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fechar"></button>
+    </div>
+    <div class="toast-body bg-white rounded-bottom text-dark">
+      {{ toastMessage }}
+    </div>
+  </div>
+</div>
+
+<section class="mureg-page">
+  <span class="page-blob blob-1" aria-hidden="true"></span>
+  <span class="page-blob blob-2" aria-hidden="true"></span>
+  <span class="page-blob blob-3" aria-hidden="true"></span>
+  <span class="page-blob blob-4" aria-hidden="true"></span>
+
+  <div class="container-mureg">
+    <div class="mureg-card" data-animate>
+      
+      <div class="mureg-header">
+        <div class="header-row-top">
+          <div class="title-badge" data-animate>
+            <i class="bi bi-table"></i> MUREG
+          </div>
+          <div class="header-title" data-animate>
+            <h5 class="title mb-0">MUREG</h5>
+            <small class="subtitle">Gestão de registros MUREG</small>
+          </div>
+          <div class="header-actions d-flex gap-2 justify-content-end" data-animate>
+            <button type="button" class="btn btn-brand btn-sm" (click)="onCreate()" [disabled]="loading">
+               <i class="bi bi-plus-circle me-1"></i> Nova Mureg
+            </button>
+          </div>
+        </div>
+
+        <div class="mureg-kpis mt-4 animate-fade-in">
+          <div class="kpi">
+            <span class="lbl">Clientes</span>
+            <span class="val">
+               <span *ngIf="loading" class="spinner-border spinner-border-sm text-muted"></span>
+               <span *ngIf="!loading">{{ total || 0 }}</span>
+            </span>
+          </div>
+          <div class="kpi">
+            <span class="lbl">Registros</span>
+            <span class="val">
+               <span *ngIf="loading" class="spinner-border spinner-border-sm text-muted"></span>
+               <span *ngIf="!loading">{{ groupLoadedRecords || 0 }}</span>
+            </span>
+          </div>
+          <div class="kpi">
+            <span class="lbl text-brand">Trocas</span>
+            <span class="val text-brand">
+               <span *ngIf="loading" class="spinner-border spinner-border-sm text-muted"></span>
+               <span *ngIf="!loading">{{ groupTotalTrocas || 0 }}</span>
+            </span>
+          </div>
+          <div class="kpi">
+            <span class="lbl text-success">ICCID</span>
+            <span class="val text-success">
+               <span *ngIf="loading" class="spinner-border spinner-border-sm text-muted"></span>
+               <span *ngIf="!loading">{{ groupTotalIccids || 0 }}</span>
+            </span>
+          </div>
+        </div>
+
+        <div class="controls mt-3 mb-2" data-animate>
+          <div class="input-group input-group-sm search-group">
+            <span class="input-group-text"><i class="bi" [class.bi-search]="!loading" [class.bi-hourglass-split]="loading" [class.text-brand]="loading"></i></span>
+            <input class="form-control" placeholder="Pesquisar..." [(ngModel)]="searchTerm" (ngModelChange)="onSearch()" />
+            <button class="btn btn-outline-secondary btn-clear" type="button" (click)="clearSearch()" *ngIf="searchTerm"><i class="bi bi-x-lg"></i></button>
+          </div>
+          
+          <div class="page-size d-flex align-items-center gap-2">
+            <span class="text-muted small fw-bold text-uppercase" style="letter-spacing: 0.5px; font-size: 0.75rem;">Itens por pág:</span>
+            <div class="select-wrapper">
+                <select class="form-select form-select-sm select-glass" [(ngModel)]="pageSize" (change)="onPageSizeChange()" [disabled]="loading">
+                  <option [ngValue]="10">10</option>
+                  <option [ngValue]="20">20</option>
+                  <option [ngValue]="50">50</option>
+                  <option [ngValue]="100">100</option>
+                </select>
+                <i class="bi bi-chevron-down select-icon"></i>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <div class="mureg-body">
+        <div class="groups-container">
+          <div class="text-center p-5" *ngIf="loading"><span class="spinner-border text-brand"></span></div>
+          
+          <div class="empty-group" *ngIf="!loading && pagedClientGroups.length === 0">
+             Nenhum dado encontrado.
+          </div>
+
+          <div class="group-list" *ngIf="!loading">
+            <div *ngFor="let g of pagedClientGroups" class="client-group-card" [class.expanded]="expandedGroup === g.cliente">
+              
+              <div class="group-header" (click)="toggleGroup(g.cliente)">
+                <div class="group-info">
+                  <h6 class="mb-0 fw-bold text-dark td-clip" [title]="g.cliente">{{ g.cliente }}</h6>
+                  <div class="group-badges">
+                    <span class="badge-pill total">{{ g.total }} Registros</span>
+                    <span class="badge-pill swap" *ngIf="g.trocas > 0">{{ g.trocas }} Trocas</span>
+                    <span class="badge-pill ok" *ngIf="g.comIccid > 0">{{ g.comIccid }} ICCID</span>
+                    <span class="badge-pill warn" *ngIf="g.semIccid > 0">{{ g.semIccid }} Sem ICCID</span>
+                  </div>
+                </div>
+                <div class="group-toggle-icon"><i class="bi bi-chevron-down"></i></div>
+              </div>
+
+              <div class="group-body" *ngIf="expandedGroup === g.cliente">
+                 <div class="d-flex justify-content-between align-items-center px-4 py-2 border-bottom bg-white">
+                    <small class="text-muted fw-bold">Registros do Cliente</small>
+                    <span class="chip-muted"><i class="bi bi-info-circle me-1"></i> Use o botão à direita para editar</span>
+                 </div>
+
+                 <div class="table-wrap inner-table-wrap">
+                   <table class="table table-modern align-middle text-center mb-0">
+                     <thead>
+                       <tr>
+                         <th>ITEM</th>
+                         <th>LINHA ANTIGA</th>
+                         <th>LINHA NOVA</th>
+                         <th>ICCID</th>
+                         <th>DATA MUREG</th>
+                         <th>SITUAÇÃO</th>
+                         <th style="min-width: 80px;">AÇÕES</th>
+                       </tr>
+                     </thead>
+                     <tbody>
+                       <tr *ngIf="groupRows.length === 0">
+                         <td colspan="7" class="text-center py-4 empty-state text-muted fw-bold">Nenhum registro.</td>
+                       </tr>
+                       <tr *ngFor="let r of groupRows; trackBy: trackById" class="table-row-item">
+                         <td class="text-muted fw-bold">{{ r.item || '-' }}</td>
+                         <td class="text-dark">{{ r.linhaAntiga || '-' }}</td>
+                         <td class="fw-black text-blue">{{ r.linhaNova || '-' }}</td>
+                         <td class="small font-monospace">{{ r.iccid || '-' }}</td>
+                         <td class="text-muted small fw-bold">{{ displayValue('dataDaMureg', r.dataDaMureg) }}</td>
+                         <td>
+                           <span class="status-pill" [class.is-swap]="isTroca(r)" [class.is-same]="!isTroca(r)">
+                             {{ isTroca(r) ? 'TROCA' : 'SEM TROCA' }}
+                           </span>
+                         </td>
+                         <td>
+                            <div class="action-group justify-content-center">
+                               <button class="btn-icon primary" (click)="onEditar(r)" title="Editar Registro"><i class="bi bi-pencil-square"></i></button>
+                            </div>
+                         </td>
+                       </tr>
+                     </tbody>
+                   </table>
+                 </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mureg-footer">
+        <div class="small text-muted fw-bold">Mostrando {{ pageStart }}–{{ pageEnd }} de {{ total }} Clientes</div>
+        <nav><ul class="pagination pagination-sm mb-0 pagination-modern">
+            <li class="page-item" [class.disabled]="page === 1 || loading"><button class="page-link" (click)="goToPage(page - 1)">Anterior</button></li>
+            <li class="page-item" *ngFor="let p of pageNumbers" [class.active]="p === page"><button class="page-link" (click)="goToPage(p)">{{ p }}</button></li>
+            <li class="page-item" [class.disabled]="page === totalPages || loading"><button class="page-link" (click)="goToPage(page + 1)">Próxima</button></li>
+        </ul></nav>
+      </div>
+
+    </div>
+  </div>
+</section>
+
+<div class="modal-backdrop-custom" *ngIf="editOpen || createOpen" (click)="closeEdit(); closeCreate()"></div>
+
+<div class="modal-custom" *ngIf="editOpen">
+    <div class="modal-card modal-lg" (click)="$event.stopPropagation()">
+        <div class="modal-header">
+            <div class="modal-title">
+                <span class="icon-bg primary-soft"><i class="bi bi-pencil-square"></i></span>
+                Editar Registro Mureg
+            </div>
+            <div class="d-flex align-items-center gap-2">
+                <button class="btn btn-glass btn-sm" (click)="closeEdit()" [disabled]="editSaving">
+                    <i class="bi bi-x-lg me-1"></i> Cancelar
+                </button>
+                <button class="btn btn-brand btn-sm" (click)="saveEdit()" [disabled]="!editModel || editSaving">
+                    <span *ngIf="!editSaving"><i class="bi bi-check2-circle me-1"></i> Salvar</span>
+                    <span *ngIf="editSaving"><span class="spinner-border spinner-border-sm me-2"></span> Salvando...</span>
+                </button>
+            </div>
+        </div>
+        <div class="modal-body modern-body bg-light-gray">
+            <ng-container *ngIf="editModel; else editLoadingTpl">
+                <div class="details-dashboard">
+                    <div class="detail-box w-100">
+                        <div class="box-header"><span><i class="bi bi-card-text me-2"></i> Informações</span></div>
+                        <div class="box-body">
+                            <div class="form-grid">
+                                <div class="form-field span-2">
+                                    <label>Nome do Cliente</label>
+                                    <input class="form-control form-control-sm" [(ngModel)]="editModel.cliente" />
+                                </div>
+                                <div class="form-field">
+                                    <label>Item</label>
+                                    <input class="form-control form-control-sm" [(ngModel)]="editModel.item" />
+                                </div>
+                                <div class="form-field">
+                                    <label>Data Mureg</label>
+                                    <input class="form-control form-control-sm" type="date" [(ngModel)]="editModel.dataDaMureg" />
+                                </div>
+                                <div class="form-field">
+                                    <label>Linha Antiga</label>
+                                    <input class="form-control form-control-sm" [(ngModel)]="editModel.linhaAntiga" />
+                                </div>
+                                <div class="form-field">
+                                    <label>Linha Nova</label>
+                                    <input class="form-control form-control-sm fw-bold text-blue" [(ngModel)]="editModel.linhaNova" />
+                                </div>
+                                <div class="form-field span-2">
+                                    <label>ICCID</label>
+                                    <input class="form-control form-control-sm font-monospace" [(ngModel)]="editModel.iccid" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </ng-container>
+            <ng-template #editLoadingTpl><div class="p-5 text-center text-muted">Preparando edição...</div></ng-template>
+        </div>
+    </div>
+</div>
+
+<div class="modal-custom" *ngIf="createOpen">
+    <div class="modal-card modal-lg" (click)="$event.stopPropagation()">
+        <div class="modal-header">
+            <div class="modal-title">
+                <span class="icon-bg brand-soft"><i class="bi bi-plus-lg"></i></span>
+                Nova Mureg
+            </div>
+            <div class="d-flex align-items-center gap-2">
+                <button class="btn btn-glass btn-sm" (click)="closeCreate()" [disabled]="createSaving">
+                    <i class="bi bi-x-lg me-1"></i> Cancelar
+                </button>
+                <button class="btn btn-brand btn-sm" (click)="saveCreate()" [disabled]="createSaving">
+                    <span *ngIf="!createSaving"><i class="bi bi-check2-circle me-1"></i> Criar</span>
+                    <span *ngIf="createSaving"><span class="spinner-border spinner-border-sm me-2"></span> Salvando...</span>
+                </button>
+            </div>
+        </div>
+        <div class="modal-body modern-body bg-light-gray">
+            <div class="details-dashboard">
+                <div class="detail-box w-100">
+                    <div class="box-header"><span><i class="bi bi-pencil me-2"></i> Preencha os dados</span></div>
+                    <div class="box-body">
+                        <div class="form-grid">
+                            <div class="form-field span-2">
+                                <label>Nome do Cliente <span class="text-danger">*</span></label>
+                                <input class="form-control form-control-sm" [(ngModel)]="createModel.cliente" placeholder="Nome do Cliente" />
+                            </div>
+                            <div class="form-field">
+                                <label>Item</label>
+                                <input class="form-control form-control-sm" [(ngModel)]="createModel.item" />
+                            </div>
+                            <div class="form-field">
+                                <label>Data Mureg</label>
+                                <input class="form-control form-control-sm" type="date" [(ngModel)]="createModel.dataDaMureg" />
+                            </div>
+                            <div class="form-field">
+                                <label>Linha Antiga</label>
+                                <input class="form-control form-control-sm" [(ngModel)]="createModel.linhaAntiga" />
+                            </div>
+                            <div class="form-field">
+                                <label>Linha Nova <span class="text-danger">*</span></label>
+                                <input class="form-control form-control-sm fw-bold text-blue" [(ngModel)]="createModel.linhaNova" />
+                            </div>
+                            <div class="form-field span-2">
+                                <label>ICCID</label>
+                                <input class="form-control form-control-sm font-monospace" [(ngModel)]="createModel.iccid" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/mureg/mureg.scss b/src/app/pages/mureg/mureg.scss
new file mode 100644
index 0000000..8ca24e1
--- /dev/null
+++ b/src/app/pages/mureg/mureg.scss
@@ -0,0 +1,310 @@
+/* ========================================================== */
+/* VARIÁVEIS E GERAL */
+/* ========================================================== */
+:host {
+  --brand: #E33DCF; 
+  --blue: #030FAA; 
+  --text: #111214; 
+  --muted: rgba(17, 18, 20, 0.65); 
+  
+  --success-bg: rgba(25, 135, 84, 0.1);
+  --success-text: #198754;
+  --warn-bg: rgba(255, 193, 7, 0.15);
+  --warn-text: #b58100;
+  
+  --radius-xl: 22px;
+  --radius-lg: 16px;
+  --radius-md: 12px;
+  --shadow-card: 0 22px 46px rgba(17, 18, 20, 0.10);
+  --glass-bg: rgba(255, 255, 255, 0.82);
+  --glass-border: 1px solid rgba(227, 61, 207, 0.16);
+  
+  --swap-bg: rgba(227, 61, 207, 0.12);
+  --swap-text: #E33DCF;
+  --same-bg: rgba(3, 15, 170, 0.08);
+  --same-text: #030FAA;
+
+  display: block;
+  font-family: 'Inter', sans-serif;
+  color: var(--text);
+  box-sizing: border-box;
+}
+
+/* ========================================================== */
+/* LAYOUT PRINCIPAL */
+/* ========================================================== */
+.mureg-page {
+  min-height: 100vh;
+  padding: 0 12px;
+  display: flex;
+  align-items: flex-start; 
+  justify-content: center;
+  position: relative;
+  overflow-y: auto;
+  background:
+    radial-gradient(900px 420px at 20% 10%, rgba(227, 61, 207, 0.14), transparent 60%),
+    radial-gradient(820px 380px at 80% 30%, rgba(227, 61, 207, 0.08), transparent 60%),
+    linear-gradient(180deg, #ffffff 0%, #f5f5f7 70%);
+  &::after {
+    content: ''; position: absolute; inset: 0; pointer-events: none;
+    background: rgba(255, 255, 255, 0.25);
+  }
+}
+
+.page-blob {
+  position: fixed; pointer-events: none; border-radius: 999px; 
+  filter: blur(34px); opacity: 0.55; z-index: 0;
+  background: radial-gradient(circle at 30% 30%, rgba(227,61,207,0.55), rgba(227,61,207,0.06));
+  animation: floaty 10s ease-in-out infinite;
+  &.blob-1 { width: 420px; height: 420px; top: -140px; left: -140px; }
+  &.blob-2 { width: 520px; height: 520px; top: -220px; right: -240px; animation-duration: 12s; }
+  &.blob-3 { width: 360px; height: 360px; bottom: -180px; left: 25%; animation-duration: 14s; }
+  &.blob-4 { width: 520px; height: 520px; bottom: -260px; right: -260px; animation-duration: 16s; opacity: .45; }
+}
+@keyframes floaty {
+  0%    { transform: translate(0, 0) scale(1); }
+  50%   { transform: translate(18px, 10px) scale(1.03); }
+  100% { transform: translate(0, 0) scale(1); }
+}
+
+.container-mureg { 
+    width: 100%; 
+    max-width: 1180px; 
+    position: relative; 
+    z-index: 1; 
+    margin-top: 40px;
+    margin-bottom: 200px;
+}
+
+.mureg-card {
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  background: var(--glass-bg);
+  border: var(--glass-border);
+  backdrop-filter: blur(12px);
+  box-shadow: var(--shadow-card);
+  position: relative;
+  display: flex; flex-direction: column;
+  max-height: calc(100vh - 80px); 
+  &::before {
+    content: ''; position: absolute; inset: 1px; border-radius: calc(var(--radius-xl) - 1px);
+    pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.65); opacity: 0.75;
+  }
+}
+
+.mureg-header {
+  padding: 16px 24px;
+  border-bottom: 1px solid rgba(17, 18, 20, 0.06);
+  background: linear-gradient(180deg, rgba(227,61,207,0.06), rgba(255,255,255,0.2));
+  flex-shrink: 0;
+}
+
+.header-row-top {
+  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
+  @media (max-width: 768px) { grid-template-columns: 1fr; text-align: center; gap: 16px; .title-badge { justify-self: center; margin-bottom: 8px; } .header-actions { justify-self: center; } }
+}
+
+.title-badge {
+  justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px;
+  border-radius: 999px; background: rgba(255, 255, 255, 0.78);
+  border: 1px solid rgba(227, 61, 207, 0.22); backdrop-filter: blur(10px);
+  color: var(--text); font-size: 13px; font-weight: 800;
+  i { color: var(--brand); }
+}
+
+.header-title { justify-self: center; display: flex; flex-direction: column; align-items: center; text-align: center; }
+.title { font-size: 26px; font-weight: 950; letter-spacing: -0.3px; color: var(--text); margin-top: 10px; margin-bottom: 0; }
+.subtitle { color: rgba(17, 18, 20, 0.65); font-weight: 700; }
+.header-actions { justify-self: end; }
+
+/* Buttons */
+.btn-brand {
+  background-color: var(--brand); border-color: var(--brand); color: #fff; font-weight: 900; border-radius: 12px; transition: transform 0.2s, box-shadow 0.2s;
+  &:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(227, 61, 207, 0.25); filter: brightness(1.05); }
+  &:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
+}
+.btn-glass {
+  border-radius: 12px; font-weight: 900; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(3, 15, 170, 0.25); color: var(--blue);
+  &:hover { transform: translateY(-2px); border-color: var(--brand); background: #fff; }
+}
+
+/* KPIs */
+.mureg-kpis {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+    margin-top: 20px;
+    margin-bottom: 16px;
+    width: 100%;
+
+    @media (max-width: 992px) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    @media (max-width: 576px) {
+        grid-template-columns: 1fr;
+    }
+}
+  
+.kpi {
+    background: rgba(255,255,255,0.7);
+    border: 1px solid rgba(17,18,20,0.08);
+    border-radius: 16px;
+    padding: 12px 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    backdrop-filter: blur(8px);
+    transition: transform 0.2s, box-shadow 0.2s;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
+
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 15px rgba(227, 61, 207, 0.1);
+        background: #fff;
+        border-color: var(--brand);
+    }
+
+    .lbl {
+        font-size: 0.72rem;
+        font-weight: 900;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        color: var(--muted);
+        &.text-success { color: var(--success-text) !important; }
+        &.text-brand { color: var(--brand) !important; }
+    }
+
+    .val {
+        font-size: 1.25rem;
+        font-weight: 950;
+        color: var(--text);
+        &.text-success { color: var(--success-text) !important; }
+        &.text-brand { color: var(--brand) !important; }
+    }
+}
+
+/* Controls */
+.controls { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
+.search-group {
+  max-width: 270px; border-radius: 12px; overflow: hidden; display: flex; align-items: stretch; background: #fff;  border: 1px solid rgba(17, 18, 20, 0.15);  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); transition: all 0.2s ease;
+  &:focus-within { border-color: var(--brand); box-shadow: 0 4px 12px rgba(227, 61, 207, 0.15); transform: translateY(-1px); }
+  .input-group-text { background: transparent; border: none; color: var(--muted); padding-left: 14px; padding-right: 8px; display: flex; align-items: center; i { font-size: 1rem; } }
+  .form-control { border: none; background: transparent; padding: 10px 0; font-size: 0.9rem; color: var(--text); box-shadow: none; &::placeholder { color: rgba(17, 18, 20, 0.4); font-weight: 500; } &:focus { outline: none; } }
+  .btn-clear { background: transparent; border: none; color: var(--muted); padding: 0 12px; display: flex; align-items: center; cursor: pointer; transition: color 0.2s; &:hover { color: #dc3545; } i { font-size: 1rem; } }
+}
+
+.page-size { margin-left: auto; @media (max-width: 500px) { margin-left: 0; width: 100%; justify-content: space-between; } }
+.select-wrapper { position: relative; display: inline-block; min-width: 90px; }
+.select-glass {
+  appearance: none; -webkit-appearance: none; -moz-appearance: none;
+  background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(17, 18, 20, 0.15); border-radius: 12px;
+  color: var(--blue); font-weight: 800; font-size: 0.9rem; text-align: left;
+  padding: 8px 36px 8px 14px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); cursor: pointer; transition: all 0.2s ease; width: 100%;
+  &:hover { background: #fff; border-color: var(--blue); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(3, 15, 170, 0.1); }
+  &:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(227, 61, 207, 0.15); }
+}
+.select-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); font-size: 0.75rem; transition: transform 0.2s ease; }
+.select-wrapper:hover .select-icon { color: var(--blue); }
+
+/* Animation */
+.animate-fade-in { animation: simpleFadeIn 0.5s ease-out forwards; }
+@keyframes simpleFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
+
+/* BODY & GROUPS */
+.mureg-body { padding: 0; background: transparent; flex: 1; overflow: hidden; display: flex; flex-direction: column; }
+.groups-container { padding: 16px; overflow-y: auto; height: 100%; }
+.group-list { display: flex; flex-direction: column; gap: 12px; }
+.empty-group { background: rgba(255,255,255,0.7); border: 1px dashed rgba(17,18,20,0.12); border-radius: 16px; padding: 18px; text-align: center; font-weight: 800; color: var(--muted); }
+
+.client-group-card {
+  background: #fff; border-radius: 16px; border: 1px solid rgba(17,18,20,0.08); overflow: hidden; transition: all 0.3s ease;
+  &:hover { border-color: var(--brand); box-shadow: 0 4px 12px rgba(227,61,207,0.1); }
+  &.expanded { border-color: var(--brand); box-shadow: 0 8px 24px rgba(227,61,207,0.12); }
+}
+.group-header { padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: linear-gradient(180deg, #fff, #fdfdfd); &:hover .group-toggle-icon { color: var(--brand); } }
+.group-info { display: flex; flex-direction: column; gap: 6px; }
+.group-badges { display: flex; gap: 8px; flex-wrap: wrap; }
+.badge-pill { font-size: 0.7rem; padding: 4px 10px; border-radius: 999px; font-weight: 800; text-transform: uppercase; 
+    &.total { background: rgba(3,15,170,0.1); color: var(--blue); } 
+    &.swap { background: var(--swap-bg); color: var(--swap-text); } 
+    &.ok { background: var(--success-bg); color: var(--success-text); } 
+    &.warn { background: var(--warn-bg); color: var(--warn-text); } 
+}
+.group-toggle-icon { font-size: 1.2rem; color: var(--muted); transition: transform 0.3s ease; }
+.client-group-card.expanded .group-toggle-icon { transform: rotate(180deg); color: var(--brand); }
+.group-body { border-top: 1px solid rgba(17,18,20,0.06); background: #fbfbfc; animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
+@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
+
+.chip-muted { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 800; color: rgba(17,18,20,0.55); padding: 4px 10px; border-radius: 999px; background: rgba(17,18,20,0.04); border: 1px solid rgba(17,18,20,0.06); }
+.inner-table-wrap { max-height: 450px; overflow-y: auto; }
+
+/* TABLE */
+.table-wrap { overflow-x: auto; overflow-y: auto; height: 100%; }
+.table-modern {
+  width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0;
+  thead th { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border-bottom: 2px solid rgba(227, 61, 207, 0.15); padding: 12px; color: rgba(17, 18, 20, 0.7); font-size: 0.8rem; font-weight: 950; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color 0.2s; text-align: center !important; &:hover { color: var(--brand); } }
+  tbody tr { transition: background-color 0.2s; border-bottom: 1px solid rgba(17,18,20,0.05); &:hover { background-color: rgba(227, 61, 207, 0.05); } td { border-bottom: 1px solid rgba(17,18,20,0.04); } }
+  td { padding: 12px; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.875rem; color: var(--text); text-align: center !important; }
+}
+.row-clickable { cursor: default; }
+.text-brand { color: var(--brand) !important; }
+.text-blue { color: var(--blue) !important; }
+.fw-black { font-weight: 950; }
+.td-clip { overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
+.empty-state { background: rgba(255,255,255,0.4); }
+
+.status-pill { display: inline-block; vertical-align: middle; max-width: 100%; padding: 6px 14px; border-radius: 999px; font-weight: 950; font-size: 0.75rem; letter-spacing: 0.3px; text-align: center; text-transform: uppercase; border: 1px solid rgba(17,18,20,0.1); background: rgba(17,18,20,0.05); color: rgba(17,18,20,0.7); 
+    &.is-swap { background: var(--swap-bg); border-color: rgba(227,61,207,0.25); color: var(--swap-text); }
+    &.is-same { background: var(--same-bg); border-color: rgba(3,15,170,0.25); color: var(--same-text); }
+}
+
+/* ACTIONS */
+.action-group { display: flex; justify-content: center; gap: 6px; }
+.btn-icon { 
+    width: 32px; height: 32px; border: none; background: transparent; border-radius: 8px; 
+    display: flex; align-items: center; justify-content: center; 
+    color: rgba(17,18,20,0.5); transition: all 0.2s; cursor: pointer;
+    &:hover { background: rgba(17,18,20,0.05); color: var(--text); transform: translateY(-1px); } 
+    &.primary:hover { color: var(--blue); background: rgba(3,15,170,0.1); } 
+}
+
+/* FOOTER */
+.mureg-footer { padding: 14px 24px; border-top: 1px solid rgba(17, 18, 20, 0.06); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; flex-shrink: 0; @media (max-width: 768px) { justify-content: center; text-align: center; } }
+.pagination-modern .page-link { color: var(--blue); font-weight: 900; border-radius: 10px; border: 1px solid rgba(17,18,20,0.1); background: rgba(255,255,255,0.6); margin: 0 2px; &:hover { transform: translateY(-1px); border-color: var(--brand); color: var(--brand); } }
+.pagination-modern .page-item.active .page-link { background-color: var(--blue); border-color: var(--blue); color: #fff; }
+
+/* MODALS */
+.modal-backdrop-custom { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9990; backdrop-filter: blur(4px); }
+.modal-custom { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 9995; padding: 16px; }
+.modal-card { background: #ffffff; border: 1px solid rgba(255,255,255,0.8); border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); overflow: hidden; display: flex; flex-direction: column; animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); width: min(850px, 100%); max-height: 90vh; }
+@keyframes modalPop { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+.modal-header { padding: 16px 24px; border-bottom: 1px solid rgba(0,0,0,0.06); background: #fff; display: flex; justify-content: space-between; align-items: center; .modal-title { font-size: 1.1rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 12px; } 
+    .icon-bg { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; 
+        &.primary-soft { background: rgba(3, 15, 170, 0.1); color: var(--blue); } 
+        &.brand-soft { background: rgba(227, 61, 207, 0.1); color: var(--brand); } /* Adicionado */
+    } 
+    .btn-icon { color: var(--muted); background: transparent; font-size: 1.2rem; border:none; cursor: pointer; &:hover { color: var(--brand); } } 
+} 
+.modal-body { padding: 24px; overflow-y: auto; &.bg-light-gray { background-color: #f8f9fa; } }
+
+/* FORM & DETAILS */
+.details-dashboard { display: grid; grid-template-columns: 1fr; gap: 20px; }
+div.detail-box { background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 2px 8px rgba(0,0,0,0.02); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
+div.box-header { padding: 10px 16px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid rgba(0,0,0,0.04); background: #fdfdfd; display: flex; align-items: center; }
+div.box-body { padding: 16px; }
+
+/* EDIT FORM STYLES */
+.form-grid { 
+    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; 
+    @media (max-width: 600px) { grid-template-columns: 1fr; }
+}
+.form-field { 
+    display: flex; flex-direction: column; gap: 6px; 
+    label { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(17,18,20,0.65); } 
+    &.span-2 { grid-column: span 2; @media (max-width: 600px) { grid-column: span 1; } } 
+}
+.form-control { 
+    border-radius: 8px; border: 1px solid rgba(17,18,20,0.15); 
+    &:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(227,61,207,0.15); outline: none; } 
+}
\ No newline at end of file
diff --git a/src/app/pages/mureg/mureg.ts b/src/app/pages/mureg/mureg.ts
new file mode 100644
index 0000000..8b82728
--- /dev/null
+++ b/src/app/pages/mureg/mureg.ts
@@ -0,0 +1,433 @@
+import {
+  Component,
+  ElementRef,
+  ViewChild,
+  Inject,
+  PLATFORM_ID,
+  AfterViewInit,
+  ChangeDetectorRef
+} from '@angular/core';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  HttpClient,
+  HttpClientModule,
+  HttpParams
+} from '@angular/common/http';
+
+type MuregKey = 'item' | 'linhaAntiga' | 'linhaNova' | 'iccid' | 'dataDaMureg' | 'cliente';
+
+interface MuregRow {
+  id: string;
+  item: string;
+  linhaAntiga: string;
+  linhaNova: string;
+  iccid: string;
+  dataDaMureg: string;
+  cliente: string;
+  raw: any;
+}
+
+interface ApiPagedResult<T> {
+  page?: number;
+  pageSize?: number;
+  total?: number;
+  items?: T[];
+}
+
+interface ClientGroup {
+  cliente: string;
+  total: number;
+  trocas: number;
+  comIccid: number;
+  semIccid: number;
+}
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, FormsModule, HttpClientModule],
+  templateUrl: './mureg.html',
+  styleUrls: ['./mureg.scss']
+})
+export class Mureg implements AfterViewInit {
+  toastMessage = '';
+  loading = false;
+
+  @ViewChild('successToast', { static: false }) successToast!: ElementRef;
+
+  constructor(
+    @Inject(PLATFORM_ID) private platformId: object,
+    private http: HttpClient,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  private readonly apiBase = 'https://localhost:7205/api/mureg';
+
+  // ====== DATA ======
+  clientGroups: ClientGroup[] = [];
+  pagedClientGroups: ClientGroup[] = [];
+  expandedGroup: string | null = null;
+  groupRows: MuregRow[] = [];
+
+  private rowsByClient = new Map<string, MuregRow[]>();
+  
+  // KPIs
+  groupLoadedRecords = 0;
+  groupTotalTrocas = 0;
+  groupTotalIccids = 0;
+
+  // ====== FILTERS & PAGINATION ======
+  searchTerm = '';
+  private searchTimer: any = null;
+  page = 1;
+  pageSize = 10;
+  total = 0;
+
+  // ====== EDIT MODAL ======
+  editOpen = false;
+  editSaving = false;
+  editModel: any = null;
+
+  // ====== CREATE MODAL ======
+  createOpen = false;
+  createSaving = false;
+  createModel: any = {
+      cliente: '',
+      item: '',
+      linhaAntiga: '',
+      linhaNova: '',
+      iccid: '',
+      dataDaMureg: ''
+  };
+
+  async ngAfterViewInit() {
+    if (!isPlatformBrowser(this.platformId)) return;
+    this.initAnimations();
+    setTimeout(() => { this.refresh(); });
+  }
+
+  private initAnimations() {
+    document.documentElement.classList.add('js-animate');
+    setTimeout(() => {
+      const items = document.querySelectorAll<HTMLElement>('[data-animate]');
+      items.forEach((el) => el.classList.add('is-visible'));
+    }, 100);
+  }
+
+  refresh() {
+    this.page = 1;
+    this.loadForGroups();
+  }
+
+  onSearch() {
+    if (this.searchTimer) clearTimeout(this.searchTimer);
+    this.searchTimer = setTimeout(() => {
+      this.page = 1;
+      this.expandedGroup = null;
+      this.groupRows = [];
+      this.loadForGroups();
+    }, 300);
+  }
+
+  clearSearch() {
+    this.searchTerm = '';
+    this.page = 1;
+    this.expandedGroup = null;
+    this.groupRows = [];
+    this.loadForGroups();
+  }
+
+  onPageSizeChange() {
+    this.page = 1;
+    this.applyPagination();
+  }
+
+  goToPage(p: number) {
+    this.page = Math.max(1, Math.min(this.totalPages, p));
+    this.applyPagination();
+  }
+
+  get totalPages() { return Math.ceil((this.total || 0) / this.pageSize) || 1; }
+  get pageNumbers() {
+    const total = this.totalPages;
+    const current = this.page;
+    const max = 5;
+    let start = Math.max(1, current - 2);
+    let end = Math.min(total, start + (max - 1));
+    start = Math.max(1, end - (max - 1));
+    const pages: number[] = [];
+    for (let i = start; i <= end; i++) pages.push(i);
+    return pages;
+  }
+  get pageStart() { return this.total === 0 ? 0 : (this.page - 1) * this.pageSize + 1; }
+  get pageEnd() {
+    if (this.total === 0) return 0;
+    return Math.min(this.page * this.pageSize, this.total);
+  }
+
+  trackById(_: number, row: MuregRow) { return row.id; }
+
+  // =======================================================================
+  // LOAD LOGIC
+  // =======================================================================
+  private loadForGroups() {
+    this.loading = true;
+    const MAX_FETCH = 5000;
+
+    let params = new HttpParams()
+      .set('page', '1')
+      .set('pageSize', String(MAX_FETCH))
+      .set('search', (this.searchTerm ?? '').trim())
+      .set('sortBy', 'cliente')
+      .set('sortDir', 'asc');
+
+    this.http.get<ApiPagedResult<any> | any[]>(this.apiBase, { params }).subscribe({
+      next: (res: any) => {
+        const items = Array.isArray(res) ? res : (res.items ?? []);
+        const normalized = (items ?? []).map((x: any, idx: number) => this.normalizeRow(x, idx));
+        this.buildGroups(normalized);
+        this.applyPagination();
+        this.loading = false;
+        this.cdr.detectChanges();
+      },
+      error: async () => {
+        this.loading = false;
+        await this.showToast('Erro ao carregar MUREG.');
+      }
+    });
+  }
+
+  private buildGroups(all: MuregRow[]) {
+    this.rowsByClient.clear();
+    const safeClient = (c: any) => (String(c ?? '').trim() || 'SEM CLIENTE');
+
+    for (const r of all) {
+      const key = safeClient(r.cliente);
+      r.cliente = key;
+      const arr = this.rowsByClient.get(key) ?? [];
+      arr.push(r);
+      this.rowsByClient.set(key, arr);
+    }
+
+    const groups: ClientGroup[] = [];
+    let trocasTotal = 0;
+    let iccidsTotal = 0;
+
+    this.rowsByClient.forEach((arr, cliente) => {
+      const total = arr.length;
+      const trocas = arr.filter(x => this.isTroca(x)).length;
+      const comIccid = arr.filter(x => String(x.iccid ?? '').trim() !== '').length;
+      const semIccid = total - comIccid;
+      trocasTotal += trocas;
+      iccidsTotal += comIccid;
+      groups.push({ cliente, total, trocas, comIccid, semIccid });
+    });
+
+    groups.sort((a, b) => a.cliente.localeCompare(b.cliente, 'pt-BR', { sensitivity: 'base' }));
+
+    this.clientGroups = groups;
+    this.total = groups.length;
+    this.groupLoadedRecords = all.length;
+    this.groupTotalTrocas = trocasTotal;
+    this.groupTotalIccids = iccidsTotal;
+  }
+
+  private applyPagination() {
+    const start = (this.page - 1) * this.pageSize;
+    const end = start + this.pageSize;
+    this.pagedClientGroups = this.clientGroups.slice(start, end);
+    if (this.expandedGroup && !this.pagedClientGroups.some(g => g.cliente === this.expandedGroup)) {
+      this.expandedGroup = null;
+      this.groupRows = [];
+    }
+  }
+
+  toggleGroup(cliente: string) {
+    if (this.expandedGroup === cliente) {
+      this.expandedGroup = null;
+      this.groupRows = [];
+      return;
+    }
+    this.expandedGroup = cliente;
+    const rows = this.rowsByClient.get(cliente) ?? [];
+    this.groupRows = [...rows].sort((a, b) => {
+      const ai = parseInt(String(a.item ?? '0'), 10);
+      const bi = parseInt(String(b.item ?? '0'), 10);
+      if (Number.isFinite(ai) && Number.isFinite(bi) && ai !== bi) return ai - bi;
+      return String(a.linhaNova ?? '').localeCompare(String(b.linhaNova ?? ''), 'pt-BR', { sensitivity: 'base' });
+    });
+  }
+
+  isTroca(r: MuregRow): boolean {
+    const a = String(r.linhaAntiga ?? '').trim();
+    const b = String(r.linhaNova ?? '').trim();
+    if (!a || !b) return false;
+    return a !== b;
+  }
+
+  private normalizeRow(x: any, idx: number): MuregRow {
+    const pick = (obj: any, keys: string[]): any => {
+      for (const k of keys) {
+        if (obj && obj[k] !== undefined && obj[k] !== null && String(obj[k]).trim() !== '') return obj[k];
+      }
+      return '';
+    };
+
+    const item = pick(x, ['item', 'ITEM', 'ITÉM']);
+    const linhaAntiga = pick(x, ['linhaAntiga', 'linha_antiga', 'LINHA ANTIGA']);
+    const linhaNova = pick(x, ['linhaNova', 'linha_nova', 'LINHA NOVA']);
+    const iccid = pick(x, ['iccid', 'ICCID']);
+    const dataDaMureg = pick(x, ['dataDaMureg', 'data_da_mureg', 'DATA DA MUREG']);
+    const cliente = pick(x, ['cliente', 'CLIENTE']);
+    const id = String(pick(x, ['id', 'ID']) || `${idx}-${item}-${linhaNova}-${iccid}`);
+
+    return {
+      id,
+      item: String(item ?? ''),
+      linhaAntiga: String(linhaAntiga ?? ''),
+      linhaNova: String(linhaNova ?? ''),
+      iccid: String(iccid ?? ''),
+      dataDaMureg: String(dataDaMureg ?? ''),
+      cliente: String(cliente ?? ''),
+      raw: x
+    };
+  }
+
+  // ====== MODAL EDIÇÃO ======
+
+  // 1. Abrir modal
+  onEditar(r: MuregRow) {
+    this.editOpen = true;
+    this.editSaving = false;
+    
+    this.editModel = {
+        id: r.id,
+        item: r.item,
+        linhaAntiga: r.linhaAntiga,
+        linhaNova: r.linhaNova,
+        iccid: r.iccid,
+        cliente: r.cliente,
+        dataDaMureg: this.isoToDateInput(r.dataDaMureg)
+    };
+  }
+
+  // 2. Fechar modal
+  closeEdit() {
+    this.editOpen = false;
+    this.editModel = null;
+    this.editSaving = false;
+  }
+
+  // 3. Salvar (PUT)
+  saveEdit() {
+      if(!this.editModel || !this.editModel.id) return;
+      this.editSaving = true;
+
+      const payload = {
+          ...this.editModel,
+          dataDaMureg: this.dateInputToIso(this.editModel.dataDaMureg)
+      };
+
+      this.http.put(`${this.apiBase}/${this.editModel.id}`, payload).subscribe({
+          next: async () => {
+              this.editSaving = false;
+              await this.showToast('Registro atualizado com sucesso!');
+              this.closeEdit();
+              const currentGroup = this.expandedGroup;
+              this.loadForGroups();
+              if(currentGroup) setTimeout(() => this.expandedGroup = currentGroup, 400);
+          },
+          error: async () => {
+              this.editSaving = false;
+              await this.showToast('Erro ao salvar edição.');
+          }
+      });
+  }
+
+  // ====== MODAL CRIAÇÃO ======
+
+  onCreate() {
+      this.createOpen = true;
+      this.createSaving = false;
+      this.createModel = {
+          cliente: '',
+          item: '',
+          linhaAntiga: '',
+          linhaNova: '',
+          iccid: '',
+          dataDaMureg: ''
+      };
+  }
+
+  closeCreate() {
+      this.createOpen = false;
+  }
+
+  saveCreate() {
+      if(!this.createModel.cliente || !this.createModel.linhaNova) {
+          this.showToast('Preencha Cliente e Linha Nova.');
+          return;
+      }
+      this.createSaving = true;
+
+      const payload = {
+          ...this.createModel,
+          dataDaMureg: this.dateInputToIso(this.createModel.dataDaMureg)
+      };
+
+      this.http.post(this.apiBase, payload).subscribe({
+          next: async () => {
+              this.createSaving = false;
+              await this.showToast('Mureg criada com sucesso!');
+              this.closeCreate();
+              this.loadForGroups();
+          },
+          error: async () => {
+              this.createSaving = false;
+              await this.showToast('Erro ao criar Mureg.');
+          }
+      });
+  }
+
+  // Helpers de Data
+  private isoToDateInput(iso: string | null | undefined): string {
+      if(!iso) return '';
+      const dt = new Date(iso);
+      if(Number.isNaN(dt.getTime())) return '';
+      return dt.toISOString().slice(0,10);
+  }
+
+  private dateInputToIso(val: string | null | undefined): string | null {
+      if(!val) return null;
+      const dt = new Date(val);
+      if(Number.isNaN(dt.getTime())) return null;
+      return dt.toISOString();
+  }
+
+  displayValue(key: MuregKey, v: any): string {
+    if (v === null || v === undefined || String(v).trim() === '') return '-';
+    if (key === 'dataDaMureg') {
+      const s = String(v).trim();
+      const d = new Date(s);
+      if (!Number.isNaN(d.getTime())) {
+        return new Intl.DateTimeFormat('pt-BR').format(d);
+      }
+      return s;
+    }
+    return String(v);
+  }
+
+  private async showToast(message: string) {
+    if (!isPlatformBrowser(this.platformId)) return;
+    this.toastMessage = message;
+    this.cdr.detectChanges();
+    if (!this.successToast?.nativeElement) return;
+    try {
+      const bs = await import('bootstrap');
+      const toastInstance = bs.Toast.getOrCreateInstance(this.successToast.nativeElement, { autohide: true, delay: 3000 });
+      toastInstance.show();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/services/billing.spec.ts b/src/app/services/billing.spec.ts
new file mode 100644
index 0000000..69e925a
--- /dev/null
+++ b/src/app/services/billing.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { Billing } from './billing';
+
+describe('Billing', () => {
+  let service: Billing;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(Billing);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/services/billing.ts b/src/app/services/billing.ts
new file mode 100644
index 0000000..4087130
--- /dev/null
+++ b/src/app/services/billing.ts
@@ -0,0 +1,91 @@
+// src/app/services/billing.ts
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+export type SortDir = 'asc' | 'desc';
+export type TipoCliente = 'PF' | 'PJ';
+
+export type BillingSortBy =
+  | 'item'
+  | 'cliente'
+  | 'qtdlinhas'
+  | 'lucro'
+  | 'valorcontratovivo'
+  | 'valorcontratoline'
+  | 'franquiavivo'
+  | 'franquialine';
+
+export interface PagedResult<T> {
+  page: number;
+  pageSize: number;
+  total: number;
+  items: T[];
+}
+
+export interface BillingItem {
+  id: string;
+  tipo: TipoCliente;
+  item: number;
+
+  cliente: string | null;
+
+  qtdLinhas: number | null;
+
+  franquiaVivo: number | null;
+  valorContratoVivo: number | null;
+
+  franquiaLine: number | null;
+  valorContratoLine: number | null;
+
+  lucro: number | null;
+
+  aparelho: string | null;
+  formaPagamento: string | null;
+}
+
+export interface BillingQuery {
+  tipo: TipoCliente;
+  search?: string;
+  client?: string;
+  page: number;
+  pageSize: number;
+  sortBy?: BillingSortBy;
+  sortDir?: SortDir;
+}
+
+@Injectable({ providedIn: 'root' })
+export class BillingService {
+  // ✅ Use HTTPS pra evitar redirect no preflight (CORS)
+  // Mesmas portas que você mostrou no log:
+  //   https://localhost:7205
+  //   http://localhost:5298
+  private baseUrl = 'https://localhost:7205/api/billing';
+
+  constructor(private http: HttpClient) {}
+
+  getPaged(q: BillingQuery): Observable<PagedResult<BillingItem>> {
+    const sortBy: BillingSortBy = (q.sortBy ?? 'cliente');
+    const sortDir: SortDir = (q.sortDir ?? 'asc');
+
+    let params = new HttpParams()
+      .set('tipo', q.tipo)
+      .set('page', String(q.page))
+      .set('pageSize', String(q.pageSize))
+      .set('sortBy', sortBy)
+      .set('sortDir', sortDir);
+
+    const search = (q.search ?? '').trim();
+    if (search) params = params.set('search', search);
+
+    const client = (q.client ?? '').trim();
+    if (client) params = params.set('client', client);
+
+    return this.http.get<PagedResult<BillingItem>>(this.baseUrl, { params });
+  }
+
+  getClients(tipo: TipoCliente): Observable<string[]> {
+    const params = new HttpParams().set('tipo', tipo);
+    return this.http.get<string[]>(`${this.baseUrl}/clients`, { params });
+  }
+}
diff --git a/src/app/services/lines.service.ts b/src/app/services/lines.service.ts
index db73ffa..5f5b162 100644
--- a/src/app/services/lines.service.ts
+++ b/src/app/services/lines.service.ts
@@ -51,17 +51,18 @@ export interface MobileLineDetail extends MobileLineList {
 
 @Injectable({ providedIn: 'root' })
 export class LinesService {
-  // ajuste aqui conforme sua API (mesmo host do auth)
-  private baseUrl = 'http://localhost:5000/api/lines';
+  // ✅ Mesma base do Swagger (evita redirect no preflight/CORS)
+  private baseUrl = 'https://localhost:7205/api/lines';
 
   constructor(private http: HttpClient) {}
 
   getLines(page: number, pageSize: number, search: string): Observable<PagedResult<MobileLineList>> {
     let params = new HttpParams()
-      .set('page', page)
-      .set('pageSize', pageSize);
+      .set('page', String(page))
+      .set('pageSize', String(pageSize));
 
-    if (search?.trim()) params = params.set('search', search.trim());
+    const s = (search ?? '').trim();
+    if (s) params = params.set('search', s);
 
     return this.http.get<PagedResult<MobileLineList>>(this.baseUrl, { params });
   }
@@ -83,4 +84,26 @@ export class LinesService {
     form.append('file', file);
     return this.http.post<{ imported: number }>(`${this.baseUrl}/import-excel`, form);
   }
+
+  // (opcional) se você usa groups/clients no Geral, pode manter aqui também:
+  getClients(skil?: string): Observable<string[]> {
+    let params = new HttpParams();
+    const s = (skil ?? '').trim();
+    if (s) params = params.set('skil', s);
+    return this.http.get<string[]>(`${this.baseUrl}/clients`, { params });
+  }
+
+  getGroups(page: number, pageSize: number, skil?: string, search?: string) {
+    let params = new HttpParams()
+      .set('page', String(page))
+      .set('pageSize', String(pageSize));
+
+    const sk = (skil ?? '').trim();
+    if (sk) params = params.set('skil', sk);
+
+    const se = (search ?? '').trim();
+    if (se) params = params.set('search', se);
+
+    return this.http.get<PagedResult<any>>(`${this.baseUrl}/groups`, { params });
+  }
 }