From e66c5e21f8fcb04e96abd7d5678d2fad74f1347a Mon Sep 17 00:00:00 2001
From: "christian.julian" <zs22016079@estudiantes.uv.mx>
Date: Sun, 15 Jun 2025 18:57:02 -0600
Subject: [PATCH] fix: arreglar

---
 css/inicio.css    | 106 ----------------------------------------------
 views/inicio.html |  61 +++++++++++++++++++-------
 2 files changed, 45 insertions(+), 122 deletions(-)

diff --git a/css/inicio.css b/css/inicio.css
index dc70c87..69046f3 100644
--- a/css/inicio.css
+++ b/css/inicio.css
@@ -324,12 +324,6 @@ main .title {
 	font-weight: 600;
 	margin-bottom: 10px;
 }
-
-main .subtitle {
-	font-size: 22px;
-	margin-top: 20px;
-}
-
 main .breadcrumbs {
 	display: flex;
 	grid-gap: 6px;
@@ -587,103 +581,3 @@ main .btn-send:hover {
 }
 
 
-/* Transición base para todos */
-select,
-input[type="date"],
-button {
-    transition: all 0.3s ease;
-}
-
-/* Selects e inputs de fecha */
-select#id_rango_edad,
-select#id_genero,
-select#id_examen,
-input[type="date"] {
-    width: 100%;
-    padding: 8px 12px;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    font-size: 14px;
-    background-color: #fff;
-    color: #333;
-    font-family: inherit;
-    box-shadow: 0 0 0 0 rgba(53, 36, 91, 0); /* Inicial */
-}
-
-select#id_rango_edad:focus,
-select#id_genero:focus,
-select#id_examen:focus,
-input[type="date"]:focus {
-    border-color: #35245b;
-    outline: none;
-    box-shadow: 0 0 8px 2px rgba(53, 36, 91, 0.2);
-}
-
-/* Botones */
-button#buscar,
-button#limpiar,
-button#limpiar2 {
-    padding: 8px 20px;
-    font-size: 14px;
-    border: 1px solid #35245b;
-    border-radius: 6px;
-    background-color: #fff;
-    color: #35245b;
-    cursor: pointer;
-    font-family: inherit;
-    margin-top: 10px;
-    margin-right: 10px;
-    position: relative;
-    overflow: hidden;
-}
-
-button#buscar:hover,
-button#limpiar:hover,
-button#limpiar2:hover {
-    background-color: #35245b;
-    color: white;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(53, 36, 91, 0.2);
-}
-
-/* Efecto de "pulse" al hacer clic */
-button#buscar:active,
-button#limpiar:active,
-button#limpiar2:active {
-    transform: scale(0.98);
-    box-shadow: 0 2px 6px rgba(53, 36, 91, 0.15);
-}
-
-.fechas-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    margin: 10px 0 20px;
-}
-
-.fecha-item {
-    flex: 1;
-    min-width: 220px;
-}
-
-.fecha-item label {
-    display: block;
-    margin-bottom: 5px;
-    font-weight: 500;
-}
-
-.fecha-item input[type="date"] {
-    width: 100%;
-    padding: 8px 12px;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    font-size: 14px;
-    font-family: inherit;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
-}
-
-.fecha-item input[type="date"]:focus {
-    border-color: #35245b;
-    box-shadow: 0 0 8px 2px rgba(53, 36, 91, 0.2);
-    outline: none;
-}
diff --git a/views/inicio.html b/views/inicio.html
index 657d747..dc94357 100644
--- a/views/inicio.html
+++ b/views/inicio.html
@@ -39,7 +39,33 @@
     <!-- SIDEBAR -->
 
     <section id="content">
