From f775748dbd318dff73677ade3e5f434b6ad209e5 Mon Sep 17 00:00:00 2001
From: VPS 4 Deploy Agent <deploy@clube67.com>
Date: Wed, 3 Jun 2026 17:54:40 +0200
Subject: [PATCH] feat(ui): clone mobile aesthetics to main react app
 (responsive dashboard)

---
 dental-server/dental-client/src/index.css | 835 ++++++++--------------
 1 file changed, 303 insertions(+), 532 deletions(-)

diff --git a/dental-server/dental-client/src/index.css b/dental-server/dental-client/src/index.css
index c93a488..10772f0 100644
--- a/dental-server/dental-client/src/index.css
+++ b/dental-server/dental-client/src/index.css
@@ -1,6 +1,5 @@
 /* ================================================================
-   DENTAL IMAGE MANAGER - PREMIUM STYLES
-   Portado do style.css para o app React
+   DENTAL IMAGE MANAGER - MODERN REDESIGN (Clone do Mobile)
    ================================================================ */
 
 :root {
@@ -19,16 +18,16 @@
     --bg-color: #f8fafc;
     --bg-surface: #ffffff;
     --border-color: #e2e8f0;
-    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-sm: 0 1px 3px rgba(20,21,42,.04);
+    --shadow: 0 4px 12px rgba(20,21,42,.08);
     --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-    --glass-bg: rgba(255, 255, 255, 0.7);
+    --shadow-lg: 0 12px 32px rgba(0,0,0,.15);
+    --glass-bg: rgba(255, 255, 255, 0.9);
     --glass-border: rgba(255, 255, 255, 0.5);
-    --glass-blur: blur(12px);
-    --radius-sm: 8px;
-    --radius: 12px;
-    --radius-lg: 20px;
+    --glass-blur: blur(20px);
+    --radius-sm: 12px;
+    --radius: 16px;
+    --radius-lg: 24px;
     --radius-full: 9999px;
     --sidebar-width: 260px;
     --font-heading: 'Outfit', sans-serif;
@@ -39,7 +38,7 @@ html { scroll-behavior: smooth; }
 
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    background: var(--bg-color);
+    background: #0f172a; /* Fundo principal escuro como no painel moderno */
     color: var(--text-primary);
     line-height: 1.6;
     min-height: 100vh;
@@ -49,14 +48,16 @@ body {
 #root { height: 100vh; }
 
 /* ================================================================
-   APP LAYOUT
+   APP LAYOUT - Modern Dashboard Style
    ================================================================ */
 .app-container {
     display: flex;
     height: 100vh;
     width: 100vw;
     overflow: hidden;
-    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
+    background: #0f172a;
+    padding: 12px;
+    gap: 12px;
 }
 
 /* ================================================================
@@ -64,15 +65,14 @@ body {
    ================================================================ */
 .sidebar {
     width: var(--sidebar-width);
-    height: 100vh;
+    height: 100%;
     overflow: hidden;
-    background: var(--glass-bg);
-    backdrop-filter: var(--glass-blur);
-    -webkit-backdrop-filter: var(--glass-blur);
-    border-right: 1px solid var(--glass-border);
+    background: #1e293b; /* Sidebar escura moderna */
+    border-radius: var(--radius-lg);
+    border: none;
     display: flex;
     flex-direction: column;
-    padding: 10px 0;
+    padding: 20px 0;
     z-index: 100;
     box-shadow: var(--shadow-md);
     flex-shrink: 0;
@@ -80,17 +80,19 @@ body {
 }
 
 .sidebar-header {
-    padding: 0 20px;
+    padding: 0 20px 16px;
     display: flex;
     align-items: center;
     gap: 12px;
     flex-shrink: 0;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+    margin-bottom: 12px;
 }
 
 .logo-icon {
     width: 40px; height: 40px;
     background: linear-gradient(135deg, #4cc9f0, var(--primary-color));
-    border-radius: 10px;
+    border-radius: 12px;
     display: flex; align-items: center; justify-content: center;
     font-size: 20px; color: white;
 }
@@ -99,89 +101,72 @@ body {
     font-family: var(--font-heading);
     font-size: 22px; font-weight: 600;
     letter-spacing: 0.5px;
-    color: var(--dark-color);
+    color: #f8fafc;
 }
 
 .sidebar-nav {
     display: flex; flex-direction: column;
-    gap: 2px; padding: 0 12px;
+    gap: 4px; padding: 0 16px;
     flex: 1; overflow-y: auto;
 }
 
-/* Customização da scrollbar da navegação interna da sidebar */
-.sidebar-nav::-webkit-scrollbar {
-    width: 6px;
-}
-.sidebar-nav::-webkit-scrollbar-track {
-    background: transparent;
-}
-.sidebar-nav::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.15);
-    border-radius: 99px;
-}
-.sidebar-nav::-webkit-scrollbar-thumb:hover {
-    background: rgba(0, 0, 0, 0.3);
-}
-.sidebar-nav {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
-}
+.sidebar-nav::-webkit-scrollbar { width: 6px; }
+.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
+.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 99px; }
+.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
 
 .nav-item {
-    padding: 8px 12px; border-radius: 8px;
-    color: var(--dark-color); opacity: 0.7;
-    text-decoration: none; font-weight: 500;
-    font-size: 0.92rem;
-    display: flex; align-items: center; gap: 10px;
-    transition: all 0.3s ease;
+    padding: 12px 14px; border-radius: 14px;
+    color: #cbd5e1; opacity: 0.8;
+    text-decoration: none; font-weight: 600;
+    font-size: 0.95rem;
+    display: flex; align-items: center; gap: 12px;
+    transition: all 0.2s ease;
     cursor: pointer;
     background: none; border: none; width: 100%; text-align: left;
 }
 
-.nav-item i { font-size: 18px; width: 20px; text-align: center; }
+.nav-item i { font-size: 20px; width: 22px; text-align: center; }
 
 .nav-item:hover {
-    background: var(--bg-surface);
-    color: var(--primary-color);
+    background: rgba(255,255,255,0.05);
+    color: white;
     opacity: 1;
     transform: translateX(4px);
-    box-shadow: var(--shadow-sm);
 }
 
 .nav-item.active {
-    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+    background: var(--primary-color);
     color: white !important;
     opacity: 1;
-    box-shadow: var(--shadow);
-    font-weight: 600;
+    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
 }
 
 .nav-section-title {
-    font-size: 10px; text-transform: uppercase;
+    font-size: 11px; text-transform: uppercase;
     letter-spacing: 1.2px; font-weight: 700;
-    color: var(--text-secondary);
-    padding: 12px 16px 4px; opacity: 0.6;
+    color: #64748b;
+    padding: 20px 16px 8px;
 }
 
 .sidebar-footer {
-    border-top: 1px solid var(--border-color);
-    margin-top: auto; padding: 6px 8px; flex-shrink: 0;
+    border-top: 1px solid rgba(255,255,255,0.05);
+    margin-top: auto; padding: 16px; flex-shrink: 0;
 }
 
 .logout-btn {
-    width: 100%; padding: 6px 8px;
-    background: transparent; border: 1px solid var(--glass-border);
-    color: #a0aec0; border-radius: 6px; cursor: pointer;
+    width: 100%; padding: 12px;
+    background: transparent; border: 1.5px solid rgba(255,255,255,0.1);
+    color: #cbd5e1; border-radius: 14px; cursor: pointer;
     display: flex; align-items: center; justify-content: center;
-    gap: 6px; font-family: 'Inter', sans-serif;
-    font-weight: 500; font-size: 0.80rem;
-    transition: all 0.3s; line-height: 1;
+    gap: 8px; font-weight: 700; font-size: 0.95rem;
+    transition: all 0.2s;
 }
 
 .logout-btn:hover {
     background: rgba(239, 68, 68, 0.15);
-    color: var(--danger-color);
-    border-color: var(--danger-color);
+    color: #f87171;
+    border-color: #ef4444;
 }
 
 /* ================================================================
@@ -190,61 +175,63 @@ body {
 .main-content {
     flex: 1; display: flex; flex-direction: column;
     overflow: hidden; position: relative;
+    background: var(--bg-color);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
 }
 
 .header {
-    background: var(--glass-bg);
-    backdrop-filter: var(--glass-blur);
-    -webkit-backdrop-filter: var(--glass-blur);
-    border-bottom: 1px solid var(--glass-border);
-    padding: 10px 24px;
+    background: var(--bg-surface);
+    border-bottom: 1px solid var(--border-color);
+    padding: 16px 28px;
     display: flex; justify-content: space-between; align-items: center;
-    z-index: 90; box-shadow: var(--shadow-sm); flex-shrink: 0;
+    z-index: 90; flex-shrink: 0;
 }
 
 .header-content { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 16px; }
 .header-left { display: flex; align-items: center; gap: 16px; }
-.header h1 { font-size: 1.5rem; font-weight: 700; color: var(--dark-color); letter-spacing: -0.5px; }
+.header h1 { font-size: 1.6rem; font-weight: 800; color: var(--dark-color); letter-spacing: -0.5px; }
 
 .header-actions { display: flex; align-items: center; gap: 12px; }
 
 .search-input {
-    padding: 10px 16px;
-    border: 1px solid var(--border-color);
+    padding: 12px 20px;
+    border: 2px solid var(--border-color);
     border-radius: var(--radius-full);
-    font-size: 0.95rem; font-family: inherit;
-    background: var(--bg-surface); color: var(--text-primary);
-    min-width: 220px; box-shadow: var(--shadow-sm);
+    font-size: 0.95rem; font-weight: 500; font-family: inherit;
+    background: var(--bg-color); color: var(--text-primary);
+    min-width: 260px;
     transition: all 0.2s ease; outline: none;
 }
 
 .search-input:focus {
     border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+    background: var(--bg-surface);
+    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
 }
 
 .client-filter {
-    padding: 10px 16px; border-radius: 10px;
-    border: 1px solid var(--border-color);
-    background: var(--bg-surface); color: var(--text-primary);
-    font-size: 0.95rem; font-weight: 500; outline: none;
-    min-width: 180px; cursor: pointer; height: 42px;
+    padding: 12px 20px; border-radius: var(--radius-full);
+    border: 2px solid var(--border-color);
+    background: var(--bg-color); color: var(--text-primary);
+    font-size: 0.95rem; font-weight: 600; outline: none;
+    min-width: 200px; cursor: pointer; height: 46px;
 }
 
-.content-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px; }
+.content-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px 28px; }
 
 /* Patient Header */
-.patient-header { padding: 8px 24px; background: var(--bg-color); border-bottom: 1px solid var(--border-color); }
-.patient-header-name { font-size: 1.2rem; font-weight: 700; color: var(--dark-color); }
-.patient-header-meta { font-size: 0.9rem; color: var(--text-secondary); }
+.patient-header { padding: 12px 28px; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); }
+.patient-header-name { font-size: 1.4rem; font-weight: 800; color: var(--dark-color); }
+.patient-header-meta { font-size: 0.95rem; color: var(--text-secondary); font-weight: 500; }
 
 /* ================================================================
    BUTTONS
    ================================================================ */
 .btn {
-    padding: 10px 20px; border: none;
+    padding: 12px 24px; border: none;
     border-radius: var(--radius-full);
-    font-size: 0.95rem; font-weight: 600; font-family: inherit;
+    font-size: 0.95rem; font-weight: 700; font-family: inherit;
     cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     white-space: nowrap; display: inline-flex;
     align-items: center; justify-content: center;
@@ -256,13 +243,14 @@ body {
 .btn:active { transform: translateY(0); }
 .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
 
-.btn-primary { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); color: white; }
-.btn-secondary { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-color); }
-.btn-secondary:hover { background: #f1f5f9; border-color: #cbd5e1; }
-.btn-success { background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%); color: white; }
-.btn-danger { background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%); color: white; }
-.btn-back { background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border-color); padding: 8px 16px; }
-.btn-small { padding: 6px 12px; font-size: 0.85rem; }
+.btn-primary { background: var(--primary-color); color: white; }
+.btn-primary:hover { background: var(--primary-dark); }
+.btn-secondary { background: var(--bg-surface); color: var(--text-primary); border: 2px solid var(--border-color); }
+.btn-secondary:hover { background: var(--bg-color); border-color: #cbd5e1; }
+.btn-success { background: var(--success-color); color: white; }
+.btn-danger { background: var(--danger-color); color: white; }
+.btn-back { background: var(--bg-surface); color: var(--text-secondary); border: 2px solid var(--border-color); padding: 10px 20px; }
+.btn-small { padding: 8px 16px; font-size: 0.85rem; }
 .btn-block { width: 100%; }
 
 /* ================================================================
@@ -270,17 +258,17 @@ body {
    ================================================================ */
 .images-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 24px;
 }
 
 .image-card, .patient-card {
     background: var(--bg-surface);
     border-radius: var(--radius-lg);
-    overflow: hidden; box-shadow: var(--shadow);
+    overflow: hidden; box-shadow: var(--shadow-sm);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer; position: relative;
-    border: 1px solid var(--glass-border);
+    border: 1.5px solid var(--border-color);
     display: flex; flex-direction: column;
 }
 
