Update style.css

style.css

@@ -1,6 +1,4 @@
-/* Melhorias no CSS */
 :root {
-    /* 1. Paleta de cores expandida */
     --primary-color: #2563eb;
     --primary-dark: #1d4ed8;
     --primary-light: #3b82f6;
@@ -11,10 +9,11 @@
     --warning-color: #d97706;
     --warning-light: #f59e0b;
     --background-color: #f8fafc;
+    --card-background: #ffffff;
     --text-color: #1e293b;
     --text-light: #64748b;
+    --border-color: #e2e8f0;
     
-    /* 2. Sistema de espaçamento consistente */
     --spacing-xs: 0.25rem;
     --spacing-sm: 0.5rem;
     --spacing-md: 1rem;
@@ -22,104 +21,124 @@
     --spacing-xl: 2rem;
 }
 
-/* 3. Dark mode support */
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background-color: #0f172a;
-        --text-color: #e2e8f0;
-        --text-light: #94a3b8;
-    }
+/* Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
-/* 4. Animações melhoradas */
-@keyframes slideIn {
-    from { transform: translateY(-20px); opacity: 0; }
-    to { transform: translateY(0); opacity: 1; }
+body {
+    font-family: system-ui, -apple-system, sans-serif;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    line-height: 1.5;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+/* Dark Mode */
+body.dark-theme {
+    --background-color: #0f172a;
+    --card-background: #1e293b;
+    --text-color: #e2e8f0;
+    --text-light: #94a3b8;
+    --border-color: #334155;
+}
+
+/* Layout */
+.app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.container {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 var(--spacing-md);
 }
 
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
+/* Header */
+.header {
+    background-color: var(--card-background);
+    border-bottom: 1px solid var(--border-color);
+    padding: var(--spacing-md) 0;
+    margin-bottom: var(--spacing-xl);
 }
 
-/* 5. Tipografia responsiva */
-html {
-    font-size: clamp(14px, 1vw + 10px, 18px);
+.nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
-/* 6. Melhorias na acessibilidade */
-:focus {
-    outline: 3px solid var(--primary-light);
-    outline-offset: 2px;
+.title {
+    font-size: 1.5rem;
+    font-weight: 600;
 }
 
-/* 7. Cards com design moderno */
+/* Cards */
 .card {
-    background: white;
+    background-color: var(--card-background);
     border-radius: 1rem;
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     transition: transform 0.2s, box-shadow 0.2s;
+    border: 1px solid var(--border-color);
 }
 
-.card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+/* Upload Area */
+.upload-container {
+    margin-bottom: var(--spacing-xl);
 }
 
-/* 8. Upload area mais interativa */
 .upload-area {
-    background-image: linear-gradient(45deg, var(--background-color) 25%, transparent 25%),
-                      linear-gradient(-45deg, var(--background-color) 25%, transparent 25%),
-                      linear-gradient(45deg, transparent 75%, var(--background-color) 75%),
-                      linear-gradient(-45deg, transparent 75%, var(--background-color) 75%);
-    background-size: 20px 20px;
-    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-    animation: fadeIn 0.5s ease-out;
+    padding: var(--spacing-xl);
+    text-align: center;
+    border: 2px dashed var(--border-color);
+    border-radius: 0.5rem;
+    transition: all 0.3s ease;
 }
 
-/* 9. Loading spinner aprimorado */
-.spinner {
-    background: conic-gradient(from 0deg, var(--primary-color), var(--primary-light));
-    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
+.upload-area.drag-over {
+    border-color: var(--primary-color);
+    background-color: rgba(37, 99, 235, 0.1);
 }
 
-/* 10. Tooltips informativos */
-[data-tooltip] {
-    position: relative;
+.upload-label {
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-md);
 }
 
-[data-tooltip]:hover::before {
-    content: attr(data-tooltip);
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: var(--spacing-sm) var(--spacing-md);
-    background: var(--text-color);
-    color: white;
-    border-radius: 4px;
-    font-size: 0.875rem;
-    white-space: nowrap;
-    z-index: 10;
+.upload-icon {
+    width: 4rem;
+    height: 4rem;
+    border: 2px solid var(--text-light);
+    border-radius: 50%;
+    transition: border-color 0.3s;
 }
 
-/* 11. Badges de status */
-.badge {
-    display: inline-block;
-    padding: 0.25em 0.75em;
-    border-radius: 9999px;
-    font-size: 0.875em;
-    font-weight: 500;
+.upload-text {
+    font-size: 1.125rem;
+    color: var(--text-color);
 }
 
-.badge-success { background: var(--success-light); color: white; }
-.badge-error { background: var(--error-light); color: white; }
-.badge-warning { background: var(--warning-light); color: white; }
+.upload-info {
+    color: var(--text-light);
+    font-size: 0.875rem;
+}
+
+/* Progress Bar */
+.progress-container {
+    margin: var(--spacing-md) 0;
+}
 
-/* 12. Progress bars estilizados */
 .progress {
     height: 8px;
-    background: #e2e8f0;
+    background-color: var(--border-color);
     border-radius: 4px;
     overflow: hidden;
 }
@@ -128,111 +147,138 @@ html {
     height: 100%;
     background: linear-gradient(90deg, var(--primary-light), var(--primary-color));
     transition: width 0.3s ease;
+    width: 0;
 }
 
-/* 13. Grid responsivo */
-.grid {
-    display: grid;
+/* Loading */
+.loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     gap: var(--spacing-md);
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    margin: var(--spacing-xl) 0;
 }
 
-/* 14. Botões modernos */
-.button {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacing-sm);
-    padding: var(--spacing-sm) var(--spacing-md);
-    border-radius: 8px;
-    font-weight: 500;
-    transition: all 0.2s;
+.spinner {
+    width: 3rem;
+    height: 3rem;
+    border: 3px solid var(--border-color);
+    border-top-color: var(--primary-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
 }
 
-.button-primary {
-    background: var(--primary-color);
-    color: white;
+/* Results Grid */
+.results-grid {
+    display: grid;
+    gap: var(--spacing-xl);
+    margin-top: var(--spacing-xl);
 }
 
-.button-primary:hover {
-    background: var(--primary-dark);
+/* Compliance Report */
+.compliance-report {
+    padding: var(--spacing-lg);
 }
 
-/* 15. Scrollbar personalizado */
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+.report-title {
+    margin-bottom: var(--spacing-lg);
+    font-size: 1.25rem;
+    font-weight: 600;
 }
 
-::-webkit-scrollbar-track {
-    background: #f1f1f1;
+/* Badges */
+.badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25em 0.75em;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    font-weight: 500;
 }
 
-::-webkit-scrollbar-thumb {
-    background: var(--primary-light);
-    border-radius: 4px;
+.badge-success {
+    background-color: var(--success-color);
+    color: white;
 }
 
-/* 16. Form inputs estilizados */
-.input {
-    width: 100%;
-    padding: var(--spacing-sm) var(--spacing-md);
-    border: 2px solid #e2e8f0;
-    border-radius: 8px;
-    transition: border-color 0.2s;
+.badge-error {
+    background-color: var(--error-color);
+    color: white;
 }
 
-.input:focus {
-    border-color: var(--primary-color);
+/* Toast */
+.toast {
+    position: fixed;
+    bottom: var(--spacing-xl);
+    right: var(--spacing-xl);
+    padding: var(--spacing-md) var(--spacing-lg);
+    background-color: var(--card-background);
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    animation: slideIn 0.3s ease-out;
+    z-index: 50;
 }
 
-/* 17. Tabelas responsivas */
-.table-container {
-    overflow-x: auto;
-    margin: var(--spacing-md) 0;
+/* Skeleton Loading */
+.skeleton {
+    background: linear-gradient(
+        90deg,
+        var(--border-color) 25%,
+        var(--card-background) 50%,
+        var(--border-color) 75%
+    );
+    background-size: 200% 100%;
+    animation: skeleton-loading 1.5s infinite;
+    border-radius: 4px;
+    height: 1rem;
+    margin-bottom: var(--spacing-sm);
 }
 
-.table {
-    width: 100%;
-    border-collapse: collapse;
+.skeleton-line {
+    height: 1rem;
+    margin-bottom: var(--spacing-sm);
 }
 
-.table th, .table td {
-    padding: var(--spacing-sm) var(--spacing-md);
-    border-bottom: 1px solid #e2e8f0;
+/* Animations */
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
 }
 
-/* 18. Skeleton loading */
-.skeleton {
-    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-    background-size: 200% 100%;
-    animation: skeleton-loading 1.5s infinite;
+@keyframes slideIn {
+    from {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
 }
 
 @keyframes skeleton-loading {
-    from { background-position: 200% 0; }
-    to { background-position: -200% 0; }
+    from {
+        background-position: 200% 0;
+    }
+    to {
+        background-position: -200% 0;
+    }
 }
 
-/* 19. Notificações toast */
-.toast {
-    position: fixed;
-    bottom: var(--spacing-xl);
-    right: var(--spacing-xl);
-    padding: var(--spacing-md);
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-    animation: slideIn 0.3s ease-out;
+/* Utilities */
+.hidden {
+    display: none !important;
 }
 
-/* 20. Media queries para dispositivos diferentes */
+/* Responsive */
 @media (max-width: 768px) {
     .container {
-        padding: 0 var(--spacing-md);
+        padding: 0 var(--spacing-sm);
     }
     
-    .grid {
-        grid-template-columns: 1fr;
+    .upload-area {
+        padding: var(--spacing-lg);
     }
     
     .toast {