From 3ed2fcf0b72ee89136c4efbf91e421d829f3c65d Mon Sep 17 00:00:00 2001
From: "Sala Maker - Note. 08" <gustavoaraujo20504@gmail.com>
Date: Tue, 24 Mar 2026 20:27:51 -0300
Subject: [PATCH] =?UTF-8?q?Corre=C3=A7=C3=A3o=20de=20bugs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cadastro.css    | 195 +++++------
 cadastro.html   |  80 +++--
 calendario.css  | 895 +++++++++++++++++++++++++++++-------------------
 calendario.html | 752 ++++++++++++++++++++++++----------------
 login.css       | 200 +++++------
 login.html      |  28 +-
 6 files changed, 1235 insertions(+), 915 deletions(-)

diff --git a/cadastro.css b/cadastro.css
index d0fccab..9ffecc6 100644
--- a/cadastro.css
+++ b/cadastro.css
@@ -1,116 +1,103 @@
-* {
-    padding: 0;
-    margin: 0;
-  }
-  
-  p,
-  h1,
-  h2,
-  h3 {
-    color: black;
-    font-family: 'Poppins', sans-serif
-  }
-  
-  body {
-    height: 100vh;
-    display: flex;
-    justify-content: center;    
-    align-items: center;   
-  }
-  
-  @media (max-width: 768px) {
-  body {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-  }
-  
-  @media (max-width: 480px) {
-  #log {
-    width: 100% !important;
-    max-width: 320px;
-  }
-  }     
-  #topo {
-    width: 100%;
-    height: 50px;
-    position: fixed;
-    top: 0;
-    left: 0;
-    background: linear-gradient(to right, #C0392B 47%, #7A4951 73%, #114455 87%);
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-  }
-  
-  #textotop {
-    padding-left: 20px;
-    font-size: 38px;
-    margin: 0;
-    font-family: 'Poppins', sans-serif;
-    font-weight: normal;
-  }
-  
-  #log {
-    width: 350px;
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    color: white;
-    margin-top: 70px; /* Compensa a barra fixa do topo */
-  }
-  .campo {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-  
-  #emailid, #senhaid, #nomeid, #csenhaid {
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  font-family: 'Poppins', sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 20px 20px;
+  background: #f5f5f5;
+}
+
+#topo {
+  width: 100%;
   height: 50px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: linear-gradient(to right, #c0392b 47%, #7a4951 73%, #114455 87%);
+  display: flex;
+  align-items: center;
+  z-index: 10;
+}
+
+#textotop {
+  padding-left: 20px;
+  font-size: clamp(22px, 5vw, 38px);
+  color: #fff;
+  font-weight: 500;
+}
+
+#log {
+  width: 100%;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.mens {
+  text-align: center;
+  color: #1f2937;
+}
+
+.campo {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+label {
+  font-weight: 700;
+  color: #1f2937;
+}
+
+#emailid,
+#senhaid,
+#nomeid,
+#csenhaid {
+  height: 46px;
   width: 100%;
   padding: 10px;
   font-size: 16px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-sizing: border-box;
-  }
-  
-  label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
-  color: white;
-  }
-  
-  form {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    width: 100%;
-    }
-  
-  #logbtn {
+  border: 1px solid #c7c7c7;
+  border-radius: 6px;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+#logbtn {
   align-self: center;
   width: 50%;
   padding: 12px;
   font-size: 18px;
   font-weight: bold;
-  background-color: #C0392B;
-  color: white;
+  background-color: #c0392b;
+  color: #fff;
   border: none;
-  border-radius: 4px;
+  border-radius: 6px;
   cursor: pointer;
-  transition: background-color 0.3s;
-  }
-  
-  #logbtn:hover {
-  background-color: #A03224;
-  }
-  .mens {
-  align-self: center;
-  }
-  a{
-    color: black;
-      text-decoration: none;
+  transition: background-color 0.2s ease;
+}
 
