From 0e8815fe770c096b87d46b55261b041534549b2f Mon Sep 17 00:00:00 2001
From: tulioperdigao <116309232+tulioperdigao@users.noreply.github.com>
Date: Mon, 27 Oct 2025 10:21:32 -0300
Subject: [PATCH] REFACTOR: Melhorias do CSS e HTML para telas menores.

---
 .vscode/settings.json |  3 +++
 public/index.html     |  8 +++++---
 public/style.css      | 46 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 417ffbd..e34d221 100644
--- a/public/index.html
+++ b/public/index.html
@@ -43,8 +43,10 @@
             <div class="mb-3">
               <input class="form-control" type="file" id="csvfile" accept=".csv" required />
             </div>
-            <button class="btn btn-primary" type="submit">Enviar CSV</button>
-            <button type="button" class="btn btn-primary" id="card__button-download">Baixar Modelo</button>
+            <div class="card-buttons__container">
+              <button class="btn btn-primary button-mobile" type="submit">Enviar CSV</button>
+              <button type="button" class="btn btn-primary button-mobile" id="card__button-download">Baixar Modelo</button>
+            </div>
           </form>
           <div id="uploadResult" class="mt-3"></div>
           <div class="progress mt-2" style="height:24px; display:none;" id="progressWrap">
@@ -63,7 +65,7 @@
           <div class="row g-2">
             <div class="col-md-4"><input id="cep" class="form-control" placeholder="CEP (somente números)"></div>
             <div class="col-md-4"><input id="numero" class="form-control" placeholder="Número"></div>
-            <div class="col-md-4"><button id="btnConsultaCep" class="btn btn-secondary">Consultar CEP</button></div>
+            <div class="col-md-4 card-buttons__container"><button id="btnConsultaCep" class="btn btn-secondary">Consultar CEP</button></div>
           </div>
           <div id="consultaResult" class="mt-3"></div>
         </div>
diff --git a/public/style.css b/public/style.css
index c7bfa88..2d3b91c 100644
--- a/public/style.css
+++ b/public/style.css
@@ -24,10 +24,19 @@
     font-size: 30px;
 }
 
+.container {
+    padding-bottom: 50px;
+    margin-bottom: 20px;
+}
+
 .p-4 {
     padding: 0px !important;
 }
 
+.card-buttons__container {
+    display: flex;
+}
+
 button {
     background-color: #31a3b5 !important;
     border: none !important;
@@ -71,6 +80,43 @@ button:hover {
     .header-logo__container > img {
         width: 80px;
     }
+
+    .description__container {
+        padding-right: 20px;
+        padding-left: 20px;
+    }
+
+    .description-title {
+        margin-bottom: 30px;
+    }
+
+    .description-title, .description-content {
+        text-align: center;
+    }
+    
+    .card-body > h5, .card-body > p {
+        text-align: center;
+        margin-bottom: 30px;
+    }
+
+    .card-buttons__container {
+        flex-direction: column-reverse;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .button-mobile {
+        min-width: 150px;
+    }
+
+    #card__button-download {
+        margin-left: 0px;
+        margin-bottom: 10px;
+    }
+
+    #btnConsultaCep {
+        margin-top: 10px;
+    }
 }
 
 @media screen and (min-width: 1200px) {