From 602a1a7d74d77bab9d7792bcb3503bbbc50b4bf2 Mon Sep 17 00:00:00 2001
From: hack_25032030_dc7c14 <25032030@itcelaya.edu.mx>
Date: Fri, 22 May 2026 19:18:33 -0600
Subject: [PATCH] Agrego guia, reportes y alertas con menu de navegacion

---
 guia.html | 65 ++++++++++++++++++++++++-------------------------------
 1 file changed, 28 insertions(+), 37 deletions(-)
diff --git a/guia.html b/guia.html
index 418c52e..d695309 100644
--- a/guia.html
+++ b/guia.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="es">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Guía de Separación de Residuos</title>
+  <title>Guia de Separacion de Residuos</title>
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
-    body { font-family: Arial, sans-serif; background: #f5f5f5; color: #222; }
+    body { font-family: Arial, sans-serif; background: #f5f5f5; color: #222; padding-bottom: 70px; }
     .header { background: #2e7d32; color: white; padding: 20px 16px 16px; }
     .header p { font-size: 13px; opacity: 0.85; margin-top: 4px; }
     .categories { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
@@ -27,74 +27,65 @@
     .amber .cat-icon { background: #fff8e1; }
     .amber .cat-title { color: #e65100; }
     .amber .tag { background: #fff8e1; color: #e65100; }
-    .warning-bar { margin: 0 16px 80px; background: #fff8e1; border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #e65100; }
-    .menu { position:fixed; bottom:0; left:0; right:0; background:white; border-top:1px solid #ddd; display:flex; justify-content:space-around; padding:10px 0; }
-    .menu a { text-decoration:none; text-align:center; }
-    .menu div { font-size:22px; }
-    .menu span { font-size:11px; display:block; }
+    .warning-bar { margin: 0 16px 16px; background: #fff8e1; border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #e65100; }
+    .menu { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-top: 2px solid #ddd; display: flex; justify-content: space-around; padding: 12px 0; z-index: 9999; }
+    .menu a { text-decoration: none; text-align: center; font-size: 13px; font-weight: 600; }
   </style>
 </head>
 <body>
-    <div class="header">
-    <h1 style="font-size:20px; font-weight:600;">Guía de separación</h1>
+
+  <div class="header">
+    <h1 style="font-size:20px; font-weight:600;">Guia de separacion</h1>
     <p>Aprende a clasificar tus residuos correctamente</p>
-  </div>
+    </div>
 
   <div class="categories">
     <div class="cat-card green">
-      <div class="cat-icon">🌿</div>
-      <div class="cat-title">Orgánicos</div>
+      <div class="cat-icon" style="background:#e8f5e9;">🌿</div>
+      <div class="cat-title">Organicos</div>
       <div class="cat-sub">Se descomponen naturalmente</div>
-      <span class="tag">Cáscaras de fruta</span>
+      <span class="tag">Cascaras de fruta</span>
       <span class="tag">Restos de comida</span>
-      <span class="tag">Café y té</span>
-      <span class="tag">Cáscaras de huevo</span>
+      <span class="tag">Cafe y te</span>
+      <span class="tag">Cascaras de huevo</span>
     </div>
     <div class="cat-card blue">
-      <div class="cat-icon">♻️</div>
+      <div class="cat-icon" style="background:#e3f2fd;">♻</div>
       <div class="cat-title">Reciclables</div>
       <div class="cat-sub">Limpios y secos</div>
       <span class="tag">Botellas PET</span>
       <span class="tag">Latas de aluminio</span>
-      <span class="tag">Cartón limpio</span>
+      <span class="tag">Carton limpio</span>
       <span class="tag">Vidrio</span>
     </div>
     <div class="cat-card red">
-      <div class="cat-icon">🚫</div>
+      <div class="cat-icon" style="background:#ffebee;">✖</div>
       <div class="cat-title">Sanitarios</div>
       <div class="cat-sub">No se reciclan</div>
-      <span class="tag">Pañales</span>
+      <span class="tag">Panales</span>
       <span class="tag">Toallas sanitarias</span>
       <span class="tag">Cubrebocas</span>
-      <span class="tag">Papel higiénico</span>
+      <span class="tag">Papel higienico</span>
     </div>
     <div class="cat-card amber">
-      <div class="cat-icon">⚠️</div>
+      <div class="cat-icon" style="background:#fff8e1;">!</div>
       <div class="cat-title">Especiales</div>
       <div class="cat-sub">Requieren manejo especial</div>
-      <span class="tag">Pilas y baterías</span>
+      <span class="tag">Pilas y baterias</span>
       <span class="tag">Medicamentos</span>
-      <span class="tag">Electrónicos</span>
+      <span class="tag">Electronicos</span>
       <span class="tag">Aceite usado</span>
     </div>
   </div>
   <div class="warning-bar">
-    ⏰ Saca tu basura solo cuando recibas la alerta. No persigas al camión.
+    Saca tu basura solo cuando recibas la alerta. No persigas al camion.
   </div>
 
   <nav class="menu">
-    <a href="/guia" style="color:#2e7d32;">
-      <div>♻️</div>
-      <span>Guía</span>
-    </a>
-    <a href="/reportes" style="color:#888;">
-      <div>📋</div>
-      <span>Reportes</span>
-    </a>
-    <a href="/alertas" style="color:#888;">
-      <div>🔔</div>
-      <span>Alertas</span>
-    </a>
+    <a href="/guia" style="color:#2e7d32;">Guia</a>
+    <a href="/reportes" style="color:#1565c0;">Reportes</a>
+    <a href="/alertas" style="color:#6a1b9a;">Alertas</a>
   </nav>
+
 </body>
 </html>
\ No newline at end of file