-  }
\ No newline at end of file
+#logbtn:hover {
+  background-color: #a03224;
+}
+
+a {
+  color: #111;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
diff --git a/cadastro.html b/cadastro.html
index 2966549..3107970 100644
--- a/cadastro.html
+++ b/cadastro.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="pt-br">
 <head>
     <meta charset="UTF-8">
@@ -9,46 +9,54 @@
     <link rel="icon" href="imagens/icone.png">
 </head>
 <body>
+    <!-- Barrinha que fica no topo -->
+    <div id="topo">
+        <h1 id="textotop">Focus Agenda</h1>
+    </div>
 
+    <!-- Cadastro -->
+    <div id="log">
+        <h1 class="mens">Crie Sua Conta</h1>
 
-   <!--Barrinha que fica no topo-->
-   <div id="topo">
-    <h1 id="textotop">Focus Agenda</h1>
-</div>
-<!--cabo bar-->
+        <form id="cadastroForm" method="GET" action="login.html">
+            <div class="campo">
+                <label for="emailid">Email</label>
+                <input type="email" placeholder="Digite seu email" name="email" id="emailid" autocomplete="email" required>
+            </div>
 
-<!--Login e outras coisas-->
-<div id="log">
-    <h1 class="mens">Crie Sua Conta</h1>
+            <div class="campo">
+                <label for="nomeid">Nome</label>
+                <input type="text" placeholder="Nome de usuario" name="user" id="nomeid" autocomplete="name" required>
+            </div>
 
-    
+            <div class="campo">
+                <label for="senhaid">Senha</label>
+                <input type="password" placeholder="Digite sua senha" name="senha" id="senhaid" autocomplete="new-password" required>
+            </div>
 
-    <form method="POST" action="cadastro.html">
-        <div class="campo">
-            <label for="emailid">Email</label>
-            <input type="email" placeholder="Digite seu email" name="email" id="emailid" required>
-        </div>
+            <div class="campo">
+                <label for="csenhaid">Confirmar Senha</label>
+                <input type="password" placeholder="Confirme sua senha" name="csenha" id="csenhaid" autocomplete="new-password" required>
+            </div>
 
-        <div class="campo">
-            <label for="nomeid">Nome</label>
-            <input type="name" placeholder="Nome de usuario" name="user" id="nomeid" required>
-        </div>
+            <button type="submit" id="logbtn">Cadastrar</button>
+        </form>
 
-        <div class="campo">
-            <label for="senhaid">Senha</label>
-            <input type="password" placeholder="Digite sua senha" name="senha" id="senhaid" required>
-        </div>
+        <p class="mens"><a href="login.html" id="linklog">Ja tem uma conta?</a></p>
+    </div>
 
-        <div class="campo">
-            <label for="csenhaid">Confirmar Senha</label>
-            <input type="password" placeholder="Confirme sua senha" name="csenha" id="csenhaid" required>
-        </div>
-        <button type="submit" id="logbtn">Cadastrar</button>
-    </form>
-    <p class="mens"><a href="login.html" id="linklog">Já tem uma conta?</a></p>
-</div>
-<!--cabo log-->
-    
-    </body>
-    </html>
-</html>
\ No newline at end of file
+    <script>
+        const cadastroForm = document.getElementById("cadastroForm");
+        const senhaInput = document.getElementById("senhaid");
+        const confirmarSenhaInput = document.getElementById("csenhaid");
+
+        cadastroForm.addEventListener("submit", (event) => {
+            if (senhaInput.value !== confirmarSenhaInput.value) {
+                event.preventDefault();
+                alert("As senhas nao conferem.");
+                confirmarSenhaInput.focus();
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/calendario.css b/calendario.css
index f819246..be5cbe2 100644
--- a/calendario.css
+++ b/calendario.css
@@ -1,385 +1,346 @@
-    * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-    }
-
-    body {
-        font-family: 'Poppins', sans-serif;
-    }
-
-    /* ===== HEADER ===== */
-    #header {
-        width: 100%;
-        height: 50px;
-        position: fixed;
-        top: 0;
-        left: 0;
-        background: linear-gradient(to right, #C0392B, #114455);
-        display: flex;
-        align-items: center;
-        z-index: 10;
-    }
-
-    #title {
-        color: white;
-        padding-left: 20px;
-        font-size: 28px;
-    }
-
-    /* ===== BARRA ESQUERDA ===== */
-    #barraesquerda {
-        position: fixed;
-        top: 50px;
-        left: 0;
-        width: 320px;
-        height: calc(100vh - 50px);
-        background: #C0392B;
-        padding: 15px;
-        color: white;
-        display: flex;
-        flex-direction: column;
-        font-family: 'Inter', sans-serif;
-    }
-
-    /* ===== MINI CALENDÁRIO ===== */
-    #calendario {
-        margin-top: 10px;
-    }
-
-    .calendariotop {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 10px;
-    }
-
-    #mes {
-        font-size: 18px;
-        font-weight: 600;
-    }
-
-    #calendarseta {
-        display: flex;
-        gap: 15px; /* espaço entre as setas */
-    }
-
-    #calendarseta button {
-        background: transparent;
-        border: none;
-        color: white;
-        font-size: 26px; /* tamanho maior */
-        cursor: pointer;
-        padding: 5px 10px; /* aumenta área de clique */
-        transition: transform 0.2s ease;
-    }
-
-    #calendarseta button:hover {
-        transform: scale(1.2); /* efeito ao passar o mouse */
-    }
-    .setas-grande {
-        display: flex;
-        align-items: center;
-        gap: 15px;
-    }
-
-    .titulo-mes {
-        font-size: 16px;
-        font-weight: 500;
-    }
-
-    .dia-semana {
-        background: #f0f0f0;
-        text-align: center;
-        font-weight: 600;
-        font-size: 12px;
-        padding: 10px 0;
-        border: 1px solid #ddd;
-    }
-    .antGrande,
-    .proxGrande {
-        background: transparent;
-        border: none;
-        color: #1f3b57;
-        font-size: 26px;
-        cursor: pointer;
-        padding: 5px 10px;
-        transition: transform 0.2s ease;
-    }
-
-    .antGrande:hover,
-    .proxGrande:hover {
-        transform: scale(1.2);
-    }
-
-    .calendariodia {
-        width: 100%;
-        border-collapse: collapse;
-    }
-
-    .calendariodia th {
-        font-size: 11px;
-        opacity: 0.7;
-    }
-
-    .calendariodia td {
-        text-align: center;
-        padding: 6px;
-        font-size: 12px;
-        border-radius: 50%;
-        position: relative;
-    }
-
-    /* bolinha */
-    .calendariodia td::after {
-        content: "";
-        width: 5px;
-        height: 5px;
-        background: white;
-        border-radius: 50%;
-        position: absolute;
-        bottom: -2px;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-    .outromes {
-        opacity: 0.4;
-    }
-
-    .calendariodia td.today {
-        background: #114455;
-        border-radius: 30%;
-        height: 0px;
-        width: 5px;
-
-    }
-
-
-
-
-    /* ===== AGENDA ===== */
-    .agenda-header {
-        margin-top: 15px;
-        border-top: 1px solid rgba(255,255,255,0.3);
-        border-bottom: 1px solid rgba(255,255,255,0.3);
-        padding: 8px 0;
-        font-size: 13px;
-    }
-
-    .evento {
-        margin-top: 10px;
-        padding-left: 10px;
-        border-left: 3px solid white;
-    }
-
-    .evento.azul {
-        border-color: #00c2ff;
-    }
-
-    .evento.rosa {
-        border-color: #ff4fa3;
-    }
-
-    .hora {
-        font-size: 11px;
-        opacity: 0.7;
-    }
-
-    .titulo {
-        font-size: 13px;
-    }
-
-    .link {
-        font-size: 11px;
-        color: #ffdede;
-    }
-
-    /* ===== FERIADOS ===== */
-    .feriados-header {
-        margin-top: 15px;
-        font-weight: 600;
-    }
-
-    .feriado {
-        display: flex;
-        gap: 8px;
-        margin-top: 8px;
-        font-size: 13px;
-    }
-
-    .dot {
-        width: 6px;
-        height: 6px;
-        background: #d4ff6a;
-        border-radius: 50%;
-    }
-
-    /* ===== MAIN ===== */
-    .main {
-        margin-left: 320px;
-        margin-top: 50px;
-        min-height: calc(100vh - 50px);
-        display: flex;
-        flex-direction: column;
-        background: #f5f5f5;
-    }
-
-    /* ===== TOPBAR ===== */
-    .topbar {
-        height: 70px;
-        background: #eaeaea;
-        border-bottom: 3px solid #c0392b;
-
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        padding: 0 25px;
-    }
-
-    .topbar h1 {
-        font-size: 24px;
-        color: #1f3b57;
-    }
-
-    /* USER AREA */
-    .user-area {
-        display: flex;
-        align-items: center;
-        gap: 20px;
-    }
-
-    .icone {
-        font-size: 20px;
-        cursor: pointer;
-    }
-
-    .perfil {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-    }
-
-    .avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        background: url('https://i.pravatar.cc/100') center/cover;
-    }
-
-    .info {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .nome {
-        font-weight: 600;
-        color: #1f3b57;
-    }
-
-    .cargo {
-        font-size: 12px;
-        color: #666;
-    }
-
-    /* ===== SUBHEADER ===== */
-    .subheader {
-        background: #eaeaea;
-        border-bottom: 3px solid #c0392b;
-        padding: 10px 20px;
-
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .subheader h2 {
-        color: #1f3b57;
-    }
-
-    /* BOTÕES */
-    .view-buttons button {
-        border: none;
-        padding: 5px 10px;
-        border-radius: 6px;
-        cursor: pointer;
-        background: transparent;
-    }
-
-    .view-buttons .active {
-        background: #c0392b;
-        color: white;
-    }
-
-    /* ===== MÊS ===== */
-    .month-title {
-        padding: 10px 20px;
-        font-size: 16px;
-    }
-
-    /* ===== CALENDÁRIO GRANDE ===== */
-    .calendar-area {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-
-    /* PRIMEIRA LINHA MENOR */
-    grid-template-rows: 40px repeat(6, 120px);
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
-/* DIAS DA SEMANA */
-.dia-semana {
-    background: #f0f0f0;
-    text-align: center;
-    font-weight: 600;
-    font-size: 13px;
-    padding: 10px 0;
-    border: 1px solid #ddd;
+body {
+    font-family: 'Poppins', sans-serif;
+    background: #f5f5f5;
 }
 
-    .dia-box {
-        background: #fff;
-        border: 1px solid #ddd;
-    }
+/* HEADER */
+#header {
+    width: 100%;
+    height: 50px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: linear-gradient(to right, #c0392b, #114455);
+    display: flex;
+    align-items: center;
+    z-index: 10;
+}
 
-    .dia-box:hover {
-        background: #eaeaff;
-    }
-    .icone-img {
-        width: 20px;
-        height: 20px;
-        cursor: pointer;
-        object-fit: contain;
-        transition: transform 0.2s ease;
-    }
+#title {
+    color: #fff;
+    padding-left: 20px;
+    font-size: 28px;
+}
 
-    .icone-img:hover {
-        transform: scale(1.15);
-    }
-    .calendar-header {
+/* BARRA ESQUERDA */
+#barraesquerda {
+    position: fixed;
+    top: 50px;
+    left: 0;
+    width: 320px;
+    height: calc(100vh - 50px);
+    background: #c0392b;
+    padding: 15px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    font-family: 'Inter', sans-serif;
+    overflow-y: auto;
+}
+
+#calendario {
+    margin-top: 10px;
+}
+
+.calendariotop {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin-bottom: 10px;
+}
 
+#mes {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+#calendarseta {
+    display: flex;
+    gap: 15px;
+}
+
+#calendarseta button {
+    background: transparent;
+    border: none;
+    color: #fff;
+    font-size: 26px;
+    cursor: pointer;
+    padding: 5px 10px;
+    transition: transform 0.2s ease;
+}
+
+#calendarseta button:hover {
+    transform: scale(1.2);
+}
+
+.calendariodia {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.calendariodia th {
+    font-size: 11px;
+    opacity: 0.8;
+}
+
+.calendariodia td {
+    text-align: center;
+    padding: 6px;
+    font-size: 12px;
+    border-radius: 50%;
+    position: relative;
+}
+
+.calendariodia td::after {
+    content: "";
+    width: 5px;
+    height: 5px;
+    background: #fff;
+    border-radius: 50%;
+    position: absolute;
+    bottom: -2px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.calendariodia td.today {
+    background: #114455;
+    color: #fff;
+    font-weight: 600;
+}
+
+.outromes {
+    opacity: 0.45;
+}
+
+/* AGENDA */
+.agenda-header {
+    margin-top: 15px;
+    border-top: 1px solid rgba(255, 255, 255, 0.3);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    padding: 8px 0;
+    font-size: 13px;
+}
+
+.agenda-empty {
+    margin-top: 10px;
+    font-size: 13px;
+    opacity: 0.85;
+}
+
+.evento {
+    margin-top: 10px;
+    padding-left: 10px;
+    border-left: 3px solid #fff;
+}
+
+.evento.azul,
+.calendar-event.azul {
+    border-color: #00c2ff;
+}
+
+.evento.verde,
+.calendar-event.verde {
+    border-color: #2ecc71;
+}
+
+.evento.vermelho,
+.calendar-event.vermelho {
+    border-color: #e74c3c;
+}
+
+.evento.roxo,
+.calendar-event.roxo {
+    border-color: #9b59b6;
+}
+
+.evento.laranja,
+.calendar-event.laranja {
+    border-color: #e67e22;
+}
+
+.evento.amarelo,
+.calendar-event.amarelo {
+    border-color: #f1c40f;
+}
+
+.evento.rosa,
+.calendar-event.rosa {
+    border-color: #ff6b81;
+}
+
+.evento.ciano,
+.calendar-event.ciano {
+    border-color: #1abc9c;
+}
+
+.evento.marinho,
+.calendar-event.marinho {
+    border-color: #2c3e50;
+}
+
+.evento.lilas,
+.calendar-event.lilas {
+    border-color: #a29bfe;
+}
+
+.evento.salmao,
+.calendar-event.salmao {
+    border-color: #fa8072;
+}
+
+.evento.menta,
+.calendar-event.menta {
+    border-color: #55efc4;
+}
+
+.hora {
+    font-size: 11px;
+    opacity: 0.8;
+}
+
+.titulo {
+    font-size: 13px;
+}
+
+.link {
+    font-size: 11px;
+    color: #ffdede;
+}
+
+/* FERIADOS */
+.feriados-header {
+    margin-top: 15px;
+    font-weight: 600;
+}
+
+.feriado {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+    font-size: 13px;
+}
+
+.dot {
+    width: 6px;
+    height: 6px;
+    background: #d4ff6a;
+    border-radius: 50%;
+    margin-top: 6px;
+    flex-shrink: 0;
+}
+
+/* MAIN */
+.main {
+    margin-left: 320px;
+    margin-top: 50px;
+    min-height: calc(100vh - 50px);
+    display: flex;
+    flex-direction: column;
+    background: #f5f5f5;
+}
+
+/* TOPBAR */
+.topbar {
+    min-height: 70px;
+    background: #eaeaea;
+    border-bottom: 3px solid #c0392b;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 25px;
+    gap: 12px;
+}
+
+.topbar h1 {
+    font-size: 24px;
+    color: #1f3b57;
+}
+
+.user-area {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.perfil {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: url('https://i.pravatar.cc/100') center/cover;
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+}
+
+.nome {
+    font-weight: 600;
+    color: #1f3b57;
+}
+
+.cargo {
+    font-size: 12px;
+    color: #666;
+}
+
+.icone-img {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    object-fit: contain;
+    transition: transform 0.2s ease;
+}
+
+.icone-img:hover {
+    transform: scale(1.15);
+}
+
+/* HEADER CALENDARIO */
+.calendar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
     padding: 10px 20px;
     background: #eee;
     border-bottom: 1px solid #ccc;
 }
 
-/* ESQUERDA (MÊS + SETAS) */
 .mes-nav {
+    position: relative;
     display: flex;
     align-items: center;
-    gap: 10px;
+    justify-content: center;
+    width: min(360px, 100%);
+    padding: 0 42px;
 }
 
 .titulo-mes {
     font-size: 18px;
     font-weight: 600;
     color: #1f3b57;
+    text-align: center;
+    width: 100%;
 }
 
 .seta {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
     background: transparent;
     border: none;
     font-size: 22px;
@@ -387,7 +348,14 @@
     color: #c0392b;
 }
 
-/* DIREITA (DIA / SEMANA / MÊS) */
+.antGrande {
+    left: 8px;
+}
+
+.proxGrande {
+    right: 8px;
+}
+
 .view-switch {
     display: flex;
     gap: 10px;
@@ -403,8 +371,217 @@
     color: #1f3b57;
 }
 
-/* BOTÃO ATIVO (MÊS) */
 .view-switch .active {
     background: #c0392b;
-    color: white;
-}
\ No newline at end of file
+    color: #fff;
+}
+
+/* CALENDARIO GRANDE */
+.calendar-area {
+    width: 100%;
+}
+
+.calendar-area.month-view {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: 40px repeat(6, 120px);
+}
+
+.dia-semana {
+    background: #f0f0f0;
+    text-align: center;
+    font-weight: 600;
+    font-size: 13px;
+    padding: 10px 0;
+    border: 1px solid #ddd;
+}
+
+.dia-box {
+    background: #fff;
+    border: 1px solid #ddd;
+    padding: 8px;
+    color: #1f2937;
+}
+
+.dia-box:hover {
+    background: #eaeaff;
+}
+
+.dia-box.today {
+    background: #fff5f2;
+    border-color: #c0392b;
+    font-weight: 700;
+    color: #c0392b;
+}
+
+.outro-mes {
+    opacity: 0.45;
+}
+
+.calendar-area.week-view {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(150px, 1fr));
+    gap: 0;
+    overflow-x: auto;
+    border-top: 1px solid #ddd;
+}
+
+.week-col {
+    min-height: 420px;
+    min-width: 150px;
+    border-right: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+}
+
+.week-col.today {
+    background: #fffaf8;
+}
+
+.week-col-head {
+    padding: 10px;
+    font-size: 13px;
+    font-weight: 700;
+    color: #1f3b57;
+    text-align: center;
+    border-bottom: 1px solid #ddd;
+    background: #f6f6f6;
+}
+
+.week-col-date {
+    display: block;
+    margin-top: 4px;
+    font-size: 11px;
+    font-weight: 500;
+    color: #6b7280;
+}
+
+.week-events {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.week-empty,
+.day-empty {
+    font-size: 13px;
+    color: #6b7280;
+}
+
+.calendar-area.day-view {
+    display: block;
+    padding: 16px;
+}
+
+.day-panel {
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    padding: 14px;
+}
+
+.day-panel-header {
+    font-size: 15px;
+    font-weight: 700;
+    color: #1f3b57;
+    margin-bottom: 12px;
+}
+
+.day-events {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.calendar-event {
+    border-left: 3px solid #c0392b;
+    background: #fafafa;
+    border-radius: 6px;
+    padding: 8px 10px;
+}
+
+.calendar-event-hora {
+    font-size: 12px;
+    color: #6b7280;
+}
+
+.calendar-event-titulo {
+    font-size: 14px;
+    color: #1f2937;
+    margin-top: 2px;
+}
+
+/* RESPONSIVO */
+@media (max-width: 1024px) {
+    body {
+        padding-top: 50px;
+    }
+
+    #barraesquerda {
+        position: static;
+        top: auto;
+        width: 100%;
+        height: auto;
+        max-height: none;
+    }
+
+    .main {
+        margin-left: 0;
+        margin-top: 0;
+        min-height: auto;
+    }
+
+    .calendar-area.month-view {
+        grid-template-rows: 40px repeat(6, 90px);
+    }
+}
+
+@media (max-width: 700px) {
+    #title {
+        font-size: 22px;
+    }
+
+    .topbar {
+        padding: 12px 16px;
+        flex-wrap: wrap;
+    }
+
+    .topbar h1 {
+        font-size: 20px;
+    }
+
+    .calendar-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .mes-nav {
+        width: 100%;
+    }
+
+    .view-switch {
+        width: 100%;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+    }
+
+    .calendar-area.month-view {
+        grid-template-rows: 36px repeat(6, 72px);
+    }
+
+    .dia-box {
+        padding: 6px;
+        font-size: 14px;
+    }
+
+    .week-col {
+        min-height: 320px;
+    }
+
+    .calendar-area.day-view {
+        padding: 12px;
+    }
+}
diff --git a/calendario.html b/calendario.html
index 2f3f38c..f940cdd 100644
--- a/calendario.html
+++ b/calendario.html
@@ -1,19 +1,15 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="pt-br">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Focus Agenda</title>
-
+    <link rel="icon" href="imagens/icone.png">
     <link rel="stylesheet" href="calendario.css">