-        
+        <nav>
+            <i class='bx bx-menu toggle-sidebar'></i>
+            <form action="#">
+                <div class="form-group">
+                    <input type="text" placeholder="Buscar...">
+                    <i class='bx bx-search icon'></i>
+                </div>
+            </form>
+            <a href="#" class="nav-link">
+                <i class='bx bxs-bell icon'></i>
+                <span class="badge">5</span>
+            </a>
+            <a href="#" class="nav-link">
+                <i class='bx bxs-message-square-dots icon'></i>
+                <span class="badge">8</span>
+            </a>
+            <span class="divider"></span>
+            <div class="profile">
+                <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cGVvcGxlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
+                <ul class="profile-link">
+                    <li><a href="#"><i class='bx bxs-user-circle icon'></i> Profile</a></li>
+                    <li><a href="#"><i class='bx bxs-cog'></i> Settings</a></li>
+                    <li><a href="#"><i class='bx bxs-log-out-circle'></i> Logout</a></li>
+                </ul>
+            </div>
+        </nav>
+
         <main>
             <h1 class="title">Dashboard</h1>
             <ul class="breadcrumbs">
@@ -47,13 +73,16 @@
                 <li class="divider">/</li>
                 <li><a href="#" class="active">Dashboard</a></li>
             </ul>
+
             <div class="select-data">
                 <div class="card">
-                    <h2 class="subtitle">Filtros</h2>
+                    <div class="head">
+                        <i class='bx bx-trending-up icon'></i>
+                    </div>
                     <div style="display: flex; gap: 20px; margin: 10px 0;">
                         <!-- Campo: Edad -->
                         <div style="flex: 1;">
-                            <label class="form-label" for="id_rango_edad">Edad:</label>
+                            <label class="form-label" for="id_rango_edad">Edad</label>
                             <select class="border rounded-pill shadow-sm form-select" id="id_rango_edad" required>
                                 <option value="NULL">Seleccione una opción</option>
                                 <option value="1">18-24</option>
@@ -67,7 +96,7 @@
                         </div>
                         <!-- Campo: Género -->
                         <div style="flex: 1;">
-                            <label class="form-label" for="id_genero" style="margin: 10px 0px 5px;">Género:</label>
+                            <label class="form-label" for="id_genero" style="margin: 10px 0px 5px;">Género</label>
                             <select class="border rounded-pill shadow-sm form-select" id="id_genero" required>
                                 <option value="NULL">Seleccione una opción</option>
                                 <option value="1">Masculino</option>
@@ -77,7 +106,7 @@
                         </div>
                         <!-- Campo: Examen -->
                         <div style="flex: 1;">
-                            <label class="form-label" for="id_examen" style="margin: 10px 0px 5px;">Examen:</label>
+                            <label class="form-label" for="id_examen" style="margin: 10px 0px 5px;">Examen</label>
                             <select class="border rounded-pill shadow-sm form-select" id="id_examen" required="">
                                 <option value="NULL">Seleccione una opción</option>
                                 <option value="1">Amazon Web Services</option>
@@ -99,21 +128,21 @@
                         </div>
                     </div>
                     <button type="button" id="limpiar2" class="btn btn-primary">Limpiar</button>
-                    <h2 class="subtitle">Fecha</h2>
-                    <div class="fechas-wrapper">
-                        <div class="fecha-item">
-                            <label for="date1">Inicio:</label>
-                            <input type="date" id="date1" name="date1">
-                        </div>
-                        <div class="fecha-item">
-                            <label for="date2">Cierre:</label>
-                            <input type="date" id="date2" name="date2">
-                        </div>
-                    </div>
+                    <h2>Fecha</h2>
+                    <h3>Ingresa una fecha de inicio:</h3>
+                    <br>
+                    <input type="date" id="date1" name="date1">
+                    <h3>Ingresa una fecha de final:</h3>
+                    <input type="date" id="date2" name="date2">
+                    <br>
                     <button type="button" id="buscar">Buscar</button>
                     <button type="button" id="limpiar">Limpiar</button>
                     <br>
                     <div class="content-data">
+                        <div class="head">
+                            <h3>Resultado de registros en el rango de fecha ingresado</h3>
+                            <div class="menu"></div>
+                        </div>
                         <div class="chart">
                             <div id="chart5"></div>
                         </div>