inicializacion del proyecto

.gitignore

@@ -0,0 +1,3 @@
+test/
+node_modules/
+src/public/files/

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "app_fidelizacion",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "nodemon src/app.js",
+    "start": "node src/app.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "axios": "^0.27.2",
+    "ejs": "^3.1.8",
+    "express": "^4.18.1",
+    "express-fileupload": "^1.4.0",
+    "express-myconnection": "^1.0.4",
+    "morgan": "^1.10.0",
+    "mysql": "^2.18.1",
+    "nodemon": "^2.0.19"
+  }
+}

src/app.js

@@ -0,0 +1,49 @@
+const express = require('express');
+const path = require('path');
+const morgan = require('morgan');
+const mysql = require('mysql');
+const cloud_file = require('express-fileupload');
+const myConecction = require('express-myconnection');
+
+var puerto = 2001
+
+const app = express();
+//importando rutas
+const generalesRutas = require('./rutas/rt_Generales');
+
+//configuraciones
+app.set('port', process.env.PORT || puerto);
+app.set('view engine', 'ejs');
+app.set('views', path.join(__dirname, 'views'));
+//app.set('vistas',path.join(__dirname, 'vistas'));
+
+//middlewares
+app.use(express.static(__dirname + '/public'));//para usar la carpeta public *js*css*img
+app.use(morgan('dev'));
+app.use(myConecction(mysql, {
+  //host:'192.168.10.50',
+  host: '192.168.10.150',
+  user: 'admin',
+  password: 'Dx.1706%',
+  port: 3306,
+  database: 'facturacion'
+}, 'single'));
+//cuando reciba dato desde req body
+app.use(express.json({ limit: '25mb' }));
+app.use(express.urlencoded({ limit: '25mb', extended: false }));
+//
+//app.use(cloud_file);
+app.use(cloud_file({
+  limits: { fileSize: 50000 * 1024 * 1024 },
+}));
+
+//rutas
+app.use('/', generalesRutas);
+
+//archivos staticos
+app.use(express.static(path.join(__dirname, 'public')));
+
+//inicia servidor
+app.listen(app.get('port'), () => {
+  console.log('Servidor activo App SIGMA Puerto: ' + puerto);
+});

src/controladores/controlador_General.js

@@ -0,0 +1,31 @@
+const controlador = {};
+
+//*********  APP-panel control  ********//
+controlador.panel = (req, res) => {
+  res.render('panel');
+};
+
+//*********  APP-historial ideas  ********//
+controlador.historial = (req, res) => {
+  res.render('historial');
+};
+
+//*********  APP-login  ********//
+controlador.panel_login = (req, res) => {
+  res.render('login');
+};
+
+//*********  APP-tienda canje  ********//
+controlador.tienda_canje = (req, res) => {
+  res.render('tienda_canje');
+};
+//*********  APP-perfil  ********//
+controlador.perfil = (req, res) => {
+  res.render('perfil');
+};//*********  APP-escanear  ********//
+controlador.escanear = (req, res) => {
+  res.render('escanear');
+};
+
+
+module.exports = controlador;

src/public/css/cloud.css

@@ -0,0 +1,28 @@
+body{
+  background:rgb(10, 10, 10);
+  color: rgb(255, 255, 255);
+}
+.files{
+}
+.info{
+  font-family: sigma_font;
+  font-size: 20px;
+}
+.upload{
+
+}
+
+.icon {
+  width: 2em;
+  height: 2em;
+}
+#titulo{
+  color: rgb(0, 0, 0);
+}
+#rep-video{
+  width: 600;
+  height:400;
+}
+#ctrl_audio{
+  margin-top: -60px;
+}

src/public/css/login.css