-
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 </head>
-
 <body>
-
     <!-- HEADER -->
     <div id="header">
         <h1 id="title">Focus Agenda</h1>
@@ -21,15 +17,13 @@
 
     <!-- BARRA ESQUERDA -->
     <div id="barraesquerda">
-
-        <!-- MINI CALENDÁRIO -->
+        <!-- MINI CALENDARIO -->
         <div id="calendario">
             <div class="calendariotop">
                 <div id="mes"></div>
-
                 <div id="calendarseta">
-                    <button class="ant">‹</button>
-                    <button class="prox">›</button>
+                    <button class="ant" aria-label="Mes anterior">&lsaquo;</button>
+                    <button class="prox" aria-label="Proximo mes">&rsaquo;</button>
                 </div>
             </div>
 
@@ -54,293 +48,479 @@
 
         <!-- FERIADOS -->
         <div id="feriados"></div>
-
     </div>
 
-    <!-- CONTEÚDO PRINCIPAL -->
+    <!-- CONTEUDO PRINCIPAL -->
     <div class="main">
-
-        <!-- TOPBAR (igual ao print) -->
         <div class="topbar">
             <h1>Calendario</h1>
 
-           <div class="user-area">
-    <img src="imagens/sino.png" class="icone-img" alt="Notificações">
+            <div class="user-area">
+                <img src="imagens/sino.png" class="icone-img" alt="Notificacoes">
 