@@ -293,7 +281,7 @@ body {
 .image-card.disabled { opacity: 0.5; filter: grayscale(0.5); }
 
 .image-preview {
-    width: 100%; height: 220px;
+    width: 100%; height: 240px;
     background: #0b1220; position: relative;
     overflow: hidden;
 }
@@ -307,32 +295,31 @@ body {
 .preview-img-placeholder {
     position: absolute; inset: 0;
     width: 100%; height: 100%;
-    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
+    background: var(--bg-color);
     display: flex; align-items: center; justify-content: center;
-    color: #94a3b8; font-size: 40px;
+    color: var(--text-muted); font-size: 48px;
 }
 
-.image-info { padding: 20px; background: var(--bg-surface); position: relative; z-index: 2; }
-.image-patient-name { font-weight: 700; font-size: 1.1rem; color: var(--dark-color); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.image-meta { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; }
-.image-doctor-remark { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); font-size: 0.85rem; color: var(--text-muted); font-style: italic; }
-.image-guid { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.image-badge { position: absolute; top: 8px; left: 8px; background: rgba(239, 68, 68, 0.9); color: white; padding: 2px 8px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; }
-.image-actions { display: flex; gap: 8px; margin-top: 10px; }
-.patient-count-badge { position: absolute; bottom: 8px; right: 8px; background: rgba(15,23,42,0.75); color: white; padding: 2px 8px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; }
+.image-info { padding: 24px; background: var(--bg-surface); position: relative; z-index: 2; }
+.image-patient-name { font-weight: 800; font-size: 1.2rem; color: var(--dark-color); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.image-meta { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--text-secondary); font-weight: 600; }
+.image-doctor-remark { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color); font-size: 0.9rem; color: var(--text-muted); font-style: italic; }
+.image-guid { font-size: 0.8rem; color: var(--text-muted); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.image-badge { position: absolute; top: 12px; left: 12px; background: rgba(239, 68, 68, 0.9); color: white; padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 700; backdrop-filter: blur(4px); }
+.image-actions { display: flex; gap: 8px; margin-top: 12px; }
+.patient-count-badge { position: absolute; bottom: 12px; right: 12px; background: rgba(15,23,42,0.8); color: white; padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 700; backdrop-filter: blur(4px); }
 
 .delete-patient-btn {
-    position: absolute; top: 12px; right: 12px;
-    background: rgba(239, 68, 68, 0.9);
-    backdrop-filter: blur(4px);
-    color: white; border: none; border-radius: 50%;
-    width: 36px; height: 36px;
+    position: absolute; top: 16px; right: 16px;
+    background: rgba(255, 255, 255, 0.9);
+    color: var(--danger-color); border: none; border-radius: 50%;
+    width: 40px; height: 40px;
     display: flex; align-items: center; justify-content: center;
     cursor: pointer; z-index: 10; transition: all 0.2s ease;
-    box-shadow: var(--shadow-md); font-size: 16px;
+    box-shadow: var(--shadow-sm); font-size: 18px;
 }
 
-.delete-patient-btn:hover { transform: scale(1.15) rotate(90deg); background: var(--danger-color); }
+.delete-patient-btn:hover { transform: scale(1.1); background: var(--danger-color); color: white; }
 
 /* ================================================================
    MODALS
@@ -340,26 +327,26 @@ body {
 .modal-overlay {
     position: fixed; z-index: 1000;
     left: 0; top: 0; width: 100%; height: 100%;
-    background: rgba(15, 23, 42, 0.6);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
+    background: rgba(15, 23, 42, 0.7);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
     display: flex; align-items: center; justify-content: center;
     animation: fadeIn 0.2s ease;
 }
 
 @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
-@keyframes slideUp { from { transform: translateY(20px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
+@keyframes slideUp { from { transform: translateY(30px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
 
 .modal-content {
     background: var(--bg-surface); border-radius: var(--radius-lg);
-    width: 90%; height: 98vh;
+    width: 92%; max-width: 600px; max-height: 90vh;
     box-shadow: var(--shadow-lg);
     display: flex; flex-direction: column;
     animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
     overflow: hidden;
 }
 
-.modal-large { width: 90%; height: 98vh; }
+.modal-large { width: 96%; max-width: 1200px; height: 94vh; }
 
 .modal-header {
     padding: 24px 32px;
@@ -368,10 +355,10 @@ body {
     background: var(--bg-surface); flex-shrink: 0;
 }
 
-.modal-header h2 { font-size: 1.4rem; font-weight: 700; color: var(--dark-color); }
+.modal-header h2 { font-size: 1.5rem; font-weight: 800; color: var(--dark-color); }
 
 .modal-close {
-    width: 36px; height: 36px; border-radius: 50%;
+    width: 40px; height: 40px; border-radius: 50%;
     background: var(--bg-color);
     display: flex; align-items: center; justify-content: center;
     font-size: 1.5rem; color: var(--text-secondary);
@@ -381,25 +368,25 @@ body {
 
 .modal-close:hover { background: #fee2e2; color: var(--danger-color); transform: rotate(90deg); }
 
-.modal-body { padding: 24px; overflow-y: auto; flex: 1; }
+.modal-body { padding: 32px; overflow-y: auto; flex: 1; }
 .modal-title-group { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
 .modal-actions-group { display: flex; gap: 8px; }
-.modal-actions-group .btn { width: 44px; height: 44px; padding: 0; font-size: 1.2rem; }
+.modal-actions-group .btn { width: 48px; height: 48px; padding: 0; font-size: 1.3rem; }
 
 /* ================================================================
    FORMS
    ================================================================ */
-.form-group { margin-bottom: 16px; }
-.form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
+.form-group { margin-bottom: 20px; }
+.form-group label { display: block; margin-bottom: 10px; font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
 
 .form-control,
 .form-group input,
 .form-group select,
 .form-group textarea {
-    width: 100%; padding: 10px 12px;
+    width: 100%; padding: 14px 16px;
     border: 2px solid var(--border-color);
     border-radius: var(--radius);
-    font-size: 0.95rem; font-family: inherit;
+    font-size: 1rem; font-weight: 500; font-family: inherit;
     transition: all 0.2s ease;
     background: var(--bg-color); color: var(--text-primary); outline: none;
 }
@@ -413,8 +400,8 @@ body {
     box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
 }
 
-.form-actions-inline { display: flex; gap: 12px; margin-top: 16px; }
-.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 25px; }
+.form-actions-inline { display: flex; gap: 12px; margin-top: 20px; }
+.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 32px; }
 
 /* ================================================================
    TRANSFORM MODAL STYLES
@@ -422,244 +409,229 @@ body {
 .new-transform-layout {
     display: flex; gap: 24px;
     align-items: stretch; justify-content: center;
-    padding: 16px 0; min-height: 400px;
+    padding: 16px 0; min-height: 400px; height: 100%;
 }
 
 .transform-panel {
-    flex: 1; background: var(--bg-surface);
-    border: 2px solid var(--border-color);
+    flex: 1; background: var(--bg-color);
     border-radius: var(--radius-lg);
-    padding: 16px;
+    padding: 24px;
     display: flex; flex-direction: column; align-items: center;
-    box-shadow: var(--shadow-sm); min-width: 0; max-width: 45%;
-    overflow: hidden; /* confinamento obrigatório para rotação CSS */
+    min-width: 0; max-width: 50%;
+    overflow: hidden;
 }
 
 .transform-panel.panel-preview {
-    border-color: var(--primary-color);
+    border: 2px solid var(--primary-color);
+    background: var(--bg-surface);
     box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
 }
 
-.panel-title { font-size: 1rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 16px; }
-/* Imagem limitada a 65%: 65% × √2 ≈ 92% → cabe em qualquer rotação sem ser visualmente cortada */
-.transform-panel .img-container { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; max-height: 340px; }
+.panel-title { font-size: 1.1rem; font-weight: 800; color: var(--text-secondary); margin-bottom: 20px; }
+.transform-panel .img-container { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; max-height: 400px; }
 .transform-panel img { max-width: 65%; max-height: 65%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: block; }
 
 .transform-sidebar {
-    width: 80px; display: flex; flex-direction: column;
+    width: 88px; display: flex; flex-direction: column;
     align-items: center; background: var(--bg-surface);
     border: 1px solid var(--border-color);
     border-radius: var(--radius-full);
-    padding: 16px 8px; box-shadow: var(--shadow-sm); flex-shrink: 0;
+    padding: 20px 12px; box-shadow: var(--shadow-sm); flex-shrink: 0; gap: 12px;
 }
 
 .sidebar-btn {
     display: flex; flex-direction: column;
     align-items: center; justify-content: center;
-    width: 56px; height: 56px; border-radius: 50%;
-    border: 1px solid var(--border-color);
+    width: 64px; height: 64px; border-radius: 50%;
+    border: 2px solid var(--border-color);
     background: var(--bg-color); color: var(--text-primary);
     cursor: pointer; transition: all 0.2s ease;
     padding: 0; margin: 0 auto;
 }
 
-.sidebar-btn:hover { background: var(--primary-light); border-color: var(--primary-color); color: white; transform: translateY(-2px); }
-.sidebar-btn .icon { font-size: 1.2rem; margin-bottom: 2px; }
-.sidebar-btn .label { font-size: 0.65rem; font-weight: 600; line-height: 1; }
+.sidebar-btn:hover { background: var(--primary-color); border-color: var(--primary-color); color: white; transform: translateY(-4px); box-shadow: var(--shadow); }
+.sidebar-btn .icon { font-size: 1.4rem; margin-bottom: 4px; }
+.sidebar-btn .label { font-size: 0.7rem; font-weight: 700; line-height: 1; }
 
 .transform-view-wrapper { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
-.transform-action-area { margin-top: 24px; background: #f8f9fa; padding: 24px; border-radius: var(--radius-sm); flex-shrink: 0; border: 1px solid var(--border-color); }
-.extra-info-panel { font-size: 0.95rem; color: var(--text-secondary); background: #f8f9fa; padding: 16px 24px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); margin-bottom: 20px; }
-.fine-tune-display { min-width: 40px; padding: 6px; font-size: 1rem; text-align: center; background: white; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-family: monospace; font-weight: 700; color: var(--primary-color); }
+.transform-action-area { margin-top: 24px; background: var(--bg-color); padding: 24px; border-radius: var(--radius-lg); flex-shrink: 0; }
+.extra-info-panel { font-size: 1rem; font-weight: 500; color: var(--text-secondary); background: var(--bg-color); padding: 20px 24px; border-radius: var(--radius-lg); margin-bottom: 24px; }
+.fine-tune-display { min-width: 48px; padding: 8px; font-size: 1.1rem; text-align: center; background: var(--bg-surface); border: 2px solid var(--border-color); border-radius: var(--radius-sm); font-family: monospace; font-weight: 800; color: var(--primary-color); }
 
 /* GTO */
-.gto-create-section, .gto-link-section { background: #f8f9fa; padding: 20px; border-radius: var(--radius-sm); margin-bottom: 24px; border: 1px solid var(--border-color); }
+.gto-create-section, .gto-link-section { background: var(--bg-color); padding: 24px; border-radius: var(--radius-lg); margin-bottom: 24px; }
 .gto-link-section { display: flex; align-items: center; justify-content: space-between; }
-.section-title { margin: 0; font-size: 1.1rem; color: var(--dark-color); }
-.gto-list-container { border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; }
+.section-title { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--dark-color); }
+.gto-list-container { border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-surface); }
 
 /* ================================================================
    TOAST
    ================================================================ */
-.toast-container { position: fixed; bottom: 32px; right: 32px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
+.toast-container { position: fixed; bottom: 40px; right: 40px; z-index: 2000; display: flex; flex-direction: column; gap: 12px; }
 
 .toast {
-    padding: 16px 24px; border-radius: var(--radius-lg);
-    color: white; font-weight: 600; font-size: 1rem;
+    padding: 16px 24px; border-radius: var(--radius-full);
+    color: white; font-weight: 700; font-size: 1.05rem;
     box-shadow: var(--shadow-lg);
-    display: flex; align-items: center; gap: 12px;
+    display: flex; align-items: center; gap: 16px;
     animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
     max-width: 400px;
 }
 
-.toast.success { background: linear-gradient(135deg, var(--success-color), #059669); }
-.toast.error { background: linear-gradient(135deg, var(--danger-color), #dc2626); }
-.toast.info { background: linear-gradient(135deg, var(--info-color), #2563eb); }
-.toast.warning { background: linear-gradient(135deg, var(--warning-color), #d97706); }
+.toast.success { background: var(--success-color); }
+.toast.error { background: var(--danger-color); }
+.toast.info { background: var(--info-color); }
+.toast.warning { background: var(--warning-color); }
 
 /* ================================================================
    LOADING & STATES
    ================================================================ */
-.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--text-secondary); font-weight: 500; }
-.spinner { width: 48px; height: 48px; border: 4px solid var(--border-color); border-top: 4px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 16px; }
+.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; color: var(--text-secondary); font-weight: 600; font-size: 1.1rem; }
+.spinner { width: 56px; height: 56px; border: 4px solid var(--border-color); border-top: 4px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px; }
 @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
 
-.empty-state { text-align: center; padding: 80px 20px; color: var(--text-secondary); }
-.empty-icon { font-size: 4rem; margin-bottom: 24px; opacity: 0.5; }
+.empty-state { text-align: center; padding: 100px 20px; color: var(--text-secondary); }
+.empty-icon { font-size: 4.5rem; margin-bottom: 24px; opacity: 0.4; }
 
 /* ================================================================
    SYNC TABS
    ================================================================ */
-.sync-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 2px solid var(--border-color); padding-bottom: 12px; }
-.sync-tab-btn { padding: 10px 16px; background: transparent; border: none; border-radius: 8px; color: var(--text-secondary); font-weight: 600; cursor: pointer; transition: all 0.2s ease; font-size: 0.95rem; }
-.sync-tab-btn:hover { background: var(--bg-surface); color: var(--primary-color); }
-.sync-tab-btn.active { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); color: white; box-shadow: var(--shadow-sm); }
+.sync-tabs { display: flex; gap: 12px; margin-bottom: 24px; border-bottom: 2px solid var(--border-color); padding-bottom: 16px; }
+.sync-tab-btn { padding: 12px 20px; background: transparent; border: none; border-radius: 12px; color: var(--text-secondary); font-weight: 700; cursor: pointer; transition: all 0.2s ease; font-size: 1rem; }
+.sync-tab-btn:hover { background: var(--bg-color); color: var(--primary-color); }
+.sync-tab-btn.active { background: var(--primary-color); color: white; box-shadow: var(--shadow-sm); }
 
 /* Wasabi Banner */
-.wasabi-alert-banner { background-color: #fee2e2; border-bottom: 1px solid #f87171; color: #991b1b; padding: 12px 24px; display: flex; align-items: center; gap: 16px; z-index: 10000; width: 100%; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
-.wasabi-alert-icon { font-size: 24px; }
-.wasabi-alert-content { flex-grow: 1; font-size: 14px; line-height: 1.5; }
-.wasabi-alert-btn { background-color: #ef4444; color: white; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 600; cursor: pointer; white-space: nowrap; }
+.wasabi-alert-banner { background-color: #fef2f2; border: 2px solid #fecaca; border-radius: var(--radius-lg); margin-bottom: 24px; color: #991b1b; padding: 16px 24px; display: flex; align-items: center; gap: 16px; }
+.wasabi-alert-icon { font-size: 28px; }
+.wasabi-alert-content { flex-grow: 1; font-size: 15px; line-height: 1.5; font-weight: 500; }
+.wasabi-alert-btn { background-color: #ef4444; color: white; border: none; padding: 10px 20px; border-radius: var(--radius-full); font-weight: 700; cursor: pointer; white-space: nowrap; }
 
 /* Drag & Drop */
 .drag-drop-zone {
-    border: 2px dashed var(--border-color); border-radius: var(--radius-lg);
-    padding: 40px 20px; text-align: center; cursor: pointer;
+    border: 3px dashed var(--border-color); border-radius: var(--radius-lg);
+    padding: 60px 20px; text-align: center; cursor: pointer;
     transition: all 0.2s ease; background: var(--bg-color);
 }
-.drag-drop-zone:hover, .drag-drop-zone.dragover { border-color: var(--primary-color); background: rgba(79,70,229,0.05); }
-.drag-drop-icon { font-size: 3rem; margin-bottom: 12px; }
-.drag-drop-text { font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
-.drag-drop-subtext { font-size: 0.85rem; color: var(--text-muted); }
+.drag-drop-zone:hover, .drag-drop-zone.dragover { border-color: var(--primary-color); background: rgba(79,70,229,0.05); transform: scale(1.02); }
+.drag-drop-icon { font-size: 4rem; margin-bottom: 16px; color: var(--primary-light); }
+.drag-drop-text { font-weight: 800; font-size: 1.2rem; color: var(--text-primary); margin-bottom: 8px; }
+.drag-drop-subtext { font-size: 0.95rem; color: var(--text-muted); font-weight: 500; }
 
-.upload-previews { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
+.upload-previews { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
 .upload-preview-item { position: relative; }
-.upload-preview-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid var(--border-color); }
-.upload-preview-remove { position: absolute; top: -6px; right: -6px; background: var(--danger-color); color: white; border: none; border-radius: 50%; width: 20px; height: 20px; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; }
+.upload-preview-item img { width: 100px; height: 100px; object-fit: cover; border-radius: 12px; border: 2px solid var(--border-color); box-shadow: var(--shadow-sm); }
+.upload-preview-remove { position: absolute; top: -8px; right: -8px; background: var(--danger-color); color: white; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: transform 0.2s; }
+.upload-preview-remove:hover { transform: scale(1.15); }
 
-.upload-progress-container { margin-top: 16px; }
-.progress-bar-label { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 0.9rem; font-weight: 600; }
-.progress-bar-track { background: var(--border-color); border-radius: var(--radius-full); height: 8px; overflow: hidden; }
-.progress-bar-fill { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); height: 100%; border-radius: var(--radius-full); transition: width 0.3s ease; }
+.upload-progress-container { margin-top: 24px; }
+.progress-bar-label { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 1rem; font-weight: 700; }
+.progress-bar-track { background: var(--border-color); border-radius: var(--radius-full); height: 12px; overflow: hidden; }
+.progress-bar-fill { background: var(--primary-color); height: 100%; border-radius: var(--radius-full); transition: width 0.3s ease; }
 
 /* Sync device list */
-.sync-device-list { display: flex; flex-direction: column; gap: 8px; }
-.sync-device-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
-.sync-device-name { font-weight: 600; color: var(--text-primary); }
-.sync-device-status { font-size: 0.85rem; color: var(--success-color); }
+.sync-device-list { display: flex; flex-direction: column; gap: 12px; }
+.sync-device-item { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
+.sync-device-name { font-weight: 700; font-size: 1.05rem; color: var(--text-primary); }
+.sync-device-status { font-size: 0.95rem; font-weight: 600; color: var(--success-color); background: rgba(16, 185, 129, 0.1); padding: 4px 12px; border-radius: var(--radius-full); }
 
 /* Login page */
 .login-page {
     min-height: 100vh; display: flex;
     align-items: center; justify-content: center;
-    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
-}
-
-.login-card {
-    background: rgba(255,255,255,0.05);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(255,255,255,0.1);
-    border-radius: var(--radius-lg);
-    padding: 40px; width: 100%; max-width: 420px;
-    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
-}
-
-.login-logo { text-align: center; margin-bottom: 32px; }
-.login-logo .logo-icon { width: 64px; height: 64px; font-size: 32px; margin: 0 auto 12px; }
-.login-logo h1 { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: white; }
-.login-logo p { color: rgba(255,255,255,0.5); font-size: 0.9rem; margin-top: 4px; }
-
-.login-form input {
-    background: rgba(255,255,255,0.05);
-    border: 1px solid rgba(255,255,255,0.15);
-    color: white; border-radius: 10px;
-    padding: 12px 16px; font-size: 1rem; width: 100%;
-    outline: none; transition: all 0.2s; margin-bottom: 14px; font-family: inherit;
-}
-
-.login-form input::placeholder { color: rgba(255,255,255,0.3); }
-.login-form input:focus { border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(99,102,241,0.3); }
-.login-form label { display: block; color: rgba(255,255,255,0.7); font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
-
-.login-btn { width: 100%; padding: 14px; font-size: 1rem; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; transition: all 0.2s; margin-top: 8px; }
-.login-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(79,70,229,0.4); }
-.login-error { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; padding: 12px 16px; border-radius: 8px; font-size: 0.9rem; margin-bottom: 16px; }
-
-/* Install page */
-.install-page {
-    min-height: 100vh; display: flex;
-    align-items: center; justify-content: center;
-    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
+    background: #0f172a;
     padding: 20px;
 }
 
-.install-card { background: white; border-radius: var(--radius-lg); padding: 40px; width: 100%; max-width: 600px; box-shadow: var(--shadow-lg); }
-.install-card h1 { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--dark-color); margin-bottom: 8px; }
-.install-card p.subtitle { color: var(--text-secondary); margin-bottom: 32px; }
-.install-section { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--border-color); }
-.install-section:last-of-type { border-bottom: none; }
-.install-section h2 { font-size: 1.1rem; font-weight: 700; color: var(--dark-color); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
+.login-card {
+    background: #1e293b;
+    border: 1px solid rgba(255,255,255,0.05);
+    border-radius: var(--radius-lg);
+    padding: 48px; width: 100%; max-width: 460px;
+    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
+}
+
+.login-logo { text-align: center; margin-bottom: 40px; }
+.login-logo .logo-icon { width: 72px; height: 72px; font-size: 36px; margin: 0 auto 16px; border-radius: 20px; }
+.login-logo h1 { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: white; }
+.login-logo p { color: #94a3b8; font-size: 1rem; margin-top: 8px; font-weight: 500; }
+
+.login-form input {
+    background: #0f172a;
+    border: 2px solid rgba(255,255,255,0.1);
+    color: white; border-radius: 14px;
+    padding: 16px 20px; font-size: 1.05rem; width: 100%;
+    outline: none; transition: all 0.2s; margin-bottom: 20px; font-family: inherit;
+}
+
+.login-form input::placeholder { color: #475569; }
+.login-form input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(79,70,229,0.2); }
+.login-form label { display: block; color: #cbd5e1; font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; }
+
+.login-btn { width: 100%; padding: 16px; font-size: 1.1rem; font-weight: 800; border: none; border-radius: 14px; cursor: pointer; background: var(--primary-color); color: white; transition: all 0.2s; margin-top: 12px; }
+.login-btn:hover { background: var(--primary-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(79,70,229,0.4); }
+.login-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: #fca5a5; padding: 16px; border-radius: 12px; font-size: 0.95rem; font-weight: 500; margin-bottom: 24px; }
 
 /* Admin clinics */
-.clinics-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
-.clinics-table th { background: rgba(0,0,0,0.04); padding: 10px 14px; text-align: left; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
-.clinics-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-color); }
-.clinics-table tr:last-child td { border-bottom: none; }
-.clinics-table tr:hover td { background: rgba(79,70,229,0.03); }
+.clinics-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.95rem; }
+.clinics-table th { background: var(--bg-color); padding: 14px 20px; text-align: left; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); border-bottom: 2px solid var(--border-color); }
+.clinics-table td { padding: 16px 20px; border-bottom: 1px solid var(--border-color); background: var(--bg-surface); }
+.clinics-table tr:hover td { background: var(--bg-color); }
 
 /* ================================================================
-   DROPDOWN MENU (chevron-down flutuante) — usado em todas as telas
+   DROPDOWN MENU (chevron-down flutuante)
    ================================================================ */
 .dropdown-menu-wrap { position: relative; display: inline-flex; }
 .dropdown-trigger { display: inline-flex; align-items: center; gap: 8px; }
 .dropdown-panel {
     position: absolute; top: calc(100% + 8px); z-index: 500;
-    min-width: 220px; max-width: 90vw;
+    min-width: 240px; max-width: 90vw;
     background: var(--bg-surface);
     border: 1px solid var(--border-color);
-    border-radius: var(--radius);
+    border-radius: var(--radius-lg);
     box-shadow: var(--shadow-lg);
-    padding: 6px;
-    display: flex; flex-direction: column; gap: 2px;
-    animation: dropdownIn 0.16s ease;
+    padding: 8px;
+    display: flex; flex-direction: column; gap: 4px;
+    animation: dropdownIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 .dropdown-panel--right { right: 0; }
 .dropdown-panel--left  { left: 0; }
-@keyframes dropdownIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes dropdownIn { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
 .dropdown-item {
-    display: flex; align-items: center; gap: 10px;
+    display: flex; align-items: center; gap: 12px;
     width: 100%; text-align: left;
-    padding: 11px 12px; border: none; background: none;
-    border-radius: 8px; cursor: pointer;
-    font-family: inherit; font-size: 0.9rem; color: var(--text-primary);
+    padding: 12px 16px; border: none; background: none;
+    border-radius: 12px; cursor: pointer;
+    font-family: inherit; font-size: 0.95rem; font-weight: 600; color: var(--text-primary);
     transition: background 0.15s;
 }
-.dropdown-item:hover { background: var(--bg-color); }
-.dropdown-item--active { background: rgba(79,70,229,0.1); color: var(--primary-color); font-weight: 600; }
+.dropdown-item:hover { background: var(--bg-color); color: var(--primary-color); }
+.dropdown-item--active { background: rgba(79,70,229,0.1); color: var(--primary-color); font-weight: 800; }
 .dropdown-item--danger { color: var(--danger-color); }
 .dropdown-item--danger:hover { background: rgba(239,68,68,0.1); }
-.dropdown-item-icon { width: 18px; text-align: center; flex-shrink: 0; }
-.dropdown-custom { padding: 6px 8px; }
+.dropdown-item-icon { width: 20px; text-align: center; flex-shrink: 0; font-size: 1.1rem; }
+.dropdown-custom { padding: 8px 12px; }
 .dropdown-custom select, .dropdown-custom input { width: 100%; }
 
 /* ================================================================
-   COLLAPSIBLE SECTION — Seção colapsável com chevron-down
+   COLLAPSIBLE SECTION
    ================================================================ */
 .collapsible-section {
     border: 1px solid var(--border-color);
-    border-radius: var(--radius-sm);
-    background: var(--bg-color);
+    border-radius: var(--radius-lg);
+    background: var(--bg-surface);
     overflow: hidden;
+    margin-bottom: 12px;
 }
 
 .collapsible-header {
     display: flex; align-items: center; justify-content: space-between;
-    width: 100%; padding: 12px 14px;
-    background: none; border: none;
+    width: 100%; padding: 16px 20px;
+    background: var(--bg-color); border: none;
     cursor: pointer; font-family: inherit;
-    font-size: 0.85rem; font-weight: 700;
-    color: var(--text-secondary); text-align: left;
-    text-transform: uppercase; letter-spacing: 0.04em;
+    font-size: 0.95rem; font-weight: 800;
+    color: var(--dark-color); text-align: left;
+    text-transform: uppercase; letter-spacing: 0.05em;
     transition: background 0.15s;
 }
 
@@ -667,339 +639,138 @@ body {
 .collapsible-header:active { background: rgba(0,0,0,0.06); }
 
 .collapsible-chevron {
-    font-size: 0.65rem; color: var(--text-muted);
+    font-size: 0.8rem; color: var(--text-secondary);
     transition: transform 0.2s ease;
     flex-shrink: 0;
 }
 
 .collapsible-body {
-    padding: 0 14px 14px;
-    animation: collapsibleIn 0.15s ease;
-}
-
-.collapsible-compact {
-    border: none; background: none;
-    border-radius: 0;
-}
-
-.collapsible-compact .collapsible-header {
-    padding: 8px 0;
-    font-size: 0.8rem;
-}
-
-.collapsible-compact .collapsible-body {
-    padding: 0 0 8px;
+    padding: 0 20px 20px;
+    animation: collapsibleIn 0.2s ease;
 }
 
 @keyframes collapsibleIn {
-    from { opacity: 0; transform: translateY(-4px); }
+    from { opacity: 0; transform: translateY(-10px); }
     to { opacity: 1; transform: translateY(0); }
 }
 
-/* Helpers de visibilidade por viewport (desktop = padrão) */
+/* Helpers de visibilidade */
 .show-mobile { display: none !important; }
 .hide-mobile { display: contents; }
 
-/* Elementos de navegação mobile — ocultos no desktop */
 .mobile-topbar { display: none; }
 .sidebar-backdrop { display: none; }
 .sidebar-close { display: none; }
 
 /* ================================================================
    RESPONSIVO — Tablet/Mobile (≤ 1023px)
-   O visual desktop (≥ 1024px) permanece intacto.
    ================================================================ */
 @media (max-width: 1023px) {
-    /* ---- Altura real em mobile (evita pulo da barra de URL) ---- */
-    .app-container { height: 100dvh; }
+    /* ---- Estilo fluído sem padding extremo em mobile ---- */
+    .app-container { height: 100dvh; padding: 0; background: var(--bg-color); flex-direction: column; }
+    
+    .main-content {
+        border-radius: 0; box-shadow: none; border: none;
+    }
 
     /* ---- Top bar fixo ---- */
     .mobile-topbar {
         display: flex; align-items: center; gap: 12px;
-        position: fixed; top: 0; left: 0; right: 0; height: 56px;
-        padding: 0 14px; z-index: 1000;
-        background: var(--glass-bg);
-        backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
-        border-bottom: 1px solid var(--glass-border);
+        position: fixed; top: 0; left: 0; right: 0; height: 64px;
+        padding: 0 16px; z-index: 1000;
+        background: var(--bg-surface);
+        border-bottom: 1px solid var(--border-color);
         box-shadow: var(--shadow-sm);
     }
     .mobile-hamburger {
-        width: 42px; height: 42px; flex-shrink: 0;
-        border: none; background: transparent; cursor: pointer;
-        font-size: 1.3rem; color: var(--dark-color);
-        border-radius: 10px; display: flex; align-items: center; justify-content: center;
+        width: 48px; height: 48px; flex-shrink: 0;
+        border: none; background: var(--bg-color); cursor: pointer;
+        font-size: 1.4rem; color: var(--dark-color);
+        border-radius: 14px; display: flex; align-items: center; justify-content: center;
         transition: background 0.2s;
     }
     .mobile-hamburger:active { background: rgba(0,0,0,0.06); }
     .mobile-topbar-brand {
-        display: flex; align-items: center; gap: 9px;
-        font-family: var(--font-heading); font-weight: 700;
-        font-size: 1.05rem; color: var(--dark-color);
+        display: flex; align-items: center; gap: 12px;
+        font-family: var(--font-heading); font-weight: 800;
+        font-size: 1.2rem; color: var(--dark-color);
     }
     .mobile-topbar-logo {
-        width: 30px; height: 30px; flex-shrink: 0;
+        width: 36px; height: 36px; flex-shrink: 0;
         background: linear-gradient(135deg, #4cc9f0, var(--primary-color));
-        border-radius: 8px; color: #fff;
-        display: flex; align-items: center; justify-content: center; font-size: 15px;
+        border-radius: 10px; color: #fff;
+        display: flex; align-items: center; justify-content: center; font-size: 18px;
     }
     .mobile-topbar-spacer { margin-left: auto; }
 
     /* ---- Sidebar vira drawer deslizante ---- */
-    .app-container { flex-direction: row; }
     .sidebar {
         position: fixed; top: 0; left: 0; bottom: 0;
-        width: 280px; max-width: 84vw; height: 100dvh;
+        width: 300px; max-width: 85vw; height: 100dvh;
         transform: translateX(-105%);
-        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         z-index: 1200; box-shadow: var(--shadow-lg);
-        border-right: 1px solid var(--glass-border);
+        border-right: none;
+        border-radius: 0 24px 24px 0;
     }
     .sidebar--mobile-open { transform: translateX(0); }
 
     .sidebar-backdrop {
         display: block; position: fixed; inset: 0;
-        background: rgba(15,23,42,0.5);
-        backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
+        background: rgba(15,23,42,0.6);
+        backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
         z-index: 1150; opacity: 0; pointer-events: none;
-        transition: opacity 0.28s ease;
+        transition: opacity 0.3s ease;
     }
     .sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }
 
-    .sidebar-header { position: relative; padding: 18px 20px; }
+    .sidebar-header { position: relative; padding: 24px 24px 16px; }
     .sidebar-close {
         display: flex; align-items: center; justify-content: center;
-        position: absolute; top: 14px; right: 12px;
-        width: 36px; height: 36px; border: none; background: transparent;
-        font-size: 1.2rem; color: var(--text-secondary); cursor: pointer; border-radius: 8px;
+        position: absolute; top: 20px; right: 16px;
+        width: 40px; height: 40px; border: none; background: rgba(255,255,255,0.1);
+        font-size: 1.4rem; color: #cbd5e1; cursor: pointer; border-radius: 12px;
     }
-    .sidebar-close:active { background: rgba(0,0,0,0.06); }
+    .sidebar-close:active { background: rgba(255,255,255,0.2); }
 
-    .nav-item { padding: 13px 14px; font-size: 1rem; } /* alvo de toque maior */
-    .nav-item:hover { transform: none; } /* sem deslocamento em touch */
+    .nav-item { padding: 14px 16px; font-size: 1.05rem; }
 
     /* ---- Conteúdo principal abaixo do top bar ---- */
-    .main-content { padding-top: 56px; }
-    .content-scroll { padding: 16px; }
+    .main-content { padding-top: 64px; }
+    .content-scroll { padding: 20px 16px; }
 
     /* ---- Header da página: empilha, busca full-width ---- */
-    .header { padding: 12px 16px; }
-    .header-content { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
-    .header-left { flex: 1; min-width: 50%; }
-    .header h1 { font-size: 1.15rem; }
-    .header-actions { width: auto; flex: none; flex-wrap: nowrap; gap: 8px; align-items: center; }
-    .search-input { min-width: 0; flex: 1 1 100%; width: 100%; font-size: 16px; } /* 16px evita zoom iOS */
-    .client-filter { flex: 1 1 100%; min-width: 0; width: 100%; }
+    .header { padding: 16px; border-bottom: none; background: transparent; }
+    .header-content { flex-direction: column; align-items: flex-start; gap: 16px; }
+    .header-left { width: 100%; }
+    .header h1 { font-size: 1.6rem; }
+    .header-actions { width: 100%; flex-wrap: wrap; gap: 12px; }
+    .search-input { min-width: 0; width: 100%; font-size: 16px; padding: 14px 20px; } /* 16px evita zoom iOS */
+    .client-filter { width: 100%; min-width: 0; }
 
-    /* Alterna ações entre desktop (linha) e mobile (dropdown) */
     .hide-mobile { display: none !important; }
     .show-mobile { display: inline-flex !important; }
 
-    .mobile-icon-actions { display: flex !important; gap: 6px; align-items: center; }
+    .mobile-icon-actions { display: flex !important; gap: 8px; align-items: center; width: 100%; justify-content: space-between; }
     .btn-icon {
-      width: 40px !important;
-      height: 40px !important;
-      border-radius: 50% !important;
-      display: flex !important;
-      align-items: center;
-      justify-content: center;
+      width: 48px !important;
+      height: 48px !important;
       padding: 0 !important;
-      font-size: 1.2rem;
-      background: var(--bg-surface);
-      border: 1px solid var(--border-color);
-      color: var(--text-primary);
+      display: flex !important; align-items: center; justify-content: center;
+      font-size: 1.3rem; border-radius: 14px;
     }
-    .btn-icon:active { background: var(--hover-color); transform: scale(0.95); }
+    .btn-icon-text { flex: 1; justify-content: center; padding: 14px !important; }
 
-    /* ---- Grid de cards: thumbnails menores ---- */
-    .images-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
-    .image-preview { height: 150px; }
-    .image-info { padding: 12px; }
-    .image-patient-name { font-size: 0.95rem; }
+    /* Modals & Layouts no mobile */
+    .new-transform-layout { flex-direction: column; align-items: center; padding: 0; }
+    .transform-panel { max-width: 100%; width: 100%; padding: 16px; border-radius: 16px; border: 1px solid var(--border-color); }
+    .transform-sidebar { width: 100%; flex-direction: row; border-radius: 16px; padding: 12px; overflow-x: auto; gap: 12px; }
+    .sidebar-btn { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 12px; }
+    .modal-content { width: 95%; max-height: 95dvh; padding: 0; border-radius: 20px; }
+    .modal-header { padding: 20px; }
+    .modal-body { padding: 20px; }
 
-    /* ================================================================
-       TABELAS → CARDS EMPILHADOS
-       Aplicado a tabelas com a classe .responsive-table
-       ================================================================ */
-    .responsive-table thead { display: none; }
-    .responsive-table,
-    .responsive-table tbody,
-    .responsive-table tr,
-    .responsive-table td { display: block; width: 100%; }
-
-    .responsive-table tr {
-        background: var(--bg-surface) !important;
-        border: 1px solid var(--border-color) !important;
-        border-radius: var(--radius) !important;
-        box-shadow: var(--shadow-sm);
-        margin-bottom: 12px; padding: 6px 4px; overflow: hidden;
-    }
-    .responsive-table tr:hover { background: var(--bg-surface) !important; }
-
-    .responsive-table td {
-        display: flex; align-items: center; justify-content: space-between;
-        gap: 14px; text-align: right;
-        padding: 9px 14px !important;
-        border: none !important;
-        max-width: none !important; white-space: normal !important;
-        overflow: visible !important;
-    }
-    .responsive-table td::before {
-        content: attr(data-label);
-        font-weight: 700; font-size: 0.7rem;
-        text-transform: uppercase; letter-spacing: 0.04em;
-        color: var(--text-secondary);
-        text-align: left; flex-shrink: 0; white-space: nowrap;
-    }
-    /* Células sem rótulo (thumb/avatar) ocupam o topo, centralizadas */
-    .responsive-table td[data-label=""]::before { display: none; }
-    .responsive-table td[data-label=""] { justify-content: center; padding-top: 12px !important; }
-    /* Célula de ações: botões espalhados, ocupando largura */
-    .responsive-table td[data-label="Ações"] { justify-content: flex-end; flex-wrap: wrap; }
-
-    /* ---- Stat cards (filtros GTO) encolhem ---- */
-    .stat-card-row { gap: 10px !important; }
-    .stat-card-row > * { min-width: 0 !important; flex: 1 1 30% !important; padding: 12px !important; }
-
-    /* ---- Paginação: centraliza e quebra linha ---- */
-    .pagination-bar { flex-direction: column !important; gap: 10px !important; align-items: center !important; }
-    .pagination-controls { flex-wrap: wrap; justify-content: center; }
-
-    /* ---- Modais: tela cheia ---- */
-    .modal-overlay { align-items: stretch; }
-    .modal-content, .modal-large {
-        width: 100% !important; height: 100dvh !important;
-        max-width: 100% !important; border-radius: 0 !important;
-    }
-
-    /* ---- Modal header compacto ---- */
-    .modal-header { padding: 12px 16px; }
-    .modal-header h2 {
-        font-size: 0.95rem;
-        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-        max-width: 55vw;
-    }
-    .modal-title-group {
-        flex-wrap: wrap; gap: 8px;
-        width: 100%;
-    }
-    .modal-actions-group { gap: 4px; }
-    .modal-actions-group .btn { width: 36px; height: 36px; font-size: 1rem; }
-    .modal-body { padding: 12px; }
-
-    /* ---- TransformModal: layout mobile otimizado ---- */
-    .new-transform-layout {
-        flex-direction: column; align-items: center;
-        gap: 12px; padding: 8px 0; min-height: auto;
-    }
-    .transform-panel {
-        max-width: 100%; width: 100%;
-        padding: 8px; border-radius: var(--radius-sm);
-    }
-    .transform-panel .img-container {
-        max-height: none; aspect-ratio: auto;
-        min-height: 200px;
-    }
-    .transform-panel img {
-        max-width: 90%; max-height: 90%;
-    }
-    /* Painel original oculto por padrão no mobile (mostrado via CollapsibleSection) */
-    .transform-panel.panel-original.mobile-collapsible {
-        display: none;
-    }
-    .panel-title { font-size: 0.85rem; margin-bottom: 8px; }
-
-    /* Barra de controles de rotação — horizontal fixa no bottom */
-    .transform-sidebar {
-        width: 100%; flex-direction: row;
-        border-radius: var(--radius-lg);
-        justify-content: space-around;
-        padding: 10px; gap: 6px;
-        position: sticky; bottom: 0;
-        z-index: 10;
-        background: var(--bg-surface);
-        border: 1px solid var(--border-color);
-        box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
-    }
-    .sidebar-btn { width: 48px; height: 48px; }
-    .sidebar-btn .icon { font-size: 1rem; }
-    .sidebar-btn .label { font-size: 0.6rem; }
-    .fine-tune-display { margin: 0 !important; min-width: 50px; }
-
-    /* Área de ação do transform — compacta */
-    .transform-action-area {
-        margin-top: 12px; padding: 12px;
-        border-radius: var(--radius-sm);
-    }
-
-    /* Escolha de orientação — thumbnails */
-    .transform-choose-grid {
-        grid-template-columns: repeat(4, 1fr) !important;
-        gap: 8px !important;
-    }
-
-    /* ---- GTO dentro do TransformModal: cards compactos ---- */
-    .gto-create-section { padding: 14px; }
-    .gto-create-section .form-actions-inline {
-        flex-direction: column;
-    }
-    .gto-create-section .form-control { width: 100% !important; flex: none !important; }
-    .gto-link-section { flex-direction: column; gap: 10px; align-items: stretch; }
-
-    /* ---- Cards de paciente: ocultar remark no mobile ---- */
-    .image-doctor-remark { display: none; }
-
-    /* ---- Extra info panel compacto ---- */
-    .extra-info-panel { padding: 10px 14px; font-size: 0.85rem; margin-bottom: 12px; }
-
-    /* ---- Botões maiores para toque ---- */
-    .btn { min-height: 40px; }
-
-    /* ---- Form actions empilham no mobile ---- */
-    .form-actions-inline { flex-direction: column; gap: 8px; }
-    .form-actions-inline .btn { width: 100%; }
-
-    /* ---- Toast no mobile ---- */
-    .toast-container { bottom: 16px; right: 16px; left: 16px; }
-    .toast { max-width: 100%; font-size: 0.9rem; padding: 12px 16px; }
-}
-
-/* ================================================================
-   RESPONSIVO — Celular (≤ 480px)
-   ================================================================ */
-@media (max-width: 480px) {
-    .content-scroll { padding: 12px; }
-    .images-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
-    .image-preview { height: 130px; }
-    .image-info { padding: 10px; }
-    .image-patient-name { font-size: 0.85rem; }
-    .image-meta { font-size: 0.75rem; }
-    .stat-card-row > * { flex: 1 1 100% !important; }
-    .header h1 { font-size: 1.15rem; }
-    .modal-header h2 { font-size: 0.9rem; max-width: 45vw; }
-    .modal-actions-group .btn { width: 32px; height: 32px; font-size: 0.9rem; }
-
-    /* TransformModal — preview ainda maior */
-    .transform-panel img { max-width: 95%; max-height: 95%; }
-    .sidebar-btn { width: 44px; height: 44px; }
-
-    /* Paginação: só anterior/próximo */
-    .pagination-controls .btn:not(:first-child):not(:last-child) { display: none; }
-
-    /* Collapsible mais compacto */
-    .collapsible-header { padding: 10px 12px; font-size: 0.78rem; }
-    .collapsible-body { padding: 0 12px 12px; }
-}
-
-/* ================================================================
-   RESPONSIVO — Celular pequeno (≤ 360px / 320px)
-   ================================================================ */
-@media (max-width: 360px) {
-    .content-scroll { padding: 10px; }
-    .images-grid { grid-template-columns: 1fr; }
-    .image-preview { height: 160px; }
-    .mobile-topbar-brand span:not(.mobile-topbar-logo) { font-size: 0.95rem; }
-    .responsive-table td { font-size: 0.85rem; }
-    .btn { font-size: 0.88rem; padding: 9px 14px; }
-    .sidebar-btn { width: 40px; height: 40px; }
-    .sidebar-btn .label { display: none; }
+    /* Form actions */
+    .form-actions-inline, .form-actions { flex-direction: column; width: 100%; }
+    .form-actions-inline .btn, .form-actions .btn { width: 100%; }
 }