@@ -0,0 +1,89 @@
+/*important*/
+@font-face {
+    font-family: sigma_font1;
+    src: url("https://sigmac.app/wp-content/uploads/2022/08/SigmaFont-Regular-1.ttf");
+    font-style: normal;
+}
+
+body, html {
+    height: 100;
+}
+
+body{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: sans-serif;
+    background: #2f3542;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+}
+
+
+.form-box {
+    border-radius: 10px;
+    width: 100%;
+    padding: 10px ;
+    background: #191919;;
+    text-align: center;
+    position: relative;
+     transform: translate(5%, 20%);
+}
+.form-box img{
+    width: 100px;
+}
+
+
+.form-title {
+    color:white;
+    /*text-transform: uppercase;*/
+    font-family: sigma_font;
+}
+
+.form-box input[type="text"],
+.form-box input[type="password"],
+.form-box button[type="submit"]{
+     border: 0;
+     background: none;
+     display: block;
+     margin: 20px auto;
+     padding: 14px 10px;
+     text-align: center;
+     border: 2px solid #00ffff;
+     width: 200px;
+     outline: none;
+     color: white;
+     border-radius: 24px;
+      transition: 0.25s;
+}
+
+.form-box input[type="text"]:focus,
+.form-box input[type="password"]:focus {
+  width: 280px;
+   border-color: #ffffff;
+}
+.form-box button[type="submit"] {
+    border: 0;
+    background: #00ffff;
+    display: block;
+    margin: 20px auto;
+    text-align: center;
+    cursor: pointer;
+    border: 2px solid #00ffff;
+    padding: 14px 40px;
+    outline: none;
+    color: black;
+    border-radius: 24px;
+    transition: 00.25s;
+    cursor: pointer;
+
+    font-weight: bold;
+}
+
+.form-box button[type="submit"]:hover {
+    background: none;
+
+}

src/public/css/panel_control.css

@@ -0,0 +1,175 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+html, body {
+  font-family: 'Roboto', 'Helvetica', sans-serif;
+}
+.demo-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 24px;
+}
+.demo-layout .mdl-layout__header .mdl-layout__drawer-button {
+  color: rgba(0, 0, 0, 0.54);
+}
+.mdl-layout__drawer .avatar {
+  margin-bottom: 16px;
+}
+.demo-drawer {
+  border: none;
+}
+/* iOS Safari specific workaround */
+.demo-drawer .mdl-menu__container {
+  z-index: -1;
+}
+.demo-drawer .demo-navigation {
+  z-index: -2;
+}
+/* END iOS Safari specific workaround */
+.demo-drawer .mdl-menu .mdl-menu__item {
+  display: flex;
+  align-items: center;
+}
+.demo-drawer-header {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 16px;
+  height: 151px;
+}
+.demo-avatar-dropdown {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+}
+
+.demo-navigation {
+  flex-grow: 1;
+}
+.demo-layout .demo-navigation .mdl-navigation__link {
+  display: flex !important;
+  flex-direction: row;
+  align-items: center;
+  color: rgba(255, 255, 255, 0.56);
+  font-weight: 500;
+}
+.demo-layout .demo-navigation .mdl-navigation__link:hover {
+  background-color: #00BCD4;
+  color: #37474F;
+}
+.demo-navigation .mdl-navigation__link .material-icons {
+  font-size: 24px;
+  color: rgba(255, 255, 255, 0.56);
+  margin-right: 32px;
+}
+
+.demo-content {
+  max-width: 1080px;
+}
+
+.demo-charts {
+  align-items: center;
+}
+.demo-chart:nth-child(1) {
+  color: #ACEC00;
+}
+.demo-chart:nth-child(2) {
+  color: #00BBD6;
+}
+.demo-chart:nth-child(3) {
+  color: #BA65C9;
+}
+.demo-chart:nth-child(4) {
+  color: #EF3C79;
+}
+.demo-graphs {
+  padding: 16px 32px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+/* TODO: Find a proper solution to have the graphs
+ * not float around outside their container in IE10/11.
+ * Using a browserhacks.com solution for now.
+ */
+_:-ms-input-placeholder, :root .demo-graphs {
+  min-height: 664px;
+}
+_:-ms-input-placeholder, :root .demo-graph {
+  max-height: 300px;
+}
+/* TODO end */
+.demo-graph:nth-child(1) {
+  color: #00b9d8;
+}
+.demo-graph:nth-child(2) {
+  color: #d9006e;
+}
+
+.demo-cards {
+  align-items: flex-start;
+  align-content: flex-start;
+}
+.demo-cards .demo-separator {
+  height: 32px;
+}
+.demo-cards .mdl-card__title.mdl-card__title {
+  color: white;
+  font-size: 24px;
+  font-weight: 400;
+}
+.demo-cards ul {
+  padding: 0;
+}
+.demo-cards h3 {
+  font-size: 1em;
+}
+.demo-updates .mdl-card__title {
+  min-height: 200px;
+  background-image: url('../img/panel_control/dog.png');
+  background-position: 90% 100%;
+  background-repeat: no-repeat;
+}
+.demo-cards .mdl-card__actions a {
+  color: #00BCD4;
+  text-decoration: none;
+}
+
+.demo-options h3 {
+  margin: 0;
+}
+.demo-options .mdl-checkbox__box-outline {
+  border-color: rgba(255, 255, 255, 0.89);
+}
+.demo-options ul {
+  margin: 0;
+  list-style-type: none;
+}
+.demo-options li {
+  margin: 4px 0;
+}
+.demo-options .material-icons {
+  color: rgba(255, 255, 255, 0.89);
+}
+.demo-options .mdl-card__actions {
+  height: 64px;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+}

src/public/css/tipografias.css

@@ -0,0 +1,10 @@
+@font-face {
+    font-family: sigma_font;
+    src: url(../tipografias/sigma_font.otf);
+    font-style: normal;
+}
+@font-face {
+    font-family: sigma_tipografia;
+    src: url(../tipografias/sigma_font.ttf);
+    font-style: normal;
+}

src/public/etiquetas/error.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+  </head>
+  <body>
+    <h1>Error</h1>
+  </body>
+</html>

src/public/etiquetas/etiquetas_bar.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="es" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+      body{
+        background: rgba(0, 0, 0, 0.8);
+      }
+      .etiqueta{
+        background: rgb(255, 255, 255);
+        width: 34mm;
+        height: 25mm;
+      }
+      .titulo{
+        text-align: center;
+      }
+      .codigo{
+        align-items: center;
+      }
+      .codigo img{
+        display:block;
+        margin:auto;
+      }
+      .precio{
+        display: flex;
+        font-size: 18px;
+        margin-top: 4px;
+      }
+      .p1{
+        left: 0px;
+        margin: auto;
+        font-weight: bold;
+      }
+      .p2{
+        right: 0px;
+        margin: auto;
+      }
+      /*1mm = 3,779 527 559 055 1 Pixel [px]
+      34mm = 128px
+      25mm = 94px
+      */
+    </style>
+  </head>
+  <body>
+    <div class="etiqueta">
+      <div class="titulo">Nombre Producto</div>
+      <div class="codigo">
+        <img src="bar_generado.png" alt="Codigo Barra" height="48" width="96"/>
+      </div>
+      <div class="precio">
+        <div class="p1"> $15.23</div>
+        <div class="p2"> $15.23</div>
+      </div>
+    </div>
+  </body>
+</html>

src/public/etiquetas/etiquetas_qr.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="es" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+      body{
+        background: rgba(0, 0, 0, 0.8);
+      }
+      .etiqueta{
+        padding-top: 3px;
+        background: rgb(255, 255, 255);
+        width: 34mm;
+        height: 25mm;
+      }
+      .titulo{
+        text-align: center;
+      }
+      .codigo{
+      }
+      .p1{
+        margin-top: 10px;
+        font-weight: bold;
+      }
+      .p2{
+        margin-top: 10px;
+      }
+      .row{
+        display: flex;
+      }
+
+    </style>
+  </head>
+  <body>
+    <div class="etiqueta">
+        <div class="titulo">Nombre Producto</div>
+        <div class="row">
+        <div class="codigo">
+          <img src="qr_generado.png" alt="Codigo Barra" height="70" width="70"/>
+        </div>
+        <div class="precio">
+          <div class="p1"> $15.23</div>
+          <div class="p2"> $15.23</div>
+        </div>
+        </div>
+    </div>
+  </body>
+</html>

src/public/img/archivo_desc.eps

@@ -0,0 +1,134 @@
+%!PS-Adobe-3.0 EPSF-3.0
+%%Creator: cairo 1.16.0 (https://cairographics.org)
+%%CreationDate: Wed Mar 23 02:33:13 2022
+%%Pages: 1
+%%DocumentData: Clean7Bit
+%%LanguageLevel: 2
+%%BoundingBox: 0 1 4001 4001
+%%EndComments
+%%BeginProlog
+50 dict begin
+/q { gsave } bind def
+/Q { grestore } bind def
+/cm { 6 array astore concat } bind def
+/w { setlinewidth } bind def
+/J { setlinecap } bind def
+/j { setlinejoin } bind def
+/M { setmiterlimit } bind def
+/d { setdash } bind def
+/m { moveto } bind def
+/l { lineto } bind def
+/c { curveto } bind def
+/h { closepath } bind def
+/re { exch dup neg 3 1 roll 5 3 roll moveto 0 rlineto
+      0 exch rlineto 0 rlineto closepath } bind def
+/S { stroke } bind def
+/f { fill } bind def
+/f* { eofill } bind def
+/n { newpath } bind def
+/W { clip } bind def
+/W* { eoclip } bind def
+/BT { } bind def
+/ET { } bind def
+/BDC { mark 3 1 roll /BDC pdfmark } bind def
+/EMC { mark /EMC pdfmark } bind def
+/cairo_store_point { /cairo_point_y exch def /cairo_point_x exch def } def
+/Tj { show currentpoint cairo_store_point } bind def
+/TJ {
+  {
+    dup
+    type /stringtype eq
+    { show } { -0.001 mul 0 cairo_font_matrix dtransform rmoveto } ifelse
+  } forall
+  currentpoint cairo_store_point
+} bind def
+/cairo_selectfont { cairo_font_matrix aload pop pop pop 0 0 6 array astore
+    cairo_font exch selectfont cairo_point_x cairo_point_y moveto } bind def
+/Tf { pop /cairo_font exch def /cairo_font_matrix where
+      { pop cairo_selectfont } if } bind def
+/Td { matrix translate cairo_font_matrix matrix concatmatrix dup
+      /cairo_font_matrix exch def dup 4 get exch 5 get cairo_store_point
+      /cairo_font where { pop cairo_selectfont } if } bind def
+/Tm { 2 copy 8 2 roll 6 array astore /cairo_font_matrix exch def
+      cairo_store_point /cairo_font where { pop cairo_selectfont } if } bind def
+/g { setgray } bind def
+/rg { setrgbcolor } bind def
+/d1 { setcachedevice } bind def
+/cairo_data_source {
+  CairoDataIndex CairoData length lt
+    { CairoData CairoDataIndex get /CairoDataIndex CairoDataIndex 1 add def }
+    { () } ifelse
+} def
+/cairo_flush_ascii85_file { cairo_ascii85_file status { cairo_ascii85_file flushfile } if } def
+/cairo_image { image cairo_flush_ascii85_file } def
+/cairo_imagemask { imagemask cairo_flush_ascii85_file } def
+%%EndProlog
+%%BeginSetup
+%%EndSetup
+%%Page: 1 1
+%%BeginPageSetup
+%%PageBoundingBox: 0 1 4001 4001
+%%EndPageSetup
+q 0 1 4001 4000 rectclip
+1 0 0 -1 0 4001 cm q
+1 g
+0 -0.004 4000.004 4000.004 re f
+0.980392 g
+699.223 273.559 m 699.223 3726.43 l 3300.781 3726.43 l 3300.781 1041.527
+ l 2532.812 273.559 l 699.223 273.559 l f
+0.901961 g
+2533.199 274.57 m 3297.781 1039.129 l 2533.199 1039.129 l 2533.199 274.57
+ l f
+0.737255 0.705882 0.690196 rg
+699.223 2668.32 2601.559 1058.109 re f
+0.501961 g
+714.223 3711.438 m 3285.785 3711.438 l 3285.785 1047.73 l 2526.594 288.562
+ l 714.223 288.562 l h
+3315.785 3741.438 m 684.223 3741.438 l 684.223 258.562 l 2539.035 258.562
+ l 2543.418 262.949 l 3315.785 1035.312 l 3315.785 3741.438 l f
+2548.203 1024.129 m 3261.562 1024.129 l 2548.203 310.766 l h
+3297.785 1054.133 m 2533.211 1054.133 l 2524.926 1054.133 2518.223 1047.43
+ 2518.223 1039.121 c 2518.223 274.566 l 2518.223 268.508 2521.871 263.02
+ 2527.473 260.703 c 2533.074 258.383 2539.523 259.668 2543.816 263.961 c
+ 3308.391 1028.535 l 3312.66 1032.828 3313.969 1039.281 3311.652 1044.879
+ c 3309.309 1050.48 3303.848 1054.133 3297.785 1054.133 c f
+1 g
+1634.059 3197.379 m 1634.059 3309.648 1543.051 3400.672 1430.766 3400.672
+ c 1318.484 3400.672 1227.469 3309.648 1227.469 3197.379 c 1227.469 3085.102
+ 1318.484 2994.082 1430.766 2994.082 c 1543.051 2994.082 1634.059 3085.102
+ 1634.059 3197.379 c f
+2203.305 3197.379 m 2203.305 3309.648 2112.277 3400.668 2000.004 3400.668
+ c 1887.719 3400.668 1796.707 3309.648 1796.707 3197.379 c 1796.707 3085.098
+ 1887.719 2994.078 2000.004 2994.078 c 2112.277 2994.078 2203.305 3085.098
+ 2203.305 3197.379 c f
+2772.531 3197.379 m 2772.531 3309.648 2681.516 3400.668 2569.234 3400.668
+ c 2456.957 3400.668 2365.938 3309.648 2365.938 3197.379 c 2365.938 3085.102
+ 2456.957 2994.078 2569.234 2994.078 c 2681.516 2994.078 2772.531 3085.102
+ 2772.531 3197.379 c f
+0.737255 0.705882 0.690196 rg
+1835.594 2000.172 m 2115.375 2000.172 l 2115.375 2279.945 l 1835.594 2279.945
+ l h
+1858.066 1680.559 m 1873.715 1634.273 1892.777 1594.781 1915.246 1562.105
+ c 1937.703 1529.434 1967.316 1491.324 2004.074 1447.766 c 2033.332 1413.707
+ 2056.148 1384.965 2072.488 1361.457 c 2088.844 1337.988 2102.613 1312.109
+ 2113.852 1283.859 c 2125.074 1255.629 2130.703 1224.812 2130.703 1191.465
+ c 2130.703 1190.438 l 2130.703 1144.152 2119.285 1108.238 2096.488 1082.715
+ c 2073.672 1057.172 2041.512 1044.41 1999.984 1044.41 c 1959.156 1044.41
+ 1927.324 1058.555 1904.527 1086.805 c 1881.707 1115.055 1869.965 1154.703
+ 1869.297 1205.75 c 1869.297 1206.777 l 1579.305 1206.777 l 1579.305 1205.75
+ l 1582.695 1115.902 1601.418 1039.156 1635.465 975.484 c 1669.496 911.855
+ 1717.305 863.355 1778.926 829.992 c 1840.527 796.645 1913.875 779.953 1998.98
+ 779.953 c 2087.461 779.953 2163.379 794.926 2226.672 824.875 c 2289.988
+ 854.844 2338.129 898.242 2371.16 955.078 c 2404.172 1011.914 2420.688 1080.504
+ 2420.688 1160.824 c 2420.688 1161.852 l 2420.688 1214.262 2413.355 1261.574
+ 2398.738 1303.773 c 2384.082 1345.988 2366.062 1382.91 2344.609 1414.559
+ c 2323.176 1446.227 2294.75 1482.812 2259.348 1524.336 c 2226 1564.496 
+2199.945 1598.199 2181.238 1625.422 c 2162.508 1652.664 2146.688 1684.133
+ 2133.746 1719.871 c 2120.809 1755.605 2114.348 1794.918 2114.348 1837.805
+ c 1834.578 1837.805 l 1834.578 1779.273 1842.395 1726.863 1858.066 1680.559
+ c f
+Q Q
+showpage
+%%Trailer
+end
+%%EOF

src/public/img/etiquetas_bar.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="es" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+      body{
+        background: rgba(0, 0, 0, 0.8);
+      }
+      .etiqueta{
+        background: rgb(255, 255, 255);
+        width: 34mm;
+        height: 25mm;
+      }
+      .titulo{
+        text-align: center;
+      }
+      .codigo{
+        align-items: center;
+      }
+      .codigo img{
+        display:block;
+        margin:auto;
+      }
+      .precio{
+        display: flex;
+        font-size: 18px;
+        margin-top: 4px;
+      }
+      .p1{
+        left: 0px;
+        margin: auto;
+        font-weight: bold;
+      }
+      .p2{
+        right: 0px;
+        margin: auto;
+      }
+      /*1mm = 3,779 527 559 055 1 Pixel [px]
+      34mm = 128px
+      25mm = 94px
+      */
+    </style>
+  </head>
+  <body>
+    <div class="etiqueta">
+      <div class="titulo">Nombre Producto</div>
+      <div class="codigo">
+        <img src="bar_generado.png" alt="Codigo Barra" height="48" width="96"/>
+      </div>
+      <div class="precio">
+        <div class="p1"> $15.23</div>
+        <div class="p2"> $15.23</div>
+      </div>
+    </div>
+  </body>
+</html>

src/public/img/favicon_sigma/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/public/js/consulta_sri.js

@@ -0,0 +1,26 @@
+function ConsultaContribuyente(numeroruc){
+  		$.ajax({
+  		type:'POST',
+  		url: 'http://www.ecuadorlegalonline.com/modulo/sri/consulta-ruc/ruc.api.php',
+  		data: {
+  			func:'GETDATA',
+  			ruc:numeroruc
+  		},
+  		success: function(data){
+  			LoadingData(0);
+  			if(data!=null){
+  				var dataJson = data;
+  				if (dataJson.consolidado==null){
+  					ShowError('La búsqueda no generó resultados.');
+  				}else{
+            console.log(dataJson.consolidado);
+  				}
+  			}
+  		},
+  		error : function(XMLHttpRequest, textStatus, errorThrown) {
+  			var xdata='';
+  			LoadingData(0);
+  		},
+  		});
+
+}

src/public/js/login.js

@@ -0,0 +1 @@
+var 

src/public/plantilla_mail/fact_mail.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+  </head>
+  <body>
+    <div><div class="zVKDv" has-hovered="true" style="height: 71px; width: 100%;"><div class="UKD6M"><button type="button" class="ms-Button ms-Button--icon oD_UD root-260" title="Mostrar tamaño original" aria-label="Mostrar tamaño original" data-is-focusable="true"><span class="ms-Button-flexContainer flexContainer-163" data-automationid="splitbuttonprimary"><i data-icon-name="FullScreen" aria-hidden="true" class="ms-Icon root-89 css-171 ms-Button-icon icon-165" style="font-family: controlIcons;"></i></span></button></div><table bgcolor="#F2F2F2" width="100%" border="0" cellspacing="0" cellpadding="0" id="x_x_x_backgroundTable" min-scale="0.6803571428571429" style="transform: scale(0.680357, 0.680357); transform-origin: left top;">
+<tbody><tr>
+<td><table align="center" width="560" height="100" border="0" cellspacing="0" cellpadding="0">
+<tbody><tr height="100">
+<td width="220" style="background-color:white;margin:0;padding:0;"><img data-imagetype="AttachmentByCid" originalsrc="cid:imagen" data-custom="AQMkADAwATNiZmYAZC04ZDAzLWQxZWEtMDACLTAwCgBGAAAD7sIy94NUt0G8pCf4coAzaAcAa%2FQopPjR7kS9Ji6%2BpeVzIgAAAgEMAAAAa%2FQopPjR7kS9Ji6%2BpeVzIgAFV%2BLlhAAAAAESABAAqqehs%2BLGR0uCie0snY3fKg%3D%3D" naturalheight="0" naturalwidth="0" src="https://attachment.outlook.live.net/owa/MSA%3Apablinux%40hotmail.es/service.svc/s/GetAttachmentThumbnail?id=AQMkADAwATNiZmYAZC04ZDAzLWQxZWEtMDACLTAwCgBGAAAD7sIy94NUt0G8pCf4coAzaAcAa%2FQopPjR7kS9Ji6%2BpeVzIgAAAgEMAAAAa%2FQopPjR7kS9Ji6%2BpeVzIgAFV%2BLlhAAAAAESABAAqqehs%2BLGR0uCie0snY3fKg%3D%3D&amp;thumbnailType=2&amp;isc=1&amp;token=eyJhbGciOiJSUzI1NiIsImtpZCI6IkZBRDY1NDI2MkM2QUYyOTYxQUExRThDQUI3OEZGMUIyNzBFNzA3RTkiLCJ0eXAiOiJKV1QiLCJ4NXQiOiItdFpVSml4cThwWWFvZWpLdDRfeHNuRG5CLWsifQ.eyJvcmlnaW4iOiJodHRwczovL291dGxvb2subGl2ZS5jb20iLCJ1YyI6IjVhNzJlYWZlNjQ4OTRkNTFhMGRkMTZhMWM0MmI2ZDZiIiwidmVyIjoiRXhjaGFuZ2UuQ2FsbGJhY2suVjEiLCJhcHBjdHhzZW5kZXIiOiJPd2FEb3dubG9hZEA4NGRmOWU3Zi1lOWY2LTQwYWYtYjQzNS1hYWFhYWFhYWFhYWEiLCJpc3NyaW5nIjoiV1ciLCJhcHBjdHgiOiJ7XCJtc2V4Y2hwcm90XCI6XCJvd2FcIixcInB1aWRcIjpcIjEwNTU1MjA2NDM2MDA4NzRcIixcInNjb3BlXCI6XCJPd2FEb3dubG9hZFwiLFwib2lkXCI6XCIwMDAzYmZmZC04ZDAzLWQxZWEtMDAwMC0wMDAwMDAwMDAwMDBcIixcInByaW1hcnlzaWRcIjpcIlMtMS0yODI3LTI0NTc1Ny0yMzY1ODM3ODAyXCJ9IiwibmJmIjoxNjU2NzgwNTc0LCJleHAiOjE2NTY3ODExNzQsImlzcyI6IjAwMDAwMDAyLTAwMDAtMGZmMS1jZTAwLTAwMDAwMDAwMDAwMEA4NGRmOWU3Zi1lOWY2LTQwYWYtYjQzNS1hYWFhYWFhYWFhYWEiLCJhdWQiOiIwMDAwMDAwMi0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvYXR0YWNobWVudC5vdXRsb29rLmxpdmUubmV0QDg0ZGY5ZTdmLWU5ZjYtNDBhZi1iNDM1LWFhYWFhYWFhYWFhYSIsImhhcHAiOiJvd2EifQ.dZP2C6gP76e1DnzjuA_H6vuaDyxqjdsrqOAzJvome9pD-vj2MHzTaxM8rvBXm1sSsxO4lX1hJW882kfj0mVnPa3-G1d1Tui76W_Sb5SJq2_uE98qgGPm7WlotCyCgMVO0thYhkJ0QHnrRF5R2PabBkUtcqRbz0ArH5CUP_4eY2ymRr6HR_ocoBSOu1Kvp8spxkkX7IVPmOZsF2DBWH-xW78ruuuJzhyDuSwb54EvGOiTielcifd1Tw_whFsvKlzB151185uCJVyfDVZOVHefNO05D2UMhsiCwm-PcesogJTG9NCKV7WuNRbBxmtMec_cZzPS6gfaVzzaQ_RmEENuVQ&amp;X-OWA-CANARY=l8M-M4sJM0ChCZ29k_7hemCpZ0hLXNoYv2OTV6bXHhR-a_GOTuy3W3H2DL4y_sRSz_Y75dHQX6I.&amp;owa=outlook.live.com&amp;scriptVer=20220617005.06&amp;animation=true" width="220" height="100" crossorigin="use-credentials" style="cursor: pointer; min-height: auto; min-width: auto;" class="ADIae"></td>
+<td bgcolor="#295289" width="340" height="100" style="color:white;font-size:20px;font-family:Arial,sans-serif;text-align:right;padding-right:15px;line-height:10px;">Notificación Electrónica </td></tr></tbody></table></td></tr></tbody></table></div><div class="zVKDv" style="height: 324px; width: 100%;"><div class="UKD6M"><button type="button" class="ms-Button ms-Button--icon oD_UD root-260" title="Mostrar tamaño original" aria-label="Mostrar tamaño original" data-is-focusable="true"><span class="ms-Button-flexContainer flexContainer-163" data-automationid="splitbuttonprimary"><i data-icon-name="FullScreen" aria-hidden="true" class="ms-Icon root-89 css-171 ms-Button-icon icon-165" style="font-family: controlIcons;"></i></span></button></div><table bgcolor="#F2F2F2" width="100%" border="0" cellspacing="0" cellpadding="0" id="x_x_x_backgroundTable" min-scale="0.6637630662020906" style="transform: scale(0.663763, 0.663763); transform-origin: left top;">
+<tbody><tr>
+<td><table align="center" width="550" border="0" cellspacing="0" cellpadding="0">
+<tbody><tr>
+<td bgcolor="#F6F4F5" width="100%" style="padding:7px;"><table align="center" width="550" border="0" cellspacing="0" cellpadding="0">
+<tbody><tr>
+<td align="left" bgcolor="white" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:left;padding-top:10px;padding-right:30px;padding-left:30px;line-height:22px;"><strong>Fecha: lunes, 27 de junio de 2022 19:02:31 </strong></td></tr>
+<tr>
+<td align="left" bgcolor="white" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:left;padding-top:10px;padding-right:30px;padding-left:30px;line-height:16px;"><strong>Estimado/a:</strong> &nbsp; ZAMBRANO RENDON KLEBER ADALBERTO()</td></tr>
+<tr>
+<td align="left" bgcolor="white" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:justify;padding-top:10px;padding-right:30px;padding-left:30px;line-height:22px;">Su FACTURA ELECTRÓNICA se ha realizado con éxito.</td></tr>
+<tr>
+<td align="left" bgcolor="white" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:left;padding-top:0;padding-right:30px;padding-left:30px;line-height:22px;"><table align="center" width="500" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border:1px solid #F6F4F5;">
+<tbody><tr>
+<td align="left" bgcolor="#F6F4F5" colspan="2" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:center;padding:10px 40px;line-height:16px;"><strong>DETALLE DE LA FACTURA ELECTRÓNICA</strong> </td></tr>
+<tr>
+<td align="left" bgcolor="white" width="40%" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:right;padding-top:10px;padding-right:3px;padding-left:20px;line-height:16px;"><strong>Numero de Documento:</strong> </td>
+<td align="left" bgcolor="white" width="60%" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:left;padding-top:10px;padding-right:20px;padding-left:3px;line-height:16px;">002-002-000002011</td></tr>
+<tr>
+<td align="left" bgcolor="white" width="40%" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:right;padding-top:10px;padding-right:3px;padding-left:20px;line-height:16px;"><strong>Clave de Acceso:</strong> </td>
+<td align="left" bgcolor="white" width="60%" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:left;padding-top:10px;padding-right:20px;padding-left:3px;line-height:16px;">2706202201171484698500120020020000020110000246219</td></tr>
+<tr>
+<td align="right" bgcolor="white" width="40%" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:right;padding-top:10px;padding-right:3px;padding-left:20px;line-height:16px;"><strong>Valor: </strong></td>
+<td align="left" bgcolor="white" width="60%" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:left;padding-top:10px;padding-right:20px;padding-left:3px;line-height:16px;">$&nbsp;48.75</td></tr></tbody></table></td></tr>
+<tr>
+<td align="left" bgcolor="white" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:left;padding-top:10px;padding-right:30px;padding-left:30px;line-height:16px;"></td></tr>
+<tr>
+<td align="left" bgcolor="white" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:left;padding-top:10px;padding-right:30px;padding-left:30px;line-height:22px;"><table align="center" width="500" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border:1px solid #F6F4F5;">
+<tbody><tr>
+<td align="left" bgcolor="#F6F4F5" colspan="2" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:center;padding:10px 40px;line-height:16px;"><strong>INFORMACIÓN ADICIONAL </strong></td></tr>
+<tr>
+<td align="left" bgcolor="white" width="40%" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:right;padding-top:10px;padding-right:3px;padding-left:20px;line-height:16px;"><strong>Vendedor:</strong> </td>
+<td align="left" bgcolor="white" width="60%" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:left;padding-top:10px;padding-right:20px;padding-left:3px;line-height:16px;">OBANDO LOAIZA ELIZABETH DEL ROCIO(ELIZABETH) </td></tr>
+<tr>
+<td align="left" bgcolor="white" width="40%" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:right;padding-top:10px;padding-right:3px;padding-left:20px;line-height:16px;"><strong>Email:</strong> </td>
+<td align="left" bgcolor="white" width="60%" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:left;padding-top:10px;padding-right:20px;padding-left:3px;line-height:16px;">malicha_santo@hotmail.com</td></tr>
+<tr>
+<td align="right" bgcolor="white" width="40%" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:right;padding-top:10px;padding-right:3px;padding-left:20px;line-height:16px;"><strong>Teléfono: </strong></td>
+<td align="left" bgcolor="white" width="60%" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:left;padding-top:10px;padding-right:20px;padding-left:3px;line-height:16px;">0992186472 </td></tr></tbody></table></td></tr>
+<tr>
+<td align="left" bgcolor="white" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:left;padding-top:10px;padding-right:30px;padding-left:30px;line-height:16px;">Gracias por utilizar nuestro servicio<br aria-hidden="true">
+<br aria-hidden="true">
+Atentamente,<br aria-hidden="true">
+<strong>DISBAR</strong> </td></tr>
+<tr>
+<td align="left" bgcolor="white" style="color:#333333;font-size:12px;font-family:Arial,sans-serif;text-align:left;padding-top:10px;padding-right:30px;padding-left:30px;line-height:16px;">Adjunto encontrarás el <strong>XML</strong> y <strong>RIDE</strong> que te servirá para declaración tributaria </td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></div><div class="zVKDv" style="height: 41px; width: 100%;"><div class="UKD6M"><button type="button" class="ms-Button ms-Button--icon oD_UD root-260" title="Mostrar tamaño original" aria-label="Mostrar tamaño original" data-is-focusable="true"><span class="ms-Button-flexContainer flexContainer-163" data-automationid="splitbuttonprimary"><i data-icon-name="FullScreen" aria-hidden="true" class="ms-Icon root-89 css-171 ms-Button-icon icon-165" style="font-family: controlIcons;"></i></span></button></div><table bgcolor="#F2F2F2" width="100%" border="0" cellspacing="0" cellpadding="0" id="x_x_x_backgroundTable" min-scale="0.6803571428571429" style="transform: scale(0.680357, 0.680357); transform-origin: left top;">
+<tbody><tr>
+<td><table align="center" width="550" border="0" cellspacing="0" cellpadding="0">
+<tbody><tr>
+<td width="100%"><table align="center" bgcolor="#0F265C" width="560" border="0" cellspacing="0" cellpadding="0">
+<tbody><tr>
+<td bgcolor="#295289" style="color:white;font-size:9px;font-family:Arial,sans-serif;text-align:justify;padding:10px 20px;line-height:10px;"><strong>DISBAR</strong> <br aria-hidden="true">
+<br aria-hidden="true">
+<strong>Dirección (Matriz):</strong> Km. 3 Recinto San Pablo de Chila, Via a San Jacinto del Búa s/n Margen Derecho.<strong> | Sucursal: </strong><strong>| Teléfono: </strong>Contact: 0997599620 / E-mail: proaluc.jpo@gmail.com</td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></div><div class="zVKDv" style="height: 40px; width: 100%;"><div class="UKD6M"><button type="button" class="ms-Button ms-Button--icon oD_UD root-260" title="Mostrar tamaño original" aria-label="Mostrar tamaño original" data-is-focusable="true"><span class="ms-Button-flexContainer flexContainer-163" data-automationid="splitbuttonprimary"><i data-icon-name="FullScreen" aria-hidden="true" class="ms-Icon root-89 css-171 ms-Button-icon icon-165" style="font-family: controlIcons;"></i></span></button></div><table bgcolor="#F2F2F2" width="100%" border="0" cellspacing="0" cellpadding="0" id="x_x_x_backgroundTable" min-scale="0.6803571428571429" style="transform: scale(0.680357, 0.680357); transform-origin: left top;">
+<tbody><tr>
+<td><table align="center" width="550" border="0" cellspacing="0" cellpadding="0">
+<tbody><tr>
+<td width="100%"><table align="center" bgcolor="#F2F2F2" width="560" border="0" cellspacing="0" cellpadding="0"></table></td></tr></tbody></table></td></tr></tbody></table></div><div class="zVKDv" style="height: 40px; width: 100%;"><div class="UKD6M"><button type="button" class="ms-Button ms-Button--icon oD_UD root-260" title="Mostrar tamaño original" aria-label="Mostrar tamaño original" data-is-focusable="true"><span class="ms-Button-flexContainer flexContainer-163" data-automationid="splitbuttonprimary"><i data-icon-name="FullScreen" aria-hidden="true" class="ms-Icon root-89 css-171 ms-Button-icon icon-165" style="font-family: controlIcons;"></i></span></button></div><table bgcolor="#F2F2F2" width="100%" border="0" cellspacing="0" cellpadding="0" id="x_x_x_backgroundTable" min-scale="0.6803571428571429" style="transform: scale(0.680357, 0.680357); transform-origin: left top;">
+<tbody><tr>
+<td><table align="center" width="550" border="0" cellspacing="0" cellpadding="0">
+<tbody><tr>
+<td width="100%"><table align="center" bgcolor="#0F265C" width="560" border="0" cellspacing="0" cellpadding="0">
+<tbody><tr>
+<td align="center">
+<div><img data-imagetype="External" src="https://anfibius.net/extras/publicidadAnfibius.jpg" width="560" border="0" style="display:block;text-decoration:none;border-style:none;outline:none;"> </div></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></div><div class="zVKDv" style="height: 40px; width: 100%;"><div class="UKD6M"><button type="button" class="ms-Button ms-Button--icon oD_UD root-260" title="Mostrar tamaño original" aria-label="Mostrar tamaño original" data-is-focusable="true"><span class="ms-Button-flexContainer flexContainer-163" data-automationid="splitbuttonprimary"><i data-icon-name="FullScreen" aria-hidden="true" class="ms-Icon root-89 css-171 ms-Button-icon icon-165" style="font-family: controlIcons;"></i></span></button></div><table bgcolor="#F2F2F2" width="100%" border="0" cellspacing="0" cellpadding="0" id="x_x_x_backgroundTable" min-scale="0.6927272727272727" style="transform: scale(0.692727, 0.692727); transform-origin: left top;">
+<tbody><tr>
+<td><table align="center" width="550" border="0" cellspacing="0" cellpadding="0">
+<tbody><tr>
+<td width="100%"><table align="center" bgcolor="#F2F2F2" width="550" border="0" cellspacing="0" cellpadding="0">
+<tbody><tr>
+<td bgcolor="#F6F4F5" style="color:#67554F;font-size:9px;font-family:Arial,sans-serif;text-align:center;padding:10px;line-height:10px;"><strong>© Copyright 2020 Grupo Anfibius </strong></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></div></div>
+  </body>
+</html>

src/public/plantilla_mail/plantilla_mail.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="es" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <!-- CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
+    <title></title>
+    <style type="text/css">
+      #main{
+      }
+    </style>
+  </head>
+  <body>
+    <main class="card container-fluid">
+
+      <header class="container-fluid p-4 bg-primary text-white text-center row">
+        <div class="col col-3">Logo</div>
+        <div class="h3 col col-9">Notificación Electrónica</div>
+      </header>
+
+      <content>
+
+        <div class="info_cliente row">
+          <div class="col-3">Fecha:</div><div class="col-9">lunes, 27 de junio de 2022 19:02:31</div>
+          <div class="col-3">Estimado/a:</div><div class="col-9">ZAMBRANO RENDON KLEBER ADALBERTO()</div>
+        </div>
+
+        <div class="info_detalle card">
+          <div class="container-fluid p-2 bg-secondary text-white text-center">DETALLE DE LA FACTURA ELECTRÓNICA</div>
+          <div class="data row">
+            <div class="col col-3">Documento N#:</div><div class="col col-9">002-002-000002011</div>
+            <div class="col col-3">Clave de Acceso:</div><div class="col col-9">2706202201171484698500120020020000020110000246219</div>
+            <div class="col col-3">Valor Documento:</div><div class="col col-9">$ 48.75</div>
+          </div>
+        </div>
+
+        <div class="info_adicional card">
+          <div class="container-fluid p-2 bg-secondary text-white text-center">INFORMACIÓN ADICIONAL</div>
+          <div class="data row">
+            <div class="col-3">Vendedor:</div><div class="col-9">OBANDO LOAIZA ELIZABETH DEL ROCIO(ELIZABETH)</div>
+            <div class="col-3">Email:</div><div class="col-9">malicha_santo@hotmail.com</div>
+            <div class="col-3">Teléfono:</div><div class="col-9"><a href="tel:+593961002767">+593961002767</a></div>
+          </div>
+        </div>
+
+        <div class="">
+          <div class="">Gracias por utilizar nuestro servicio</div>
+          <div>Atentamente,</div>
+          <div>Empresa</div>
+          <div>Adjunto encontrarás el XML y RIDE que te servirá para declaración tributaria</div>
+        </div>
+
+        <div class="container-fluid p-2 bg-secondary text-white">
+          <div class="h4">Empresa</div>
+          <div class="">Dirección (Matriz): Km. 3 Recinto San Pablo de Chila, Via a San Jacinto del Búa s/n Margen Derecho. | Sucursal: | Teléfono: Contact: 0997599620 / E-mail: proaluc.jpo@gmail.com</div>
+        </div>
+      </content>
+      <footer class="container-fluid p-2 bg-primary text-white text-center">
+        Documento generado por:
+        <a href="http://sigmac.app" class="text-muted">
+          <img src="https://xsystem.ddns.net/img/LOGO_SIGMA_TEXT.png" alt="Logo" width="72">
+        </a>
+        <span></span> |
+        <strong>  Telef: </strong><a href="tel:+593961002767" class="text-white"> +593961002767 </a>
+        <strong>  Email: </strong><a href="mailto:info@sigmac.app" class="text-white"> info@sigmac.app</a>
+      </footer>
+    </main>
+  </body>
+</html>

src/rutas/rt_Generales.js

@@ -0,0 +1,14 @@
+const express = require('express');
+const rutas = express.Router();
+
+const controlador_init = require('../controladores/controlador_General');
+//ver listar items /formulario/:varNomCampoDb, controlador clase.funcion
+rutas.get('/', controlador_init.panel_login);
+
+rutas.get('/panel', controlador_init.panel);
+rutas.get('/historial', controlador_init.historial);
+rutas.get('/tienda_canje', controlador_init.tienda_canje);
+rutas.get('/perfil', controlador_init.perfil);
+rutas.get('/escanear', controlador_init.escanear);
+
+module.exports = rutas;

src/views/escanear.ejs

@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="es" class="h-full">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Escanear QR - SIGMA</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Librería para el escaneo de QR -->
+    <script src="https://unpkg.com/html5-qrcode"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'media',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#4ade80',
+                        'surface-dark': '#0d1b10',
+                        'background-dark': '#050a06',
+                    },
+                    fontFamily: {
+                        sans: ['Outfit', 'sans-serif'],
+                    },
+                }
+            }
+        }
+    </script>
+    <style>
+        .scan-frame {
+            box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
+        }
+
+        .scan-line {
+            height: 2px;
+            background: linear-gradient(to right, transparent, #4ade80, transparent);
+            animation: scan 2s linear infinite;
+        }
+
+        @keyframes scan {
+            0% {
+                top: 0;
+            }
+
+            50% {
+                top: 100%;
+            }
+
+            100% {
+                top: 0;
+            }
+        }
+
+        #reader__dashboard {
+            display: none;
+        }
+
+        #reader {
+            border: none !important;
+        }
+
+        video {
+            object-fit: cover !important;
+            width: 100% !important;
+            height: 100% !important;
+        }
+    </style>
+</head>
+
+<body class="bg-black text-white h-screen overflow-hidden flex flex-col font-sans">
+
+    <!-- Header / Barra Superior -->
+    <header
+        class="absolute top-0 left-0 right-0 z-50 flex items-center justify-between p-6 bg-gradient-to-b from-black/80 to-transparent">
+        <a href="javascript:history.back()"
+            class="p-2 rounded-full bg-black/20 backdrop-blur-md border border-white/10 hover:bg-white/10 transition-colors">
+            <span class="material-symbols-outlined text-white">close</span>
+        </a>
+        <div class="flex flex-col items-center">
+            <h1 class="text-lg font-bold tracking-tight">Escáner SIGMA</h1>
+            <p class="text-[10px] text-primary font-bold uppercase tracking-[0.2em]">Cámara Activa</p>
+        </div>
+        <button id="torch-button"
+            class="p-2 rounded-full bg-black/20 backdrop-blur-md border border-white/10 hover:bg-white/10 transition-colors">
+            <span class="material-symbols-outlined text-white">flashlight_on</span>
+        </button>
+    </header>
+
+    <!-- Visor de Cámara -->
+    <div class="relative flex-1 flex items-center justify-center bg-zinc-900 overflow-hidden">
+        <div id="reader" class="w-full h-full"></div>
+
+        <!-- Overlay de Escaneo (Diseño Nativo) -->
+        <div class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center">
+            <div class="relative w-72 h-72 border-2 border-primary/30 rounded-[3rem] scan-frame">
+                <!-- Esquinas del Escáner -->
+                <div class="absolute -top-1 -left-1 w-12 h-12 border-t-4 border-l-4 border-primary rounded-tl-3xl">
+                </div>
+                <div class="absolute -top-1 -right-1 w-12 h-12 border-t-4 border-r-4 border-primary rounded-tr-3xl">
+                </div>
+                <div class="absolute -bottom-1 -left-1 w-12 h-12 border-b-4 border-l-4 border-primary rounded-bl-3xl">
+                </div>
+                <div class="absolute -bottom-1 -right-1 w-12 h-12 border-b-4 border-r-4 border-primary rounded-br-3xl">
+                </div>
+
+                <!-- Línea de Escaneo Animada -->
+                <div class="scan-line absolute left-4 right-4"></div>
+            </div>
+        </div>
+
+        <div class="absolute bottom-24 left-0 right-0 z-20 px-8 text-center">
+            <p
+                class="text-sm text-white/80 font-medium px-4 py-2 bg-black/40 backdrop-blur-xl rounded-full inline-block border border-white/5">
+                Ubica el código QR promocional dentro del cuadro
+            </p>
+        </div>
+    </div>
+
+    <!-- Controles Inferiores -->
+    <footer
+        class="absolute bottom-0 left-0 right-0 z-50 p-8 flex items-center justify-around bg-gradient-to-t from-black/80 to-transparent">
+        <button class="flex flex-col items-center gap-2 group">
+            <div
+                class="w-14 h-14 rounded-full bg-white/10 backdrop-blur-md border border-white/10 flex items-center justify-center group-hover:bg-white/20 transition-all">
+                <span class="material-symbols-outlined text-2xl">image</span>
+            </div>
+            <span class="text-[10px] uppercase font-bold tracking-wider text-white/60">Galería</span>
+        </button>
+
+        <div class="w-20 h-20 rounded-full border-4 border-primary/20 p-1">
+            <div
+                class="w-full h-full rounded-full bg-primary flex items-center justify-center shadow-[0_0_30px_rgba(74,222,128,0.5)]">
+                <span class="material-symbols-outlined text-background-dark text-3xl font-bold">qr_code_scanner</span>
+            </div>
+        </div>
+
+        <button class="flex flex-col items-center gap-2 group">
+            <div
+                class="w-14 h-14 rounded-full bg-white/10 backdrop-blur-md border border-white/10 flex items-center justify-center group-hover:bg-white/20 transition-all">
+                <span class="material-symbols-outlined text-2xl">sync</span>
+            </div>
+            <span class="text-[10px] uppercase font-bold tracking-wider text-white/60">Girar</span>
+        </button>
+    </footer>
+
+    <!-- Script de Escaneo -->
+    <script>
+        function onScanSuccess(decodedText, decodedResult) {
+            // Detener el escáner para evitar múltiples detecciones
+            html5QrCode.stop().then((ignore) => {
+                // Notificación visual de éxito (Vibración si es posible)
+                if (navigator.vibrate) navigator.vibrate(200);
+
+                alert("¡Código Escaneado con éxito!: " + decodedText);
+
+                // Redirigir a la tienda o panel con el código (simulado)
+                window.location.href = "/tienda_canje?promo=" + encodeURIComponent(decodedText);
+            }).catch((err) => {
+                console.error("Error al detener el escáner:", err);
+            });
+        }
+
+        const html5QrCode = new Html5Qrcode("reader");
+        const config = { fps: 10, qrbox: { width: 280, height: 280 } };
+
+        // Intentar iniciar con la cámara trasera por defecto
+        html5QrCode.start({ facingMode: "environment" }, config, onScanSuccess)
+            .catch(err => {
+                console.error("Error al iniciar la cámara:", err);
+                alert("No se pudo acceder a la cámara. Por favor asegúrate de dar los permisos necesarios.");
+            });
+
+        // Botón de linterna (mockup ya que depende de soporte de navegador específico)
+        document.getElementById('torch-button').addEventListener('click', () => {
+            alert("La linterna se activará en dispositivos compatibles.");
+        });
+    </script>
+</body>
+
+</html>