-    <div class="perfil">
-        <div class="avatar"></div>
-        <div class="info">
-            <span class="nome">Usuario</span>
-            <span class="cargo">Admin</span>
-        </div>
-    </div>
+                <div class="perfil">
+                    <div class="avatar"></div>
+                    <div class="info">
+                        <span class="nome">Usuario</span>
+                        <span class="cargo">Admin</span>
+                    </div>
+                </div>
 
-    <img src="imagens/engrenagem.png" class="icone-img" alt="Configurações">
-</div>
-        </div>
-
-       
-        <!-- MÊS -->
-       <div class="calendar-header">
-    
-    <!-- ESQUERDA (SETAS + MÊS) -->
-    <div class="mes-nav">
-        <button class="seta antGrande">‹</button>
-        <span class="titulo-mes">Janeiro, 2025</span>
-        <button class="seta proxGrande">›</button>
-    </div>
-
-    <!-- DIREITA (DIA / SEMANA / MÊS) -->
-    <div class="view-switch">
-        <button>Dia</button>
-        <button>Semana</button>
-        <button class="active">Mês</button>
-    </div>
-
-</div>
-
-        <!-- CALENDÁRIO GRANDE -->
-        <div class="calendar-area" id="calendarArea"></div>
-
-    </div>
-
-<script>
-/* ===== VARIÁVEIS ===== */
-let dataMini = new Date();
-let dataGrande = new Date();
-
-/* ===== MESES ===== */
-const meses = [
-    "Janeiro", "Fevereiro", "Março", "Abril",
-    "Maio", "Junho", "Julho", "Agosto",
-    "Setembro", "Outubro", "Novembro", "Dezembro"
-];
-
-/* ===== MINI CALENDÁRIO ===== */
-function renderCalendario() {
-    const mesEl = document.getElementById("mes");
-    const diasEl = document.getElementById("dias");
-
-    let ano = dataMini.getFullYear();
-    let mes = dataMini.getMonth();
-
-    mesEl.textContent = `${meses[mes]} ${ano}`;
-
-    let primeiroDia = new Date(ano, mes, 1).getDay();
-    let ultimoDia = new Date(ano, mes + 1, 0).getDate();
-    let ultimoDiaMesAnterior = new Date(ano, mes, 0).getDate();
-
-    diasEl.innerHTML = "";
-
-    let diaAtualNum = 1;
-    let diaSeguinte = 1;
-
-    let totalCelulas = primeiroDia + ultimoDia;
-    let totalLinhas = Math.ceil(totalCelulas / 7);
-    if (totalLinhas < 4) totalLinhas = 4;
-
-    for (let semana = 0; semana < totalLinhas; semana++) {
-        let linha = document.createElement("tr");
-
-        for (let diaSemana = 0; diaSemana < 7; diaSemana++) {
-            let pos = semana * 7 + diaSemana;
-
-            if (pos < primeiroDia) {
-                let dia = ultimoDiaMesAnterior - (primeiroDia - pos - 1);
-                linha.innerHTML += `<td class="outromes">${dia}</td>`;
-            }
-            else if (diaAtualNum <= ultimoDia) {
-                let hoje = new Date();
-
-                let classeHoje =
-                    diaAtualNum === hoje.getDate() &&
-                    mes === hoje.getMonth() &&
-                    ano === hoje.getFullYear()
-                        ? "today"
-                        : "";
-
-                linha.innerHTML += `<td class="${classeHoje}">${diaAtualNum}</td>`;
-                diaAtualNum++;
-            }
-            else {
-                linha.innerHTML += `<td class="outromes">${diaSeguinte}</td>`;
-                diaSeguinte++;
-            }
-        }
-
-        diasEl.appendChild(linha);
-    }
-}
-
-/* ===== CALENDÁRIO GRANDE ===== */
-function renderCalendarioGrande() {
-    const area = document.getElementById("calendarArea");
-    const titulo = document.querySelector(".titulo-mes");
-
-    let ano = dataGrande.getFullYear();
-    let mes = dataGrande.getMonth();
-
-    /* ATUALIZA TÍTULO */
-    titulo.textContent = `${meses[mes]}, ${ano}`;
-
-    area.innerHTML = "";
-
-    /* DIAS DA SEMANA */
-    const diasSemana = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"];
-
-    diasSemana.forEach(dia => {
-        area.innerHTML += `<div class="dia-semana">${dia}</div>`;
-    });
-
-    let primeiroDia = new Date(ano, mes, 1).getDay();
-    let ultimoDia = new Date(ano, mes + 1, 0).getDate();
-    let ultimoMesAnterior = new Date(ano, mes, 0).getDate();
-
-    let total = primeiroDia + ultimoDia;
-    let linhas = Math.ceil(total / 7);
-
-    let diaAtualNum = 1;
-    let proxMes = 1;
-
-    for (let i = 0; i < linhas * 7; i++) {
-        let classe = "dia-box";
-        let numero = "";
-
-        if (i < primeiroDia) {
-            numero = ultimoMesAnterior - (primeiroDia - i - 1);
-            classe += " outro-mes";
-        }
-        else if (diaAtualNum <= ultimoDia) {
-            numero = diaAtualNum;
-
-            let hoje = new Date();
-            if (
-                diaAtualNum === hoje.getDate() &&
-                mes === hoje.getMonth() &&
-                ano === hoje.getFullYear()
-            ) {
-                classe += " today";
-            }
-
-            diaAtualNum++;
-        }
-        else {
-            numero = proxMes++;
-            classe += " outro-mes";
-        }
-
-        area.innerHTML += `<div class="${classe}">${numero}</div>`;
-    }
-}
-
-/* ===== ATUALIZAÇÕES ===== */
-function atualizarMini() {
-    renderCalendario();
-}
-
-function atualizarGrande() {
-    renderCalendarioGrande();
-}
-
-/* ===== SETAS MINI ===== */
-document.querySelector(".prox").onclick = () => {
-    dataMini.setMonth(dataMini.getMonth() + 1);
-    atualizarMini();
-};
-
-document.querySelector(".ant").onclick = () => {
-    dataMini.setMonth(dataMini.getMonth() - 1);
-    atualizarMini();
-};
-
-/* ===== SETAS GRANDE ===== */
-document.querySelector(".antGrande").onclick = () => {
-    dataGrande.setMonth(dataGrande.getMonth() - 1);
-    atualizarGrande();
-};
-
-document.querySelector(".proxGrande").onclick = () => {
-    dataGrande.setMonth(dataGrande.getMonth() + 1);
-    atualizarGrande();
-};
-
-/* ===== BOTÕES DIA / SEMANA / MÊS ===== */
-const botoesView = document.querySelectorAll(".view-switch button");
-
-botoesView.forEach(btn => {
-    btn.addEventListener("click", () => {
-        botoesView.forEach(b => b.classList.remove("active"));
-        btn.classList.add("active");
-
-        const tipo = btn.textContent;
-
-        if (tipo === "Dia") {
-            alert("Modo DIA (você pode implementar depois)");
-        }
-        else if (tipo === "Semana") {
-            alert("Modo SEMANA (você pode implementar depois)");
-        }
-        else {
-            atualizarGrande(); // Mês já funciona
-        }
-    });
-});
-
-/* ===== AGENDA ===== */
-function renderAgenda() {
-    const container = document.getElementById("agenda");
-
-    container.innerHTML = `
-        <div class="agenda-header">
-            <strong>HOJE</strong> ${new Date().toLocaleDateString()}
-        </div>
-    `;
-
-    agendaData.forEach(ev => {
-        container.innerHTML += `
-            <div class="evento ${ev.cor}">
-                <div class="hora">${ev.hora}</div>
-                <div class="titulo">${ev.titulo}</div>
-                ${ev.link ? `<div class="link">${ev.link}</div>` : ""}
+                <img src="imagens/engrenagem.png" class="icone-img" alt="Configuracoes">
             </div>
-        `;
-    });
-}
+        </div>
 
-/* ===== FERIADOS ===== */
-function renderFeriados() {
-    const container = document.getElementById("feriados");
-
-    container.innerHTML = `
-        <div class="feriados-header">FERIADOS 🎉</div>
-    `;
-
-    feriadosData.forEach(f => {
-        container.innerHTML += `
-            <div class="feriado">
-                <span class="dot"></span>
-                <span>${f.texto}</span>
+        <div class="calendar-header">
+            <div class="mes-nav">
+                <button class="seta antGrande" aria-label="Anterior">&lsaquo;</button>
+                <span class="titulo-mes">Janeiro, 2025</span>
+                <button class="seta proxGrande" aria-label="Proximo">&rsaquo;</button>
             </div>
-        `;
-    });
-}
 
-/* ===== DADOS ===== */
-let agendaData = [
-    { hora: "08:15 – 09:15", titulo: "Eu gosto", cor: "azul" },
-    { hora: "10:00 – 11:00", titulo: "Evento 2", cor: "rosa" }
-];
+            <div class="view-switch">
+                <button type="button" data-view="dia">Dia</button>
+                <button type="button" data-view="semana">Semana</button>
+                <button type="button" data-view="mes" class="active">Mes</button>
+            </div>
+        </div>
 
-let feriadosData = [
-    { texto: "01 – Ano Novo" }
-];
+        <!-- CALENDARIO GRANDE -->
+        <div class="calendar-area month-view" id="calendarArea"></div>
+    </div>
 