src/views/historial.ejs

@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+
+<html class="light" lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>Historial de Transacciones</title>
+    <link href="https://fonts.googleapis.com" rel="preconnect" />
+    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap"
+        rel="stylesheet" />
+    <link
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
+        rel="stylesheet" />
+    <link
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
+        rel="stylesheet" />
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        "primary": "#13ec37",
+                        "background-light": "#f6f8f6",
+                        "background-dark": "#102213",
+                        "surface-light": "#ffffff",
+                        "surface-dark": "#1a2e1d", // slightly lighter than bg-dark
+                    },
+                    fontFamily: {
+                        "display": ["Inter", "sans-serif"]
+                    },
+                    borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "full": "9999px" },
+                },
+            },
+        }
+    </script>
+    <style>
+        .no-scrollbar::-webkit-scrollbar {
+            display: none;
+        }
+
+        .no-scrollbar {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+    </style>
+    <style>
+        body {
+            min-height: max(884px, 100dvh);
+        }
+    </style>
+</head>
+
+<body
+    class="bg-background-light dark:bg-background-dark font-display text-gray-900 dark:text-gray-100 transition-colors duration-200 lg:bg-gray-100 lg:dark:bg-black/20 lg:py-10">
+    <div
+        class="relative flex h-full min-h-screen w-full flex-col max-w-7xl mx-auto overflow-hidden bg-background-light dark:bg-background-dark shadow-2xl lg:rounded-[2.5rem] lg:shadow-2xl lg:border lg:border-gray-200 lg:dark:border-white/5 lg:min-h-0 lg:h-auto lg:max-w-5xl">
+        <!-- TopAppBar -->
+        <header
+            class="sticky top-0 z-50 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur-md px-4 py-3 flex items-center justify-between border-b border-gray-100 dark:border-gray-800/50">
+            <button
+                class="flex size-10 items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-gray-900 dark:text-white">
+                <span class="material-symbols-outlined text-[24px]">arrow_back</span>
+            </button>
+            <h1 class="text-lg font-bold tracking-tight text-gray-900 dark:text-white">Historial</h1>
+            <button
+                class="flex size-10 items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-gray-900 dark:text-white">
+                <span class="material-symbols-outlined text-[24px]">more_horiz</span>
+            </button>
+        </header>
+        <!-- ProfileStats (Summary Card) -->
+        <div class="px-4 py-6">
+            <div
+                class="relative overflow-hidden rounded-2xl bg-surface-light dark:bg-surface-dark shadow-sm border border-gray-100 dark:border-gray-800 p-6 flex flex-col items-center justify-center gap-2 md:max-w-md md:mx-auto">
+                <!-- Abstract Pattern Background -->
+                <div class="absolute -right-6 -top-6 h-32 w-32 rounded-full bg-primary/10 blur-2xl"></div>
+                <div class="absolute -left-6 -bottom-6 h-32 w-32 rounded-full bg-primary/5 blur-2xl"></div>
+                <span
+                    class="relative z-10 text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Balance
+                    Total</span>
+                <div class="relative z-10 flex items-baseline gap-1">
+                    <span class="text-4xl font-bold text-gray-900 dark:text-white tracking-tight">2,450</span>
+                    <span class="text-lg font-medium text-primary">pts</span>
+                </div>
+                <div class="relative z-10 mt-2 flex items-center gap-1 rounded-full bg-primary/10 px-3 py-1">
+                    <span
+                        class="material-symbols-outlined text-[16px] text-green-700 dark:text-primary">trending_up</span>
+                    <span class="text-xs font-semibold text-green-700 dark:text-primary">+340 este mes</span>
+                </div>
+            </div>
+        </div>
+        <!-- Filter Chips -->
+        <div class="sticky top-[60px] z-40 bg-background-light dark:bg-background-dark pb-2">
+            <div class="flex gap-3 px-4 overflow-x-auto no-scrollbar pb-2 md:justify-center">
+                <button
+                    class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-gray-900 dark:bg-white px-5 transition-transform active:scale-95">
+                    <span class="text-sm font-semibold text-white dark:text-gray-900">Todos</span>
+                </button>
+                <button
+                    class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-white dark:bg-surface-dark border border-gray-200 dark:border-gray-700 px-5 transition-transform active:scale-95 hover:bg-gray-50 dark:hover:bg-gray-800">
+                    <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Ganados</span>
+                </button>
+                <button
+                    class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-white dark:bg-surface-dark border border-gray-200 dark:border-gray-700 px-5 transition-transform active:scale-95 hover:bg-gray-50 dark:hover:bg-gray-800">
+                    <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Canjeados</span>
+                </button>
+            </div>
+        </div>
+        <!-- Scrollable List Area -->
+        <div class="flex-1 flex flex-col pb-8 md:max-w-4xl md:mx-auto w-full">
+            <!-- Section: Hoy -->
+            <div class="mt-2">
+                <h4 class="px-5 py-3 text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">Hoy
+                </h4>
+                <!-- ListItem: Earned -->
+                <div
+                    class="group flex items-center gap-4 px-5 py-4 hover:bg-gray-50 dark:hover:bg-surface-dark/50 transition-colors border-b border-gray-100 dark:border-gray-800/50 last:border-0">
+                    <div
+                        class="relative flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/20 dark:bg-primary/10 text-green-800 dark:text-primary">
+                        <span class="material-symbols-outlined text-[24px]">local_cafe</span>
+                    </div>
+                    <div class="flex flex-1 flex-col justify-center">
+                        <p class="line-clamp-1 text-base font-semibold text-gray-900 dark:text-white">Starbucks Coffee
+                        </p>
+                        <p class="line-clamp-1 text-sm text-gray-500 dark:text-gray-400">10:30 AM · Compra</p>
+                    </div>
+                    <div class="shrink-0 text-right">
+                        <p class="text-base font-bold text-green-600 dark:text-primary">+120</p>
+                    </div>
+                </div>
+                <!-- ListItem: Earned -->
+                <div
+                    class="group flex items-center gap-4 px-5 py-4 hover:bg-gray-50 dark:hover:bg-surface-dark/50 transition-colors border-b border-gray-100 dark:border-gray-800/50 last:border-0">
+                    <div
+                        class="relative flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/20 dark:bg-primary/10 text-green-800 dark:text-primary">
+                        <span class="material-symbols-outlined text-[24px]">shopping_bag</span>
+                    </div>
+                    <div class="flex flex-1 flex-col justify-center">
+                        <p class="line-clamp-1 text-base font-semibold text-gray-900 dark:text-white">Zara Fashion</p>
+                        <p class="line-clamp-1 text-sm text-gray-500 dark:text-gray-400">02:15 PM · Ropa</p>
+                    </div>
+                    <div class="shrink-0 text-right">
+                        <p class="text-base font-bold text-green-600 dark:text-primary">+350</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Section: Ayer -->
+            <div class="mt-2">
+                <h4 class="px-5 py-3 text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">Ayer
+                </h4>
+                <!-- ListItem: Redeemed (Negative) -->
+                <div
+                    class="group flex items-center gap-4 px-5 py-4 hover:bg-gray-50 dark:hover:bg-surface-dark/50 transition-colors border-b border-gray-100 dark:border-gray-800/50 last:border-0">
+                    <div
+                        class="relative flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400">
+                        <span class="material-symbols-outlined text-[24px]">confirmation_number</span>
+                    </div>
+                    <div class="flex flex-1 flex-col justify-center">
+                        <p class="line-clamp-1 text-base font-semibold text-gray-900 dark:text-white">Cupón de Descuento
+                        </p>
+                        <p class="line-clamp-1 text-sm text-gray-500 dark:text-gray-400">06:45 PM · Canje</p>
+                    </div>
+                    <div class="shrink-0 text-right">
+                        <p class="text-base font-medium text-gray-500 dark:text-gray-400">-500</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Section: 12 Octubre -->
+            <div class="mt-2">
+                <h4 class="px-5 py-3 text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">12
+                    Octubre</h4>
+                <!-- ListItem: Earned -->
+                <div
+                    class="group flex items-center gap-4 px-5 py-4 hover:bg-gray-50 dark:hover:bg-surface-dark/50 transition-colors border-b border-gray-100 dark:border-gray-800/50 last:border-0">
+                    <div
+                        class="relative flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/20 dark:bg-primary/10 text-green-800 dark:text-primary">
+                        <span class="material-symbols-outlined text-[24px]">local_gas_station</span>
+                    </div>
+                    <div class="flex flex-1 flex-col justify-center">
+                        <p class="line-clamp-1 text-base font-semibold text-gray-900 dark:text-white">Shell Station</p>
+                        <p class="line-clamp-1 text-sm text-gray-500 dark:text-gray-400">08:20 AM · Combustible</p>
+                    </div>
+                    <div class="shrink-0 text-right">
+                        <p class="text-base font-bold text-green-600 dark:text-primary">+85</p>
+                    </div>
+                </div>
+                <!-- ListItem: Bonus -->
+                <div
+                    class="group flex items-center gap-4 px-5 py-4 hover:bg-gray-50 dark:hover:bg-surface-dark/50 transition-colors border-b border-gray-100 dark:border-gray-800/50 last:border-0">
+                    <div
+                        class="relative flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-yellow-100 to-orange-100 dark:from-yellow-900/30 dark:to-orange-900/30 text-orange-600 dark:text-orange-400">
+                        <span class="material-symbols-outlined text-[24px]">cake</span>
+                    </div>
+                    <div class="flex flex-1 flex-col justify-center">
+                        <p class="line-clamp-1 text-base font-semibold text-gray-900 dark:text-white">Regalo de
+                            Cumpleaños</p>
+                        <p class="line-clamp-1 text-sm text-gray-500 dark:text-gray-400">09:00 AM · Bonus</p>
+                    </div>
+                    <div class="shrink-0 text-right">
+                        <p class="text-base font-bold text-green-600 dark:text-primary">+1,000</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Section: 05 Octubre -->
+            <div class="mt-2">
+                <h4 class="px-5 py-3 text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">05
+                    Octubre</h4>
+                <!-- ListItem: Earned -->
+                <div
+                    class="group flex items-center gap-4 px-5 py-4 hover:bg-gray-50 dark:hover:bg-surface-dark/50 transition-colors border-b border-gray-100 dark:border-gray-800/50 last:border-0">
+                    <div
+                        class="relative flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/20 dark:bg-primary/10 text-green-800 dark:text-primary">
+                        <span class="material-symbols-outlined text-[24px]">restaurant</span>
+                    </div>
+                    <div class="flex flex-1 flex-col justify-center">
+                        <p class="line-clamp-1 text-base font-semibold text-gray-900 dark:text-white">Burger King</p>
+                        <p class="line-clamp-1 text-sm text-gray-500 dark:text-gray-400">01:30 PM · Almuerzo</p>
+                    </div>
+                    <div class="shrink-0 text-right">
+                        <p class="text-base font-bold text-green-600 dark:text-primary">+210</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Loading Indicator -->
+            <div class="mt-6 flex justify-center py-4">
+                <div class="flex items-center gap-2 text-sm text-gray-400">
+                    <span class="material-symbols-outlined animate-spin text-[18px]">progress_activity</span>
+                    <span>Cargando más...</span>
+                </div>
+            </div>
+        </div>
+        <!-- Bottom Navigation Bar -->
+        <%- include('partials/dock', { activePage: 'historial' }) %>
+    </div>
+</body>
+
+</html>

src/views/login.ejs

@@ -0,0 +1,332 @@
+<!DOCTYPE html>
+
+<html class="light" lang="es">
+
+<head>
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>Registro e Inicio de Sesión</title>
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com" rel="preconnect" />
+    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap"
+        rel="stylesheet" />
+    <!-- Material Symbols -->
+    <link
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
+        rel="stylesheet" />
+    <link
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
+        rel="stylesheet" />
+    <!-- Tailwind CSS with Plugins -->
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <!-- Theme Configuration -->
+    <script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        "primary": "#13ec37",
+                        "background-light": "#f6f8f6",
+                        "background-dark": "#102213",
+                        "surface-light": "#ffffff",
+                        "surface-dark": "#1a2e1d",
+                        "text-main": "#0d1b10",
+                        "text-muted": "#4c9a59",
+                    },
+                    fontFamily: {
+                        "display": ["Inter", "sans-serif"]
+                    },
+                    borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
+                },
+            },
+        }
+    </script>
+    <style>
+        .material-symbols-outlined {
+            font-variation-settings:
+                'FILL' 0,
+                'wght' 400,
+                'GRAD' 0,
+                'opsz' 24;
+            font-size: 24px;
+        }
+    </style>
+    <style>
+        body {
+            min-height: max(884px, 100dvh);
+        }
+    </style>
+</head>
+
+<body
+    class="bg-background-light dark:bg-background-dark font-display text-text-main dark:text-white antialiased min-h-screen flex flex-col items-center justify-center">
+    <!-- Main Container -->
+    <div
+        class="relative flex h-full w-full max-w-md md:max-w-4xl flex-col md:flex-row bg-background-light dark:bg-background-dark overflow-hidden shadow-xl min-h-screen sm:min-h-0 sm:rounded-2xl sm:h-auto sm:my-8 sm:border sm:border-gray-200 dark:sm:border-gray-800">
+
+        <!-- Left Panel: Brand Image (Desktop) -->
+        <div class="hidden md:flex md:w-[45%] relative overflow-hidden">
+            <div class="absolute inset-0 bg-center bg-no-repeat bg-cover transition-transform duration-700 hover:scale-105"
+                style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAz5TU-AG6oUrQJgtEuS9xmCTX4QDzYWN5aA4C2RZwhtv4IuAI7i45OLbZXL7327QcaIOLJSnRVCZ5LCu8DsdJMrVWTuH7YlGolt9aKNIrvQunitJNtUlBadtQHM8b3gZWMRu9LrMozEV_nE3K2_YNTbYQwdY0kBFa3aS6kFqBzmZks3QlSHbJ6IsbG27cSYqys-U3LakG2TjsvqkUcU7FICiwu6SDN_e1sr3L3MpDkq-c1hbVzJxHQexSpUKEsuuBifyRMveCboZJw");'>
+                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
+            </div>
+            <div class="relative z-10 p-10 flex flex-col justify-end h-full text-white">
+                <span class="material-symbols-outlined text-primary text-5xl mb-4">loyalty</span>
+                <h2 class="text-3xl font-bold mb-2">Rewards Club</h2>
+                <p class="text-gray-200 text-lg opacity-90">Gestione sus puntos y canjee recompensas exclusivas en
+                    nuestra plataforma premium.</p>
+            </div>
+        </div>
+
+        <!-- Right Panel: Form Content -->
+        <div class="flex flex-col flex-1 overflow-y-auto">
+            <!-- TopAppBar -->
+            <div
+                class="flex items-center bg-background-light dark:bg-background-dark p-4 pb-2 justify-between sticky top-0 z-10 md:bg-transparent md:backdrop-blur-sm">
+                <button
+                    class="text-text-main dark:text-white flex size-12 shrink-0 items-center justify-center rounded-full hover:bg-black/5 dark:hover:bg-white/10 transition-colors">
+                    <span class="material-symbols-outlined">arrow_back</span>
+                </button>
+            </div>
+
+            <!-- Scrollable Content -->
+            <div class="flex-1 pb-10">
+                <!-- HeaderImage (Mobile Only) -->
+                <div class="@container md:hidden">
+                    <div class="@[480px]:px-4 @[480px]:py-3 px-4 pb-4">
+                        <div class="w-full bg-center bg-no-repeat bg-cover flex flex-col justify-end overflow-hidden rounded-xl min-h-[200px] shadow-sm relative group"
+                            data-alt="Abstract vibrant green gradient waves representing growth and loyalty"
+                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAz5TU-AG6oUrQJgtEuS9xmCTX4QDzYWN5aA4C2RZwhtv4IuAI7i45OLbZXL7327QcaIOLJSnRVCZ5LCu8DsdJMrVWTuH7YlGolt9aKNIrvQunitJNtUlBadtQHM8b3gZWMRu9LrMozEV_nE3K2_YNTbYQwdY0kBFa3aS6kFqBzmZks3QlSHbJ6IsbG27cSYqys-U3LakG2TjsvqkUcU7FICiwu6SDN_e1sr3L3MpDkq-c1hbVzJxHQexSpUKEsuuBifyRMveCboZJw");'>
+                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+                            <div class="relative z-10 p-6">
+                                <span class="material-symbols-outlined text-white text-4xl mb-2">loyalty</span>
+                                <p class="text-white text-sm font-medium opacity-90">Rewards Club</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- HeadlineText -->
+                <div class="px-6 pt-2 pb-1">
+                    <h1 id="auth-title"
+                        class="text-text-main dark:text-white tracking-tight text-3xl font-bold leading-tight text-center">
+                        Bienvenido de nuevo</h1>
+                </div>
+                <!-- BodyText -->
+                <div class="px-6 pb-6">
+                    <p id="auth-subtitle"
+                        class="text-gray-600 dark:text-gray-400 text-base font-normal leading-normal text-center">
+                        Gestiona tus puntos y canjea recompensas exclusivas.</p>
+                </div>
+                <!-- SegmentedButtons -->
+                <div class="flex px-6 py-2">
+                    <div
+                        class="flex h-12 flex-1 items-center justify-center rounded-lg bg-surface-light dark:bg-surface-dark border border-gray-200 dark:border-gray-700 p-1 shadow-sm">
+                        <label
+                            class="flex cursor-pointer h-full grow items-center justify-center overflow-hidden rounded-md px-2 has-[:checked]:bg-primary has-[:checked]:text-[#0d1b10] has-[:checked]:shadow-sm text-gray-500 dark:text-gray-400 text-sm font-medium leading-normal transition-all duration-200 group">
+                            <span class="truncate">Iniciar Sesión</span>
+                            <input checked="" class="invisible w-0 h-0 absolute form-toggle" name="auth-type"
+                                type="radio" value="login" />
+                        </label>
+                        <label
+                            class="flex cursor-pointer h-full grow items-center justify-center overflow-hidden rounded-md px-2 has-[:checked]:bg-primary has-[:checked]:text-[#0d1b10] has-[:checked]:shadow-sm text-gray-500 dark:text-gray-400 text-sm font-medium leading-normal transition-all duration-200 group">
+                            <span class="truncate">Registrarse</span>
+                            <input class="invisible w-0 h-0 absolute form-toggle" name="auth-type" type="radio"
+                                value="register" />
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Login Form -->
+                <div id="login-container" class="transition-all duration-300">
+                    <form class="flex flex-col gap-4 px-6 py-4">
+                        <!-- Email Input -->
+                        <div class="space-y-1.5">
+                            <label class="text-sm font-medium text-text-main dark:text-gray-200 ml-1" for="email">Correo
+                                electrónico</label>
+                            <div class="relative flex items-center">
+                                <span
+                                    class="absolute left-3 text-gray-400 material-symbols-outlined text-[20px]">mail</span>
+                                <input
+                                    class="w-full h-12 rounded-lg border-gray-200 dark:border-gray-700 bg-surface-light dark:bg-surface-dark pl-10 pr-4 text-text-main dark:text-white placeholder-gray-400 focus:border-primary focus:ring-primary dark:focus:border-primary sm:text-sm"
+                                    id="email" placeholder="nombre@ejemplo.com" type="email" />
+                            </div>
+                        </div>
+                        <!-- Password Input -->
+                        <div class="space-y-1.5">
+                            <label class="text-sm font-medium text-text-main dark:text-gray-200 ml-1"
+                                for="password">Contraseña</label>
+                            <div class="relative flex items-center">
+                                <span
+                                    class="absolute left-3 text-gray-400 material-symbols-outlined text-[20px]">lock</span>
+                                <input
+                                    class="w-full h-12 rounded-lg border-gray-200 dark:border-gray-700 bg-surface-light dark:bg-surface-dark pl-10 pr-10 text-text-main dark:text-white placeholder-gray-400 focus:border-primary focus:ring-primary dark:focus:border-primary sm:text-sm"
+                                    id="password" placeholder="••••••••" type="password" />
+                                <button
+                                    class="absolute right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none flex items-center"
+                                    type="button">
+                                    <span class="material-symbols-outlined text-[20px]">visibility</span>
+                                </button>
+                            </div>
+                        </div>
+                        <!-- Forgot Password Link -->
+                        <div class="flex justify-end pt-1">
+                            <a class="text-sm font-medium text-primary hover:text-green-600 dark:hover:text-green-400 transition-colors"
+                                href="#">
+                                ¿Olvidaste tu contraseña?
+                            </a>
+                        </div>
+                        <!-- Submit Button -->
+                        <button
+                            class="mt-4 flex w-full items-center justify-center rounded-lg bg-primary py-3.5 px-4 text-sm font-bold text-[#0d1b10] shadow-md hover:bg-green-400 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:ring-offset-background-dark transition-all"
+                            type="submit">
+                            Iniciar Sesión
+                        </button>
+                    </form>
+                </div>
+
+                <!-- Register Form (Hidden by default) -->
+                <div id="register-container" class="hidden transition-all duration-300">
+                    <form class="flex flex-col gap-4 px-6 py-4">
+                        <div class="grid grid-cols-2 gap-4">
+                            <!-- Name Input -->
+                            <div class="space-y-1.5">
+                                <label class="text-sm font-medium text-text-main dark:text-gray-200 ml-1"
+                                    for="reg-name">Nombre</label>
+                                <input
+                                    class="w-full h-12 rounded-lg border-gray-200 dark:border-gray-700 bg-surface-light dark:bg-surface-dark px-4 text-text-main dark:text-white placeholder-gray-400 focus:border-primary focus:ring-primary dark:focus:border-primary sm:text-sm"
+                                    id="reg-name" placeholder="Juan" type="text" />
+                            </div>
+                            <!-- Surname Input -->
+                            <div class="space-y-1.5">
+                                <label class="text-sm font-medium text-text-main dark:text-gray-200 ml-1"
+                                    for="reg-surname">Apellido</label>
+                                <input
+                                    class="w-full h-12 rounded-lg border-gray-200 dark:border-gray-700 bg-surface-light dark:bg-surface-dark px-4 text-text-main dark:text-white placeholder-gray-400 focus:border-primary focus:ring-primary dark:focus:border-primary sm:text-sm"
+                                    id="reg-surname" placeholder="Pérez" type="text" />
+                            </div>
+                        </div>
+                        <!-- Reg Email Input -->
+                        <div class="space-y-1.5">
+                            <label class="text-sm font-medium text-text-main dark:text-gray-200 ml-1"
+                                for="reg-email">Correo electrónico</label>
+                            <div class="relative flex items-center">
+                                <span
+                                    class="absolute left-3 text-gray-400 material-symbols-outlined text-[20px]">mail</span>
+                                <input
+                                    class="w-full h-12 rounded-lg border-gray-200 dark:border-gray-700 bg-surface-light dark:bg-surface-dark pl-10 pr-4 text-text-main dark:text-white placeholder-gray-400 focus:border-primary focus:ring-primary dark:focus:border-primary sm:text-sm"
+                                    id="reg-email" placeholder="nombre@ejemplo.com" type="email" />
+                            </div>
+                        </div>
+                        <!-- Reg Password Input -->
+                        <div class="space-y-1.5">
+                            <label class="text-sm font-medium text-text-main dark:text-gray-200 ml-1"
+                                for="reg-password">Contraseña</label>
+                            <div class="relative flex items-center">
+                                <span
+                                    class="absolute left-3 text-gray-400 material-symbols-outlined text-[20px]">lock</span>
+                                <input
+                                    class="w-full h-12 rounded-lg border-gray-200 dark:border-gray-700 bg-surface-light dark:bg-surface-dark pl-10 pr-10 text-text-main dark:text-white placeholder-gray-400 focus:border-primary focus:ring-primary dark:focus:border-primary sm:text-sm"
+                                    id="reg-password" placeholder="Mínimo 8 caracteres" type="password" />
+                            </div>
+                        </div>
+                        <!-- Submit Button -->
+                        <button
+                            class="mt-4 flex w-full items-center justify-center rounded-lg bg-primary py-3.5 px-4 text-sm font-bold text-[#0d1b10] shadow-md hover:bg-green-400 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:ring-offset-background-dark transition-all"
+                            type="submit">
+                            Crear Cuenta
+                        </button>
+                    </form>
+                </div>
+
+                <!-- Social Login Divider -->
+                <div class="relative px-6 py-4">
+                    <div aria-hidden="true" class="absolute inset-0 flex items-center px-6">
+                        <div class="w-full border-t border-gray-200 dark:border-gray-700"></div>
+                    </div>
+                    <div class="relative flex justify-center">
+                        <span
+                            class="bg-background-light dark:bg-background-dark px-2 text-xs text-gray-500 uppercase tracking-wide">O
+                            continúa con</span>
+                    </div>
+                </div>
+                <!-- Social Buttons -->
+                <div class="grid grid-cols-3 gap-3 px-6 pb-8">
+                    <!-- Google -->
+                    <button
+                        class="flex items-center justify-center rounded-lg border border-gray-200 dark:border-gray-700 bg-surface-light dark:bg-surface-dark p-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors group">
+                        <svg viewBox="0 0 24 24" class="h-6 w-6">
+                            <path
+                                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                                fill="#4285F4" />
+                            <path
+                                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                                fill="#34A853" />
+                            <path
+                                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
+                                fill="#FBBC05" />
+                            <path
+                                d="M12 5.38c1.62 0 3.06.56 4.21 1.66l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.14-4.53z"
+                                fill="#EA4335" />
+                        </svg>
+                    </button>
+                    <!-- Apple -->
+                    <button
+                        class="flex items-center justify-center rounded-lg border border-gray-200 dark:border-gray-700 bg-surface-light dark:bg-surface-dark p-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors group">
+                        <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current text-text-main dark:text-white">
+                            <path
+                                d="M17.05 20.28c-.98.95-2.05 1.78-3.19 1.76-1.09-.01-1.74-.46-2.81-.46s-1.75.45-2.79.46c-1.15.01-2.21-.81-3.19-1.76-1.93-1.89-3.41-5.41-3.41-8.54 0-3.11 1.88-4.74 3.66-4.74 1.01 0 1.9.54 2.52.54s1.51-.54 2.52-.54c1.46 0 2.58.74 3.21 1.63-1.31.79-1.54 2.51-.43 3.3 1.43 1.02 2.68.22 2.68.22-.05.15-.31.84-.78 1.51zM11.96 5.86c-.02-1.88 1.54-3.44 3.33-3.08.18 1.84-1.41 3.51-3.33 3.08z" />
+                        </svg>
+                    </button>
+                    <!-- Facebook -->
+                    <button
+                        class="flex items-center justify-center rounded-lg border border-gray-200 dark:border-gray-700 bg-surface-light dark:bg-surface-dark p-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors group">
+                        <svg viewBox="0 0 24 24" class="h-6 w-6 fill-[#1877F2]">
+                            <path
+                                d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-8.783h-2.954v-3.429h2.954v-2.527c0-2.925 1.787-4.52 4.398-4.52 1.251 0 2.328.093 2.641.135v3.061h-1.811c-1.419 0-1.694.675-1.694 1.664v2.187h3.389l-.441 3.429h-2.948v8.783h6.101c.732 0 1.325-.593 1.325-1.325v-21.351c0-.732-.593-1.325-1.325-1.325z" />
+                        </svg>
+                    </button>
+                </div>
+                <!-- Footer Terms -->
+                <div class="px-6 pb-8 text-center">
+                    <p class="text-xs text-gray-500">
+                        Al continuar, aceptas nuestros
+                        <a class="underline hover:text-gray-700 dark:hover:text-gray-300" href="#">Términos de
+                            Servicio</a>
+                        y
+                        <a class="underline hover:text-gray-700 dark:hover:text-gray-300" href="#">Política de
+                            Privacidad</a>.
+                    </p>
+                </div>
+                <div class="h-5"></div>
+
+                <!-- Toggle Script -->
+                <script>
+                    document.querySelectorAll('.form-toggle').forEach(input => {
+                        input.addEventListener('change', (e) => {
+                            const loginContainer = document.getElementById('login-container');
+                            const registerContainer = document.getElementById('register-container');
+                            const authTitle = document.getElementById('auth-title');
+                            const authSubtitle = document.getElementById('auth-subtitle');
+
+                            if (e.target.value === 'login') {
+                                loginContainer.classList.remove('hidden');
+                                registerContainer.classList.add('hidden');
+                                authTitle.textContent = 'Bienvenido de nuevo';
+                                authSubtitle.textContent = 'Gestiona tus puntos y canjea recompensas exclusivas.';
+                            } else {
+                                loginContainer.classList.add('hidden');
+                                registerContainer.classList.remove('hidden');
+                                authTitle.textContent = 'Crea tu cuenta';
+                                authSubtitle.textContent = 'Únete al Rewards Club y comienza a ganar puntos hoy mismo.';
+                            }
+                        });
+                    });
+                </script>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>