-/* ===== INICIAR ===== */
-atualizarMini();
-atualizarGrande();
-renderAgenda();
-renderFeriados();
-</script>
+    <script>
+        let dataMini = new Date();
+        let dataGrande = new Date();
+        let modoAtual = "mes";
+
+        const meses = [
+            "Janeiro", "Fevereiro", "Marco", "Abril",
+            "Maio", "Junho", "Julho", "Agosto",
+            "Setembro", "Outubro", "Novembro", "Dezembro"
+        ];
+
+        const nomesDiaLongo = [
+            "Domingo", "Segunda", "Terca", "Quarta", "Quinta", "Sexta", "Sabado"
+        ];
+
+        const nomesDiaCurto = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"];
+
+        function normalizarData(data) {
+            return new Date(data.getFullYear(), data.getMonth(), data.getDate());
+        }
+
+        function adicionarDias(data, quantidade) {
+            const novaData = new Date(data);
+            novaData.setDate(novaData.getDate() + quantidade);
+            return novaData;
+        }
+
+        function formatarISO(data) {
+            const ano = data.getFullYear();
+            const mes = String(data.getMonth() + 1).padStart(2, "0");
+            const dia = String(data.getDate()).padStart(2, "0");
+            return `${ano}-${mes}-${dia}`;
+        }
+
+        function formatarDataCurta(data) {
+            const dia = String(data.getDate()).padStart(2, "0");
+            const mes = String(data.getMonth() + 1).padStart(2, "0");
+            return `${dia}/${mes}`;
+        }
+
+        function obterInicioSemana(data) {
+            const inicio = normalizarData(data);
+            inicio.setDate(inicio.getDate() - inicio.getDay());
+            return inicio;
+        }
+
+        function extrairMinutos(horaIntervalo) {
+            const inicio = horaIntervalo.split("-")[0].trim();
+            const [hora, minuto] = inicio.split(":").map(Number);
+            return hora * 60 + minuto;
+        }
+
+        const hojeBase = normalizarData(new Date());
+
+        const agendaData = [
+            { data: formatarISO(hojeBase), hora: "08:15 - 09:15", titulo: "Planejamento do dia", cor: "vermelho" },
+            { data: formatarISO(hojeBase), hora: "10:00 - 11:00", titulo: "Reuniao rapida", cor: "rosa" },
+            { data: formatarISO(adicionarDias(hojeBase, 1)), hora: "14:00 - 15:00", titulo: "Revisar tarefas", cor: "azul" },
+            { data: formatarISO(adicionarDias(hojeBase, 3)), hora: "16:00 - 17:00", titulo: "Entrega parcial", cor: "verde" }
+        ];
+
+        const feriadosData = [
+            { texto: "01 - Ano Novo" }
+        ];
+
+        function obterEventosDaData(data) {
+            const chave = formatarISO(normalizarData(data));
+            return agendaData
+                .filter((evento) => evento.data === chave)
+                .sort((a, b) => extrairMinutos(a.hora) - extrairMinutos(b.hora));
+        }
+
+        function atualizarTituloGrande() {
+            const titulo = document.querySelector(".titulo-mes");
+
+            if (modoAtual === "mes") {
+                titulo.textContent = `${meses[dataGrande.getMonth()]}, ${dataGrande.getFullYear()}`;
+                return;
+            }
+
+            if (modoAtual === "semana") {
+                const inicio = obterInicioSemana(dataGrande);
+                const fim = adicionarDias(inicio, 6);
+                titulo.textContent = `Semana ${formatarDataCurta(inicio)} - ${formatarDataCurta(fim)}/${fim.getFullYear()}`;
+                return;
+            }
+
+            titulo.textContent = `${nomesDiaLongo[dataGrande.getDay()]}, ${formatarDataCurta(dataGrande)}/${dataGrande.getFullYear()}`;
+        }
+
+        function configurarArea(classeModo) {
+            const area = document.getElementById("calendarArea");
+            area.className = `calendar-area ${classeModo}`;
+            area.replaceChildren();
+            return area;
+        }
+
+        function criarCardEvento(evento) {
+            const card = document.createElement("div");
+            card.className = `calendar-event ${evento.cor}`;
+
+            const hora = document.createElement("div");
+            hora.className = "calendar-event-hora";
+            hora.textContent = evento.hora;
+
+            const titulo = document.createElement("div");
+            titulo.className = "calendar-event-titulo";
+            titulo.textContent = evento.titulo;
+
+            card.appendChild(hora);
+            card.appendChild(titulo);
+            return card;
+        }
+
+        /* MINI CALENDARIO */
+        function renderCalendarioMini() {
+            const mesEl = document.getElementById("mes");
+            const diasEl = document.getElementById("dias");
+
+            const ano = dataMini.getFullYear();
+            const mes = dataMini.getMonth();
+
+            mesEl.textContent = `${meses[mes]} ${ano}`;
+            diasEl.replaceChildren();
+
+            const primeiroDia = new Date(ano, mes, 1).getDay();
+            const ultimoDia = new Date(ano, mes + 1, 0).getDate();
+            const ultimoDiaMesAnterior = new Date(ano, mes, 0).getDate();
+
+            let diaAtualNum = 1;
+            let diaSeguinte = 1;
+
+            const totalCelulas = primeiroDia + ultimoDia;
+            let totalLinhas = Math.ceil(totalCelulas / 7);
+            if (totalLinhas < 4) totalLinhas = 4;
+
+            for (let semana = 0; semana < totalLinhas; semana++) {
+                const linha = document.createElement("tr");
+
+                for (let diaSemana = 0; diaSemana < 7; diaSemana++) {
+                    const pos = semana * 7 + diaSemana;
+                    const celula = document.createElement("td");
+
+                    if (pos < primeiroDia) {
+                        const dia = ultimoDiaMesAnterior - (primeiroDia - pos - 1);
+                        celula.className = "outromes";
+                        celula.textContent = String(dia);
+                    } else if (diaAtualNum <= ultimoDia) {
+                        const hoje = new Date();
+                        const isHoje =
+                            diaAtualNum === hoje.getDate() &&
+                            mes === hoje.getMonth() &&
+                            ano === hoje.getFullYear();
+
+                        if (isHoje) {
+                            celula.className = "today";
+                        }
+
+                        celula.textContent = String(diaAtualNum);
+                        diaAtualNum++;
+                    } else {
+                        celula.className = "outromes";
+                        celula.textContent = String(diaSeguinte);
+                        diaSeguinte++;
+                    }
+
+                    linha.appendChild(celula);
+                }
+
+                diasEl.appendChild(linha);
+            }
+        }
+
+        /* CALENDARIO GRANDE - MES */
+        function renderCalendarioMes() {
+            const area = configurarArea("month-view");
+            atualizarTituloGrande();
+
+            nomesDiaCurto.forEach((dia) => {
+                const el = document.createElement("div");
+                el.className = "dia-semana";
+                el.textContent = dia;
+                area.appendChild(el);
+            });
+
+            const ano = dataGrande.getFullYear();
+            const mes = dataGrande.getMonth();
+            const primeiroDia = new Date(ano, mes, 1).getDay();
+            const ultimoDia = new Date(ano, mes + 1, 0).getDate();
+            const ultimoMesAnterior = new Date(ano, mes, 0).getDate();
+
+            const totalCelulasMes = 42;
+            let proximoDia = 1;
+
+            for (let i = 0; i < totalCelulasMes; i++) {
+                const box = document.createElement("div");
+                box.className = "dia-box";
+
+                if (i < primeiroDia) {
+                    box.classList.add("outro-mes");
+                    box.textContent = String(ultimoMesAnterior - (primeiroDia - i - 1));
+                } else if (i < primeiroDia + ultimoDia) {
+                    const diaAtual = i - primeiroDia + 1;
+                    box.textContent = String(diaAtual);
+
+                    const hoje = new Date();
+                    const isHoje =
+                        diaAtual === hoje.getDate() &&
+                        mes === hoje.getMonth() &&
+                        ano === hoje.getFullYear();
+
+                    if (isHoje) {
+                        box.classList.add("today");
+                    }
+                } else {
+                    box.classList.add("outro-mes");
+                    box.textContent = String(proximoDia++);
+                }
+
+                area.appendChild(box);
+            }
+        }
+
+        /* CALENDARIO GRANDE - SEMANA */
+        function renderCalendarioSemana() {
+            const area = configurarArea("week-view");
+            atualizarTituloGrande();
+
+            const inicioSemana = obterInicioSemana(dataGrande);
+
+            for (let i = 0; i < 7; i++) {
+                const dataColuna = adicionarDias(inicioSemana, i);
+                const eventos = obterEventosDaData(dataColuna);
+
+                const coluna = document.createElement("div");
+                coluna.className = "week-col";
+
+                const cabecalho = document.createElement("div");
+                cabecalho.className = "week-col-head";
+                cabecalho.textContent = nomesDiaCurto[dataColuna.getDay()];
+
+                const numero = document.createElement("span");
+                numero.className = "week-col-date";
+                numero.textContent = `${formatarDataCurta(dataColuna)}/${dataColuna.getFullYear()}`;
+                cabecalho.appendChild(numero);
+
+                if (
+                    dataColuna.getDate() === new Date().getDate() &&
+                    dataColuna.getMonth() === new Date().getMonth() &&
+                    dataColuna.getFullYear() === new Date().getFullYear()
+                ) {
+                    coluna.classList.add("today");
+                }
+
+                const lista = document.createElement("div");
+                lista.className = "week-events";
+
+                if (eventos.length === 0) {
+                    const vazio = document.createElement("div");
+                    vazio.className = "week-empty";
+                    vazio.textContent = "Sem eventos";
+                    lista.appendChild(vazio);
+                } else {
+                    eventos.forEach((evento) => {
+                        lista.appendChild(criarCardEvento(evento));
+                    });
+                }
+
+                coluna.appendChild(cabecalho);
+                coluna.appendChild(lista);
+                area.appendChild(coluna);
+            }
+        }
+
+        /* CALENDARIO GRANDE - DIA */
+        function renderCalendarioDia() {
+            const area = configurarArea("day-view");
+            atualizarTituloGrande();
+
+            const eventos = obterEventosDaData(dataGrande);
+
+            const painel = document.createElement("div");
+            painel.className = "day-panel";
+
+            const cabecalho = document.createElement("div");
+            cabecalho.className = "day-panel-header";
+            cabecalho.textContent = `Agenda de ${formatarDataCurta(dataGrande)}/${dataGrande.getFullYear()}`;
+
+            const lista = document.createElement("div");
+            lista.className = "day-events";
+
+            if (eventos.length === 0) {
+                const vazio = document.createElement("div");
+                vazio.className = "day-empty";
+                vazio.textContent = "Nenhum evento para este dia.";
+                lista.appendChild(vazio);
+            } else {
+                eventos.forEach((evento) => {
+                    lista.appendChild(criarCardEvento(evento));
+                });
+            }
+
+            painel.appendChild(cabecalho);
+            painel.appendChild(lista);
+            area.appendChild(painel);
+        }
+
+        function renderCalendarioGrande() {
+            if (modoAtual === "dia") {
+                renderCalendarioDia();
+                return;
+            }
+
+            if (modoAtual === "semana") {
+                renderCalendarioSemana();
+                return;
+            }
+
+            renderCalendarioMes();
+        }
+
+        function renderAgenda() {
+            const container = document.getElementById("agenda");
+            container.replaceChildren();
+
+            const header = document.createElement("div");
+            header.className = "agenda-header";
+
+            const strong = document.createElement("strong");
+            strong.textContent = "HOJE ";
+            header.appendChild(strong);
+
+            const hoje = new Date();
+            header.appendChild(document.createTextNode(new Intl.DateTimeFormat("pt-BR").format(hoje)));
+            container.appendChild(header);
+
+            const eventosHoje = obterEventosDaData(hoje);
+
+            if (eventosHoje.length === 0) {
+                const vazio = document.createElement("div");
+                vazio.className = "agenda-empty";
+                vazio.textContent = "Sem eventos para hoje.";
+                container.appendChild(vazio);
+                return;
+            }
+
+            eventosHoje.forEach((ev) => {
+                const evento = document.createElement("div");
+                evento.className = `evento ${ev.cor}`;
+
+                const hora = document.createElement("div");
+                hora.className = "hora";
+                hora.textContent = ev.hora;
+
+                const titulo = document.createElement("div");
+                titulo.className = "titulo";
+                titulo.textContent = ev.titulo;
+
+                evento.appendChild(hora);
+                evento.appendChild(titulo);
+                container.appendChild(evento);
+            });
+        }
+
+        function renderFeriados() {
+            const container = document.getElementById("feriados");
+            container.replaceChildren();
+
+            const header = document.createElement("div");
+            header.className = "feriados-header";
+            header.textContent = "FERIADOS";
+            container.appendChild(header);
+
+            feriadosData.forEach((f) => {
+                const item = document.createElement("div");
+                item.className = "feriado";
+
+                const dot = document.createElement("span");
+                dot.className = "dot";
+
+                const texto = document.createElement("span");
+                texto.textContent = f.texto;
+
+                item.appendChild(dot);
+                item.appendChild(texto);
+                container.appendChild(item);
+            });
+        }
+
+        function moverPeriodo(direcao) {
+            if (modoAtual === "dia") {
+                dataGrande.setDate(dataGrande.getDate() + direcao);
+            } else if (modoAtual === "semana") {
+                dataGrande.setDate(dataGrande.getDate() + (direcao * 7));
+            } else {
+                dataGrande.setMonth(dataGrande.getMonth() + direcao);
+            }
+
+            renderCalendarioGrande();
+        }
+
+        function ativarBotaoModo(modo) {
+            const botoes = document.querySelectorAll(".view-switch button");
+            botoes.forEach((botao) => {
+                botao.classList.toggle("active", botao.dataset.view === modo);
+            });
+        }
+
+        document.querySelector(".prox").onclick = () => {
+            dataMini.setMonth(dataMini.getMonth() + 1);
+            renderCalendarioMini();
+        };
+
+        document.querySelector(".ant").onclick = () => {
+            dataMini.setMonth(dataMini.getMonth() - 1);
+            renderCalendarioMini();
+        };
+
+        document.querySelector(".antGrande").onclick = () => moverPeriodo(-1);
+        document.querySelector(".proxGrande").onclick = () => moverPeriodo(1);
+
+        document.querySelectorAll(".view-switch button").forEach((btn) => {
+            btn.addEventListener("click", () => {
+                modoAtual = btn.dataset.view;
+                ativarBotaoModo(modoAtual);
+                renderCalendarioGrande();
+            });
+        });
+
+        renderCalendarioMini();
+        renderCalendarioGrande();
+        renderAgenda();
+        renderFeriados();
+    </script>
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/login.css b/login.css
index 6d8869f..5a2c631 100644
--- a/login.css
+++ b/login.css
@@ -1,126 +1,100 @@
-* {
-    padding: 0;
-    margin: 0;
-  }
-  
-  p,
-  h1,
-  h2,
-  h3 {
-    color: black;
-    margin: 0;
-    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-  }
-  
-  label{
-  display: block;
-  }
-  
-  body {
-    height: 100vh;
-    display: flex;
-    justify-content: center;    
-    align-items: center;   
-  }
-  
-  @media (max-width: 768px) {
-  body {
-    padding-left: 20px;
-    padding-right: 20px;
-    justify-content: center;
-  }
-  }
-  
-  @media (max-width: 480px) {
-  #log {
-    width: 100% !important;
-    max-width: 320px;
-  }
-  
-  }     
-  #topo {
-    width: 100%;
-    height: 50px;
-    background-color: #111;
-    position: fixed;
-    top: 0;
-    left: 0;
-    background: linear-gradient(to right, #C0392B 47%, #7A4951 73%, #114455 87%);
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-  }
-  
-  #textotop {
-    padding-left: 20px;
-    font-size: 38px;
-    margin: 0;
-    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-  }
-  
-  #log {
-    width: 350px;
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    color: white;
-    margin-top: 70px; /* Compensa a barra fixa do topo */
-  }
-  #campo {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    align-self: center;
-  }
-  #menslog{
-  font-size: 20px;
-  }
-  
-  #emailid, #senhaid {
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 20px 20px;
+  background: #f5f5f5;
+}
+
+#topo {
+  width: 100%;
   height: 50px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: linear-gradient(to right, #c0392b 47%, #7a4951 73%, #114455 87%);
+  display: flex;
+  align-items: center;
+  z-index: 10;
+}
+
+#textotop {
+  padding-left: 20px;
+  font-size: clamp(22px, 5vw, 38px);
+  color: #fff;
+}
+
+#log {
+  width: 100%;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.mens {
+  text-align: center;
+  color: #1f2937;
+}
+
+.campo {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+label {
+  font-weight: 700;
+  color: #1f2937;
+}
+
+#emailid,
+#senhaid {
+  height: 46px;
   width: 100%;
   padding: 10px;
   font-size: 16px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-sizing: border-box;
-  }
-  
-  label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
-  color: white;
-  }
-  
-  form {
+  border: 1px solid #c7c7c7;
+  border-radius: 6px;
+}
+
+form {
   display: flex;
   flex-direction: column;
-  gap: 15px;
-  width: 100%;
-  }
-  
-  #logbtn {
+  gap: 16px;
+}
+
+#logbtn {
   align-self: center;
   width: 50%;
   padding: 12px;
   font-size: 18px;
   font-weight: bold;