src/views/panel.ejs

@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+
+<html class="light" lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+  <title>Dashboard de Puntos</title>
+  <link href="https://fonts.googleapis.com" rel="preconnect" />
+  <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&amp;display=swap"
+    rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
+    rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
+    rel="stylesheet" />
+  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+  <script id="tailwind-config">
+    tailwind.config = {
+      darkMode: "class",
+      theme: {
+        extend: {
+          colors: {
+            "primary": "#13ec37",
+            "background-light": "#f6f8f6",
+            "background-dark": "#102213",
+            "card-light": "#ffffff",
+            "card-dark": "#1a2e1d",
+          },
+          fontFamily: {
+            "display": ["Inter", "sans-serif"]
+          },
+          borderRadius: {
+            "DEFAULT": "0.375rem", // rounded-md matches user request better than 0.25rem
+            "lg": "0.5rem",
+            "xl": "0.75rem",
+            "2xl": "1rem",
+            "full": "9999px"
+          },
+        },
+      },
+    }
+  </script>
+  <style>
+    body {
+      min-height: max(884px, 100dvh);
+    }
+  </style>
+</head>
+
+<body
+  class="bg-background-light dark:bg-background-dark text-[#0d1b10] dark:text-gray-100 font-display transition-colors duration-200 lg:bg-gray-100 lg:dark:bg-black/20 lg:py-10">
+  <div
+    class="relative flex h-full min-h-screen w-full flex-col overflow-x-hidden bg-background-light dark:bg-background-dark lg:rounded-[2.5rem] lg:shadow-2xl lg:border lg:border-gray-100 lg:dark:border-white/5 lg:min-h-0 lg:h-auto lg:max-w-5xl mx-auto">
+    <!-- Header Section -->
+    <div class="flex items-center justify-between p-6 pb-2 pt-8">
+      <div class="flex items-center gap-3">
+        <div class="relative">
+          <div
+            class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-12 shadow-sm ring-2 ring-white dark:ring-white/10"
+            data-alt="Portrait of a smiling user named Maria"
+            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuC3gBnLToOwqxMWmNwIphO5Rlk3viEBl5xQPucLi46mLrin8eOaTnXe5qyDFfU7cy7Y1OsDowC2H5vooQCMcH1fTpKdcp8DAWN3peqTCmcvF7CMinNFe8L6mONwumywRgjETfv83CvG5bgC8VF_7_jtMFWt7Gol1kGP7iO6rNWYhPwgkBiyo7hg5jP_wkGta4IYMlxpNBuVH5Kyy5qCK5Ukq8FEcge1zwmVJ-tIMdxg4R6iAw_Okma2V14trlXx4J2iwAt_XlytKOlS");'>
+          </div>
+          <div
+            class="absolute bottom-0 right-0 size-3 bg-primary rounded-full border-2 border-white dark:border-[#102213]">
+          </div>
+        </div>
+      </div>
+      <button
+        class="flex items-center justify-center size-10 rounded-full bg-white dark:bg-white/5 hover:bg-gray-50 dark:hover:bg-white/10 shadow-sm transition-colors text-gray-700 dark:text-gray-200">
+        <span class="material-symbols-outlined" style="font-size: 24px;">notifications</span>
+      </button>
+    </div>
+    <!-- Greeting -->
+    <div class="px-6 pb-4">
+      <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
+        Hola, María <span class="inline-block hover:animate-pulse">👋</span>
+      </h2>
+      <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">¡Es un buen día para canjear!</p>
+    </div>
+    <!-- Hero Card (Available Points) -->
+    <div class="px-6 py-2 md:max-w-2xl md:mx-auto w-full">
+      <div class="relative w-full overflow-hidden rounded-2xl bg-[#102213] shadow-lg shadow-primary/10 group">
+        <!-- Decorative Background Elements -->
+        <div class="absolute top-0 right-0 -mt-8 -mr-8 h-48 w-48 rounded-full bg-primary/20 blur-3xl"></div>
+        <div class="absolute bottom-0 left-0 -mb-8 -ml-8 h-48 w-48 rounded-full bg-primary/10 blur-3xl"></div>
+        <div class="relative z-10 flex flex-col p-6 text-white">
+          <div class="flex justify-between items-start mb-6">
+            <div
+              class="flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 backdrop-blur-sm border border-white/5">
+              <span class="material-symbols-outlined text-primary" style="font-size: 16px;">verified</span>
+              <span class="text-xs font-medium tracking-wide text-primary">NIVEL ORO</span>
+            </div>
+            <img alt="Loyalty Crown Icon" class="w-8 h-8 opacity-80 invert brightness-0"
+              data-alt="Abstract crown icon representing loyalty program"
+              src="https://lh3.googleusercontent.com/aida-public/AB6AXuDUtr0oSIOfxb_vT-UfkX6M2jW53yMsCTIc0FsZCeiGfsEfJ2TzkWvvMyR81A12reEG1qjdHwNiru5yK5B5uJqAqlu-4fgmE2_803eKAzposM4G5KPM1V6Rbq6XFeLBzYwxGR37FQ0AtzX6mS5CFbYtTMa_6MzaTzvQNdwLEbqAmyXJEFKtFUByDleAJWL6pTniOb_gbkIhIxM3xvTfqXmleGp2qISJsD2XByYovOQH8X2rAU-lLJ4bk42AIc4_M8W85HuCFDDh0m24" />
+          </div>
+          <p class="text-sm font-medium text-gray-400 uppercase tracking-wider mb-1">Puntos Disponibles</p>
+          <div class="flex items-baseline gap-1 mb-6">
+            <h1 class="text-5xl font-extrabold tracking-tighter text-white drop-shadow-sm">2,450</h1>
+            <span class="text-lg font-medium text-primary">pts</span>
+          </div>
+          <button
+            class="w-full flex items-center justify-center gap-2 rounded-lg bg-primary py-3.5 px-4 text-[#0d1b10] font-bold text-sm hover:bg-[#0fd630] active:scale-[0.98] transition-all shadow-[0_0_20px_rgba(19,236,55,0.3)]">
+            <span class="material-symbols-outlined" style="font-size: 20px;">local_activity</span>
+            Canjear Premios
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- Stats Grid -->
+    <div class="flex gap-4 px-6 py-6 md:max-w-4xl md:mx-auto w-full">
+      <div
+        class="flex flex-1 flex-col justify-between gap-3 rounded-2xl bg-white dark:bg-white/5 p-5 shadow-[0_2px_8px_rgba(0,0,0,0.04)] border border-gray-100 dark:border-white/5 transition-transform hover:-translate-y-1 duration-300">
+        <div
+          class="flex h-10 w-10 items-center justify-center rounded-full bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400">
+          <span class="material-symbols-outlined">trending_up</span>
+        </div>
+        <div>
+          <p class="text-xs font-medium text-gray-500 dark:text-gray-400">Acumulados</p>
+          <p class="text-xl font-bold text-gray-900 dark:text-white">5,200</p>
+        </div>
+      </div>
+      <div
+        class="flex flex-1 flex-col justify-between gap-3 rounded-2xl bg-white dark:bg-white/5 p-5 shadow-[0_2px_8px_rgba(0,0,0,0.04)] border border-gray-100 dark:border-white/5 transition-transform hover:-translate-y-1 duration-300">
+        <div
+          class="flex h-10 w-10 items-center justify-center rounded-full bg-orange-50 dark:bg-orange-900/20 text-orange-600 dark:text-orange-400">
+          <span class="material-symbols-outlined">redeem</span>
+        </div>
+        <div>
+          <p class="text-xs font-medium text-gray-500 dark:text-gray-400">Canjeados</p>
+          <p class="text-xl font-bold text-gray-900 dark:text-white">2,750</p>
+        </div>
+      </div>
+    </div>
+    <!-- Recent Activity Section -->
+    <div class="flex flex-col px-6 md:max-w-4xl md:mx-auto w-full">
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="text-lg font-bold text-gray-900 dark:text-white tracking-tight">Actividad Reciente</h3>
+        <button class="text-xs font-semibold text-primary hover:text-green-400 transition-colors">Ver todo</button>
+      </div>
+      <div class="flex flex-col gap-3">
+        <!-- Activity Item 1 -->
+        <div
+          class="flex items-center justify-between p-4 rounded-xl bg-white dark:bg-white/5 border border-gray-100 dark:border-white/5 shadow-sm">
+          <div class="flex items-center gap-4">
+            <div
+              class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-50 dark:bg-white/10 text-gray-600 dark:text-gray-300">
+              <span class="material-symbols-outlined">shopping_bag</span>
+            </div>
+            <div class="flex flex-col">
+              <span class="text-sm font-semibold text-gray-900 dark:text-white line-clamp-1">Compra en Tienda
+                Centro</span>
+              <span class="text-xs text-gray-500 dark:text-gray-400">12 Oct, 14:30</span>
+            </div>
+          </div>
+          <span class="text-sm font-bold text-primary whitespace-nowrap">+120 pts</span>
+        </div>
+        <!-- Activity Item 2 -->
+        <div
+          class="flex items-center justify-between p-4 rounded-xl bg-white dark:bg-white/5 border border-gray-100 dark:border-white/5 shadow-sm">
+          <div class="flex items-center gap-4">
+            <div
+              class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-50 dark:bg-white/10 text-gray-600 dark:text-gray-300">
+              <span class="material-symbols-outlined">local_cafe</span>
+            </div>
+            <div class="flex flex-col">
+              <span class="text-sm font-semibold text-gray-900 dark:text-white line-clamp-1">Canje Cupón de Café</span>
+              <span class="text-xs text-gray-500 dark:text-gray-400">10 Oct, 09:15</span>
+            </div>
+          </div>
+          <span class="text-sm font-bold text-gray-500 dark:text-gray-400 whitespace-nowrap">-300 pts</span>
+        </div>
+        <!-- Activity Item 3 -->
+        <div
+          class="flex items-center justify-between p-4 rounded-xl bg-white dark:bg-white/5 border border-gray-100 dark:border-white/5 shadow-sm">
+          <div class="flex items-center gap-4">
+            <div
+              class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-50 dark:bg-white/10 text-gray-600 dark:text-gray-300">
+              <span class="material-symbols-outlined">qr_code_scanner</span>
+            </div>
+            <div class="flex flex-col">
+              <span class="text-sm font-semibold text-gray-900 dark:text-white line-clamp-1">Bono de Bienvenida</span>
+              <span class="text-xs text-gray-500 dark:text-gray-400">01 Oct, 10:00</span>
+            </div>
+          </div>
+          <span class="text-sm font-bold text-primary whitespace-nowrap">+500 pts</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <%- include('partials/dock', { activePage: 'panel' }) %>
+</body>
+
+</html>