-  background-color: #C0392B;
-  color: white;
+  background-color: #c0392b;
+  color: #fff;
   border: none;
-  border-radius: 4px;
+  border-radius: 6px;
   cursor: pointer;
-  transition: background-color 0.3s;
-  }
-  
-  #logbtn:hover {
-  background-color: #A03224;
-  }
-  .mens {
-  align-self: center;
-  }
-  #linkcada{
-     color: #111;
-     text-decoration: none;
-  }
\ No newline at end of file
+  transition: background-color 0.2s ease;
+}
+
+#logbtn:hover {
+  background-color: #a03224;
+}
+
+#linkcada {
+  color: #111;
+  text-decoration: none;
+}
+
+#linkcada:hover {
+  text-decoration: underline;
+}
diff --git a/login.html b/login.html
index 104b6f2..641932a 100644
--- a/login.html
+++ b/login.html
@@ -1,44 +1,38 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="pt-br">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" href="imagens/icone.png">
     <link rel="stylesheet" href="login.css">
-
     <title>Login</title>
 </head>
-    
 <body>
-
-    <!--Barrinha que fica no topo-->
+    <!-- Barrinha que fica no topo -->
     <div id="topo">
         <h1 id="textotop">Focus Agenda</h1>
     </div>
-    <!--cabo bar-->
 