src/views/partials/dock.ejs

@@ -0,0 +1,46 @@
+<nav
+    class="fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-surface-dark border-t border-gray-200 dark:border-gray-800 pb-safe pt-2 max-w-7xl mx-auto lg:bottom-4 lg:left-1/2 lg:-translate-x-1/2 lg:w-max lg:rounded-3xl lg:px-12 lg:py-4 lg:bg-white/20 lg:dark:bg-surface-dark/20 lg:backdrop-blur-2xl lg:shadow-[0_20px_50px_rgba(0,0,0,0.4)] lg:border lg:border-white/20 lg:h-auto lg:border-t-0">
+    <div class="flex justify-around items-center px-2 pb-2 lg:gap-14 lg:px-4 lg:pb-0">
+        <!-- Inicio -->
+        <a href="/panel"
+            class="flex flex-col items-center gap-1 p-2 <%= (typeof activePage !== 'undefined' && activePage === 'panel') ? 'text-primary' : 'text-gray-400 hover:text-primary' %> transition-all duration-300 hover:scale-125">
+            <span class="material-symbols-outlined text-2xl lg:text-4xl"
+                style="<%= (typeof activePage !== 'undefined' && activePage === 'panel') ? 'font-variation-settings: \'FILL\' 1' : '' %>">home</span>
+            <span class="text-[10px] font-medium lg:hidden">Inicio</span>
+        </a>
+
+        <!-- Historial -->
+        <a href="/historial"
+            class="flex flex-col items-center gap-1 p-2 <%= (typeof activePage !== 'undefined' && activePage === 'historial') ? 'text-primary' : 'text-gray-400 hover:text-primary' %> transition-all duration-300 hover:scale-125">
+            <span class="material-symbols-outlined text-2xl lg:text-4xl"
+                style="<%= (typeof activePage !== 'undefined' && activePage === 'historial') ? 'font-variation-settings: \'FILL\' 1' : '' %>">history</span>
+            <span class="text-[10px] font-medium lg:hidden">Historial</span>
+        </a>
+
+        <!-- Botón Central Canje/Scan -->
+        <div class="relative -top-5 lg:static lg:top-0">
+            <a href="/escanear"
+                class="flex h-14 w-14 items-center justify-center rounded-full bg-[#102213] dark:bg-primary text-primary dark:text-[#102213] shadow-lg shadow-primary/20 hover:scale-125 transition-all duration-300 lg:h-20 lg:w-20">
+                <span class="material-symbols-outlined text-3xl lg:text-5xl">qr_code_2</span>
+            </a>
+        </div>
+
+        <!-- Canje -->
+        <a href="/tienda_canje"
+            class="flex flex-col items-center gap-1 p-2 <%= (typeof activePage !== 'undefined' && activePage === 'tienda_canje') ? 'text-primary' : 'text-gray-400 hover:text-primary' %> transition-all duration-300 hover:scale-125">
+            <span class="material-symbols-outlined text-2xl lg:text-4xl"
+                style="<%= (typeof activePage !== 'undefined' && activePage === 'tienda_canje') ? 'font-variation-settings: \'FILL\' 1' : '' %>">storefront</span>
+            <span class="text-[10px] font-medium lg:hidden">Canje</span>
+        </a>
+
+        <!-- Perfil -->
+        <a href="/perfil"
+            class="flex flex-col items-center gap-1 p-2 <%= (typeof activePage !== 'undefined' && activePage === 'perfil') ? 'text-primary' : 'text-gray-400 hover:text-primary' %> transition-all duration-300 hover:scale-125">
+            <span
+                class="material-symbols-outlined text-2xl lg:text-4xl <%= (typeof activePage !== 'undefined' && activePage === 'perfil') ? 'fill-1' : '' %>"
+                style="<%= (typeof activePage !== 'undefined' && activePage === 'perfil') ? 'font-variation-settings: \'FILL\' 1' : '' %>">person</span>
+            <span class="text-[10px] font-medium lg:hidden">Perfil</span>
+        </a>
+    </div>
+    <div class="h-5 w-full lg:hidden"></div>
+</nav>

src/views/perfil.ejs

@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html lang="es" class="h-full">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Perfil de Usuario - SIGMA</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            darkMode: 'media',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#4ade80',
+                        'surface-dark': '#0d1b10',
+                        'background-dark': '#050a06',
+                    },
+                    fontFamily: {
+                        sans: ['Outfit', 'sans-serif'],
+                    },
+                }
+            }
+        }
+    </script>
+    <style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+
+        .fill-1 {
+            font-variation-settings: 'FILL' 1 !important;
+        }
+
+        @media (min-width: 1024px) {
+            body {
+                background-image: radial-gradient(circle at 0% 0%, rgba(74, 222, 128, 0.05) 0%, transparent 50%),
+                    radial-gradient(circle at 100% 100%, rgba(74, 222, 128, 0.05) 0%, transparent 50%);
+            }
+        }
+    </style>
+</head>
+
+<body class="bg-gray-50 dark:bg-background-dark text-gray-900 dark:text-gray-100 min-h-screen lg:py-10">
+
+    <div
+        class="max-w-7xl mx-auto lg:max-w-5xl lg:bg-white lg:dark:bg-surface-dark lg:rounded-[2.5rem] lg:shadow-[0_20px_50px_rgba(0,0,0,0.1)] lg:border lg:border-gray-100 lg:dark:border-white/5 lg:min-h-[80vh] overflow-hidden flex flex-col relative">
+
+        <!-- Header de Perfil -->
+        <header class="bg-white dark:bg-surface-dark px-6 pt-8 pb-6 lg:px-10">
+            <div class="flex items-center justify-between mb-8">
+                <a href="/panel"
+                    class="p-2 -ml-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+                    <span class="material-symbols-outlined">arrow_back</span>
+                </a>
+                <h1 class="text-xl font-bold">Mi Perfil</h1>
+                <button class="p-2 -mr-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+                    <span class="material-symbols-outlined text-primary">edit</span>
+                </button>
+            </div>
+
+            <div class="flex flex-col items-center">
+                <div class="relative">
+                    <div
+                        class="w-24 h-24 lg:w-32 lg:h-32 rounded-full bg-primary/20 flex items-center justify-center border-4 border-white dark:border-surface-dark shadow-xl overflow-hidden">
+                        <span class="material-symbols-outlined text-5xl lg:text-6xl text-primary">person</span>
+                    </div>
+                    <button
+                        class="absolute bottom-1 right-1 bg-white dark:bg-gray-800 p-1.5 rounded-full shadow-lg border border-gray-100 dark:border-gray-700">
+                        <span class="material-symbols-outlined text-sm">photo_camera</span>
+                    </button>
+                </div>
+                <h2 class="mt-4 text-2xl font-bold">Juan Pérez</h2>
+                <p class="text-gray-500 dark:text-gray-400 font-medium">@juanperez88</p>
+            </div>
+        </header>
+
+        <!-- Contenido principal -->
+        <main class="flex-1 px-6 pb-24 lg:px-10 lg:pb-10 overflow-y-auto">
+
+            <!-- Grid de Información -->
+            <div class="space-y-6 lg:grid lg:grid-cols-2 lg:gap-8 lg:space-y-0 mt-4">
+
+                <!-- Datos Personales -->
+                <div
+                    class="bg-white dark:bg-white/5 p-6 rounded-[2rem] border border-gray-100 dark:border-white/5 space-y-4 shadow-sm">
+                    <div class="flex items-center gap-3 mb-2">
+                        <div class="p-2 bg-primary/10 rounded-xl">
+                            <span class="material-symbols-outlined text-primary">contact_page</span>
+                        </div>
+                        <h3 class="font-bold text-lg">Datos Personales</h3>
+                    </div>
+
+                    <div class="space-y-4">
+                        <div>
+                            <label class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Nombre
+                                Completo</label>
+                            <p class="font-medium">Juan Alberto Pérez Rodríguez</p>
+                        </div>
+                        <div>
+                            <label class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Nombre de
+                                Usuario</label>
+                            <p class="font-medium">juanperez88</p>
+                        </div>
+                        <div>
+                            <label class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Correo
+                                Electrónico</label>
+                            <div class="flex items-center justify-between">
+                                <p class="font-medium">juan.perez@ejemplo.com</p>
+                                <span class="material-symbols-outlined text-primary text-sm fill-1">verified</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Empresa y Fidelización -->
+                <div
+                    class="bg-white dark:bg-white/5 p-6 rounded-[2rem] border border-gray-100 dark:border-white/5 space-y-4 shadow-sm">
+                    <div class="flex items-center gap-3 mb-2">
+                        <div class="p-2 bg-blue-500/10 rounded-xl">
+                            <span class="material-symbols-outlined text-blue-500">apartment</span>
+                        </div>
+                        <h3 class="font-bold text-lg">Empresa y Afiliación</h3>
+                    </div>
+
+                    <div class="space-y-4">
+                        <div>
+                            <label class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Empresa
+                                Adjunta</label>
+                            <p class="font-medium">Telcotronics S.A.</p>
+                        </div>
+                        <div>
+                            <label class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Programa de
+                                Fidelización</label>
+                            <div class="flex items-center gap-2">
+                                <span class="w-2 h-2 rounded-full bg-primary"></span>
+                                <p class="font-medium text-primary">Socio SIGMA Platinum</p>
+                            </div>
+                        </div>
+                        <div>
+                            <label class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Fecha de
+                                Incorporación</label>
+                            <p class="font-medium text-gray-600 dark:text-gray-300">Marzo 2024 (Hace 10 meses)</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Configuración y Seguridad -->
+                <div
+                    class="bg-white dark:bg-white/5 p-6 rounded-[2rem] border border-gray-100 dark:border-white/5 space-y-4 shadow-sm lg:col-span-2">
+                    <div class="flex justify-between items-center mb-4">
+                        <div class="flex items-center gap-3">
+                            <div class="p-2 bg-gray-500/10 rounded-xl">
+                                <span class="material-symbols-outlined text-gray-500">settings</span>
+                            </div>
+                            <h3 class="font-bold text-lg">Configuración de Cuenta</h3>
+                        </div>
+                    </div>
+
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <button
+                            class="flex items-center justify-between p-4 rounded-2xl bg-gray-50 dark:bg-white/5 hover:bg-gray-100 dark:hover:bg-white/10 transition-colors text-left">
+                            <div class="flex items-center gap-3">
+                                <span class="material-symbols-outlined text-gray-400">lock</span>
+                                <span class="font-medium">Cambiar Contraseña</span>
+                            </div>
+                            <span class="material-symbols-outlined text-gray-300">chevron_right</span>
+                        </button>
+                        <button
+                            class="flex items-center justify-between p-4 rounded-2xl bg-gray-50 dark:bg-white/5 hover:bg-gray-100 dark:hover:bg-white/10 transition-colors text-left">
+                            <div class="flex items-center gap-3">
+                                <span class="material-symbols-outlined text-gray-400">notifications</span>
+                                <span class="font-medium">Notificaciones</span>
+                            </div>
+                            <span class="material-symbols-outlined text-gray-300">chevron_right</span>
+                            </a>
+                            <button
+                                class="flex items-center justify-between p-4 rounded-2xl bg-gray-50 dark:bg-white/5 hover:bg-gray-100 dark:hover:bg-white/10 transition-colors text-left">
+                                <div class="flex items-center gap-3">
+                                    <span class="material-symbols-outlined text-gray-400">security</span>
+                                    <span class="font-medium">Privacidad</span>
+                                </div>
+                                <span class="material-symbols-outlined text-gray-300">chevron_right</span>
+                            </button>
+                            <button
+                                class="flex items-center justify-between p-4 rounded-2xl bg-red-500/5 hover:bg-red-500/10 transition-colors text-left text-red-500">
+                                <div class="flex items-center gap-3">
+                                    <span class="material-symbols-outlined">logout</span>
+                                    <span class="font-medium">Cerrar Sesión</span>
+                                </div>
+                                <span class="material-symbols-outlined">chevron_right</span>
+                            </button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="h-10"></div>
+        </main>
+
+        <%- include('partials/dock', { activePage: 'perfil' }) %>
+    </div>
+</body>
+
+</html>