-    <!--Login e outras coisas-->
+    <!-- Login -->
     <div id="log">
-        <h1 class="mens">Bem Vindo!</h1>
+        <h1 class="mens">Bem-vindo!</h1>
+        <h3 class="mens">Fa&ccedil;a seu login</h3>
 
-        <h3 class="mens">Faça seu login</h3>
-
-        <form method="POST" action="calendario.html">
+        <form method="GET" action="calendario.html">
             <div class="campo">
                 <label for="emailid">Email</label>
-                <input type="email" placeholder="Digite seu email" name="email" id="emailid" required>
+                <input type="email" placeholder="Digite seu email" name="email" id="emailid" autocomplete="email" required>
             </div>
 
             <div class="campo">
                 <label for="senhaid">Senha</label>
-                <input type="password" placeholder="Digite sua senha" name="senha" id="senhaid" required>
+                <input type="password" placeholder="Digite sua senha" name="senha" id="senhaid" autocomplete="current-password" required>
             </div>
+
             <button type="submit" id="logbtn">Logar</button>
         </form>
+
         <p class="mens"><a href="cadastro.html" id="linkcada">Cadastrar-se</a></p>
     </div>
-    <!--cabo log-->
-</div>
 </body>
-
-</html>
\ No newline at end of file
+</html>