src/views/tienda_canje.ejs

@@ -0,0 +1,322 @@
+<!DOCTYPE html>
+
+<html class="light" lang="es">
+
+<head>
+  <meta charset="utf-8" />
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+  <title>Tienda de Canje</title>
+  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
+    rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
+    rel="stylesheet" />
+  <script>
+    tailwind.config = {
+      darkMode: "class",
+      theme: {
+        extend: {
+          colors: {
+            "primary": "#13ec37",
+            "primary-dark": "#0eb52a",
+            "background-light": "#f6f8f6",
+            "background-dark": "#102213",
+            "surface-light": "#ffffff",
+            "surface-dark": "#1c2e20",
+            "text-main-light": "#0d1b10",
+            "text-main-dark": "#e0ece2",
+            "text-secondary-light": "#5c7062",
+            "text-secondary-dark": "#9aaead",
+          },
+          fontFamily: {
+            "display": ["Inter", "sans-serif"]
+          },
+          borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
+          boxShadow: {
+            "soft": "0 4px 20px -2px rgba(0, 0, 0, 0.05)",
+          }
+        },
+      },
+    }
+  </script>
+  <style>
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    .no-scrollbar::-webkit-scrollbar {
+      display: none;
+    }
+
+    /* Hide scrollbar for IE, Edge and Firefox */
+    .no-scrollbar {
+      -ms-overflow-style: none;
+      /* IE and Edge */
+      scrollbar-width: none;
+      /* Firefox */
+    }
+  </style>
+  <style>
+    body {
+      min-height: max(884px, 100dvh);
+    }
+  </style>
+</head>
+
+<body
+  class="bg-background-light dark:bg-background-dark font-display antialiased text-text-main-light dark:text-text-main-dark lg:bg-gray-100 dark:lg:bg-black/40 lg:py-10">
+  <div
+    class="relative flex h-full min-h-screen w-full flex-col overflow-x-hidden max-w-7xl mx-auto shadow-2xl bg-background-light dark:bg-background-dark lg:max-w-5xl lg:rounded-[2.5rem] lg:shadow-[0_20px_50px_rgba(0,0,0,0.1)] lg:border lg:border-gray-100 lg:dark:border-white/5 lg:min-h-0 lg:h-auto">
+    <!-- Sticky Header & Stats -->
+    <header
+      class="sticky top-0 z-20 bg-background-light/95 dark:bg-background-dark/95 backdrop-blur-sm border-b border-gray-100 dark:border-gray-800 pb-2">
+      <!-- Top Bar -->
+      <div class="flex items-center justify-between px-4 pt-4 pb-2">
+        <h2 class="text-xl font-bold tracking-tight">Tienda de Canje</h2>
+        <button
+          class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 dark:bg-surface-dark text-text-main-light dark:text-text-main-dark hover:bg-gray-200 transition-colors">
+          <span class="material-symbols-outlined">account_circle</span>
+        </button>
+      </div>
+      <!-- Points Balance Card -->
+      <div class="px-4 mt-2">
+        <div
+          class="relative overflow-hidden rounded-xl bg-surface-light dark:bg-surface-dark p-4 shadow-soft border border-gray-100 dark:border-gray-800 md:max-w-md md:mx-auto">
+          <div class="relative z-10 flex flex-col items-center text-center">
+            <span
+              class="text-xs uppercase tracking-wider text-text-secondary-light dark:text-text-secondary-dark font-medium mb-1">Balance
+              Actual</span>
+            <div class="flex items-center gap-2">
+              <span class="text-3xl font-bold text-primary dark:text-primary">2,450</span>
+              <span class="material-symbols-outlined text-primary fill-1"
+                style="font-variation-settings: 'FILL' 1;">stars</span>
+            </div>
+            <p class="text-sm text-text-secondary-light dark:text-text-secondary-dark mt-1">Puntos Disponibles</p>
+          </div>
+          <!-- Decorative background blur -->
+          <div class="absolute -top-10 -right-10 w-32 h-32 bg-primary/10 rounded-full blur-2xl"></div>
+          <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-primary/5 rounded-full blur-2xl"></div>
+        </div>
+      </div>
+    </header>
+    <!-- Search Bar -->
+    <div class="px-4 py-3 md:max-w-2xl md:mx-auto w-full">
+      <div
+        class="relative flex items-center w-full h-12 rounded-lg bg-white dark:bg-surface-dark shadow-sm border border-gray-200 dark:border-gray-700 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary transition-all">
+        <div class="grid place-items-center h-full w-12 text-gray-400">
+          <span class="material-symbols-outlined">search</span>
+        </div>
+        <input
+          class="peer h-full w-full outline-none text-sm text-gray-700 dark:text-gray-200 bg-transparent pr-4 placeholder-gray-400 dark:placeholder-gray-500 font-medium"
+          id="search" placeholder="Buscar recompensas..." type="text" />
+      </div>
+    </div>
+    <!-- Scrollable Content Container -->
+    <main class="flex-1 flex flex-col gap-6 pb-24">
+      <!-- Categories (Chips) -->
+      <div class="w-full overflow-x-auto no-scrollbar pl-4 md:flex md:justify-center">
+        <div class="flex gap-3 pr-4">
+          <button
+            class="flex h-9 shrink-0 items-center justify-center px-5 rounded-full bg-primary text-background-dark font-semibold text-sm shadow-md transition-transform active:scale-95">
+            Todos
+          </button>
+          <button
+            class="flex h-9 shrink-0 items-center justify-center px-5 rounded-full bg-white dark:bg-surface-dark border border-gray-200 dark:border-gray-700 text-text-secondary-light dark:text-text-secondary-dark font-medium text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+            Tecnología
+          </button>
+          <button
+            class="flex h-9 shrink-0 items-center justify-center px-5 rounded-full bg-white dark:bg-surface-dark border border-gray-200 dark:border-gray-700 text-text-secondary-light dark:text-text-secondary-dark font-medium text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+            Hogar
+          </button>
+          <button
+            class="flex h-9 shrink-0 items-center justify-center px-5 rounded-full bg-white dark:bg-surface-dark border border-gray-200 dark:border-gray-700 text-text-secondary-light dark:text-text-secondary-dark font-medium text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+            Vales
+          </button>
+          <button
+            class="flex h-9 shrink-0 items-center justify-center px-5 rounded-full bg-white dark:bg-surface-dark border border-gray-200 dark:border-gray-700 text-text-secondary-light dark:text-text-secondary-dark font-medium text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+            Deportes
+          </button>
+        </div>
+      </div>
+      <!-- Featured Carousel (Hero) -->
+      <div class="px-4">
+        <div class="flex justify-between items-end mb-3">
+          <h3 class="text-lg font-bold text-text-main-light dark:text-text-main-dark">Destacados</h3>
+        </div>
+        <div class="flex overflow-x-auto no-scrollbar gap-4 snap-x snap-mandatory pb-2">
+          <!-- Featured Item 1 -->
+          <div
+            class="snap-center shrink-0 w-[85%] md:w-[45%] lg:w-[32%] relative rounded-2xl overflow-hidden aspect-[16/9] group shadow-lg">
+            <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-105"
+              data-alt="Modern headphones on a dark background"
+              style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBlMtB0_rPzbzsFa5nWW7_lMVsjtSiMxgjutE0MtQb68mNa6dowHtxHGt1DtkNCIa6SoXAFP9CR27Mc6HaGNLoUOjHzzy3u1_pQwRQ1MTonMrbG5lyodzRo5cngrIaKsxsIZ67YAIjJoKgwJH_elDROM0wQAaewr7_WzjTWbUPoIt4t0vzKT8MKd6N6AIsLv4SvQQNSpxI7Yos0xzHJJSCxZAfbxGb-MDEFrd-1J2oghc9IaPtqindcf1MJIgZWtiwupvFlXFLUY9N-');">
+            </div>
+            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
+            <div class="absolute bottom-0 left-0 p-5 w-full">
+              <span
+                class="inline-block px-2 py-1 mb-2 text-xs font-bold text-black bg-primary rounded uppercase tracking-wider">Oferta
+                del Mes</span>
+              <h4 class="text-white text-xl font-bold leading-tight mb-1">Audífonos Pro Wireless</h4>
+              <p class="text-gray-200 text-sm font-medium">Solo 500 pts <span class="line-through opacity-70 ml-2">800
+                  pts</span></p>
+            </div>
+          </div>
+          <!-- Featured Item 2 -->
+          <div
+            class="snap-center shrink-0 w-[85%] md:w-[45%] lg:w-[32%] relative rounded-2xl overflow-hidden aspect-[16/9] group shadow-lg">
+            <div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-105"
+              data-alt="White smartwatch product shot"
+              style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuA76wb-BlmxyqzfAGgDVDx7RonQCAyheszd7YFY3d6xuHhrc-TFyQQs7jxhUhxvPoDbfKzWq05daGD2dIuWvv2WlmelCMdx3INuI_jrlaMyLkDrJmaL93uTvszarYOw7zqhdEPZLVxWJVdNtNLdSpYiq4LJrZ7SM0IumPUKvW383531s0oO96xu6BhDW8zk4lUpyWB-mNMbB_4WOqkzDtr54GMknYmsRPaAgdA_Ug1Jt3c5cgeDt7JqQ8M79g4DCx6XDa8_WZZ9wePH');">
+            </div>
+            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
+            <div class="absolute bottom-0 left-0 p-5 w-full">
+              <span
+                class="inline-block px-2 py-1 mb-2 text-xs font-bold text-white bg-blue-600 rounded uppercase tracking-wider">Nuevo</span>
+              <h4 class="text-white text-xl font-bold leading-tight mb-1">Smart Watch Series 5</h4>
+              <p class="text-gray-200 text-sm font-medium">12,000 pts</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Product Grid -->
+      <div class="px-4">
+        <h3 class="text-lg font-bold text-text-main-light dark:text-text-main-dark mb-4">Recompensas Populares</h3>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+          <!-- Product Card 1 -->
+          <div
+            class="flex flex-col bg-white dark:bg-surface-dark rounded-xl overflow-hidden shadow-soft border border-gray-100 dark:border-gray-800 group">
+            <div class="relative aspect-square overflow-hidden bg-gray-100 dark:bg-gray-800">
+              <div class="w-full h-full bg-cover bg-center group-hover:scale-110 transition-transform duration-300"
+                data-alt="Premium wireless headphones close up"
+                style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCAuxH_9zwgHZ5dxOYU13l3a9tgigzbQp1m1C6SmUDQ13q_VjvJbITdoDpFwvBMh0hv4xkHpQQ9np9RsNb1lg7Li6wdht3KkyV7ltUrjyH5xDBZq56xQ9owd5E-5gFsJaFx_PjeBYDDwOitOpSFxeBTZg-cfkFa9-ugwqRWkM0TejOxpnAG4Ja4yKClSlNjq2EdUfL1yWqBeMoEUVgkUvtQ0dMO5SY4PTSGPmQri6Fa7UqLPm6KYkbEwPMMxBW71vZOXan3E4FlkoSZ');">
+              </div>
+              <button
+                class="absolute top-2 right-2 p-1.5 bg-white/80 dark:bg-black/50 backdrop-blur-sm rounded-full text-gray-600 dark:text-gray-300 hover:text-red-500 transition-colors">
+                <span class="material-symbols-outlined text-sm">favorite</span>
+              </button>
+            </div>
+            <div class="p-3 flex flex-col flex-1">
+              <h4 class="text-sm font-semibold text-text-main-light dark:text-text-main-dark line-clamp-2 mb-1">
+                Auriculares Noise Cancelling</h4>
+              <p class="text-primary dark:text-primary font-bold text-sm mt-auto mb-3">2,400 pts</p>
+              <button
+                class="w-full py-2 bg-primary/10 hover:bg-primary/20 text-primary-dark dark:text-primary font-semibold text-xs rounded-lg transition-colors">
+                Canjear
+              </button>
+            </div>
+          </div>
+          <!-- Product Card 2 -->
+          <div
+            class="flex flex-col bg-white dark:bg-surface-dark rounded-xl overflow-hidden shadow-soft border border-gray-100 dark:border-gray-800 group">
+            <div class="relative aspect-square overflow-hidden bg-gray-100 dark:bg-gray-800">
+              <div class="w-full h-full bg-cover bg-center group-hover:scale-110 transition-transform duration-300"
+                data-alt="Red sport sneaker shoe"
+                style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuASvmIC-klYThwSiCFp6z7ANcbNDipDRi5ew2XdQ_fLv8KjAHwUlShCGTZONdW5yB9CKbktTuvFr_H71rr13cXfydBNU85OJjySTeN2w7uH9nIwQF0s6HDKM2Xr2t7VARzYuNd7OR3OlF05gUYh4KcY9gqJ7NCJGU8mbaZfFQwKYPK325NpZO2M2PCmHjG-SqkB3Z5oKqn8xt26vC0AlzdDaxRMWERcvHv2IVrVJOqZ1tAqUJN5FJQSGo8DmNAd1mO_QAeGkF3S5XBu');">
+              </div>
+              <button
+                class="absolute top-2 right-2 p-1.5 bg-white/80 dark:bg-black/50 backdrop-blur-sm rounded-full text-gray-600 dark:text-gray-300 hover:text-red-500 transition-colors">
+                <span class="material-symbols-outlined text-sm">favorite</span>
+              </button>
+            </div>
+            <div class="p-3 flex flex-col flex-1">
+              <h4 class="text-sm font-semibold text-text-main-light dark:text-text-main-dark line-clamp-2 mb-1">Nike Air
+                Max Red</h4>
+              <p class="text-primary dark:text-primary font-bold text-sm mt-auto mb-3">8,500 pts</p>
+              <!-- Insufficient Points State -->
+              <div class="mt-auto">
+                <div class="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full mb-1 overflow-hidden">
+                  <div class="h-full bg-orange-400 w-1/3"></div>
+                </div>
+                <p class="text-[10px] text-gray-500 dark:text-gray-400 text-center mb-2">Te faltan 6,050 pts</p>
+                <button
+                  class="w-full py-2 bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 font-semibold text-xs rounded-lg cursor-not-allowed">
+                  Insuficiente
+                </button>
+              </div>
+            </div>
+          </div>
+          <!-- Product Card 3 -->
+          <div
+            class="flex flex-col bg-white dark:bg-surface-dark rounded-xl overflow-hidden shadow-soft border border-gray-100 dark:border-gray-800 group">
+            <div class="relative aspect-square overflow-hidden bg-gray-100 dark:bg-gray-800">
+              <div class="w-full h-full bg-cover bg-center group-hover:scale-110 transition-transform duration-300"
+                data-alt="Modern laptop on wooden desk"
+                style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDuw8QFIH1DH6QHhk3HZ6kNF9J_le0mS1WF8PhGf7JtLWjuWcfwKhGrzhX-7ac5k1GTNXML7Tx2dx6ZAkfNj_nyr4xUWXIK-b-tvkELj8bHy_tp9ZRpmF_PTC1QnDXH97oAhJVLzQFk-SLYrP6079ZsxMVyt7aZyRjgxPkWjipy1Am5SfBnUGgMw43Jlr4ud_UE3Z_WmpQBiPgw6fmpB8tUmnHapFJmtjn0pCyLI7X0z0zuFUVz5QXVylvJpJVRW-Dcrk18ORmM0-a8');">
+              </div>
+              <button
+                class="absolute top-2 right-2 p-1.5 bg-white/80 dark:bg-black/50 backdrop-blur-sm rounded-full text-gray-600 dark:text-gray-300 hover:text-red-500 transition-colors">
+                <span class="material-symbols-outlined text-sm">favorite</span>
+              </button>
+            </div>
+            <div class="p-3 flex flex-col flex-1">
+              <h4 class="text-sm font-semibold text-text-main-light dark:text-text-main-dark line-clamp-2 mb-1">MacBook
+                Pro 14"</h4>
+              <p class="text-primary dark:text-primary font-bold text-sm mt-auto mb-3">45,000 pts</p>
+              <!-- Insufficient Points State -->
+              <div class="mt-auto">
+                <div class="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full mb-1 overflow-hidden">
+                  <div class="h-full bg-orange-400 w-[5%]"></div>
+                </div>
+                <p class="text-[10px] text-gray-500 dark:text-gray-400 text-center mb-2">Te faltan 42,550 pts</p>
+                <button
+                  class="w-full py-2 bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 font-semibold text-xs rounded-lg cursor-not-allowed">
+                  Insuficiente
+                </button>
+              </div>
+            </div>
+          </div>
+          <!-- Product Card 4 -->
+          <div
+            class="flex flex-col bg-white dark:bg-surface-dark rounded-xl overflow-hidden shadow-soft border border-gray-100 dark:border-gray-800 group">
+            <div class="relative aspect-square overflow-hidden bg-gray-100 dark:bg-gray-800">
+              <div class="w-full h-full bg-cover bg-center group-hover:scale-110 transition-transform duration-300"
+                data-alt="White canvas sneakers"
+                style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuApbJjz3oOb44LeC0wVstZV7QlX7I26t_uwefgQRpLimc_onpYQYHDEQSZiyILyWt1A5K_AExdI9q2H9Xvh1k0qNms9FvdjLRxe5qsblGL0nt524-W_E3Ruj6FOkRK-jjSIndaxosYOPZueV4a634SUZaaW1vps-Qm1r8gAYITewdkwmxArYm07bhfobrc9q_d3wftL1dxuCEQyHy93w8vSs-c5KQolzN1S3EgPHHFwI5JJGlIcg48I_yrYt6tOJC8Y0uwV1n0XzFNS');">
+              </div>
+              <button
+                class="absolute top-2 right-2 p-1.5 bg-white/80 dark:bg-black/50 backdrop-blur-sm rounded-full text-gray-600 dark:text-gray-300 hover:text-red-500 transition-colors">
+                <span class="material-symbols-outlined text-sm">favorite</span>
+              </button>
+            </div>
+            <div class="p-3 flex flex-col flex-1">
+              <h4 class="text-sm font-semibold text-text-main-light dark:text-text-main-dark line-clamp-2 mb-1">
+                Zapatillas Casuales</h4>
+              <p class="text-primary dark:text-primary font-bold text-sm mt-auto mb-3">1,200 pts</p>
+              <button
+                class="w-full py-2 bg-primary/10 hover:bg-primary/20 text-primary-dark dark:text-primary font-semibold text-xs rounded-lg transition-colors">
+                Canjear
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- More Categories / Departments -->
+      <div class="px-4 pt-4">
+        <h3 class="text-lg font-bold text-text-main-light dark:text-text-main-dark mb-3">Explorar Categorías</h3>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+          <div class="relative h-24 rounded-lg overflow-hidden flex items-center justify-center group cursor-pointer">
+            <div class="absolute inset-0 bg-cover bg-center group-hover:scale-110 transition-transform duration-500"
+              data-alt="Kitchen and home appliances"
+              style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBIsM5Ko7dLkkTBji4L-ZD-pAHyWiEBKWvlb6KRkm8EMnlNQjzyGFEMPB8RLPWoTWTuOrC-yCMDTKb-XnBCh1A8HPcWQSV2zt-gB72IFgpgC6-YD-muYeh9wzY9DBWRmbJwdwvDhGKCjfF9uw9l3AYeyGFZr_tW_RXiZM1JpMf0RrxxPLKnAAKDTeKJYQTHgqVLh_oxuqfcZXnwUoEBr5fJmBn06mVniTZUkgZySyJa23KHPXakgMdSPkeGXjRM8smQ-LPcOO7TTXxB');">
+            </div>
+            <div class="absolute inset-0 bg-black/40 group-hover:bg-black/50 transition-colors"></div>
+            <span class="relative text-white font-bold text-lg z-10">Hogar</span>
+          </div>
+          <div class="relative h-24 rounded-lg overflow-hidden flex items-center justify-center group cursor-pointer">
+            <div class="absolute inset-0 bg-cover bg-center group-hover:scale-110 transition-transform duration-500"
+              data-alt="Gaming controller"
+              style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDfbLOd5_dcLKct2aTyQJ5EWZSpP8hAu8OW10jEVoP3ykxlTcUeSyblkBCwgCID3WqWDghFKkSPeAdE9KvAuwHaAg4veKWMApoew7MQAn7qFHM4QFuqrhNY86mfWl1WPbkPGB9bJvfC54MUNd9X6iLe-a7Os1guJRjLbzgTeF63wGtzG01O8XQT4osyKAQ7VxNMc3uZjESxo2dZzIBq_7jvTbTSUvskpAfEJEpJ9pgXqtKLIC9Y-RY6eqNd3DKI7GGFHRc4S4WewBYa');">
+            </div>
+            <div class="absolute inset-0 bg-black/40 group-hover:bg-black/50 transition-colors"></div>
+            <span class="relative text-white font-bold text-lg z-10">Juegos</span>
+          </div>
+        </div>
+      </div>
+    </main>
+
+  </div>
+  <!-- Bottom Navigation Bar -->
+  <%- include('partials/dock', { activePage: 'tienda_canje' }) %>
+</body>
+
+</html>