diff --git a/Makefile_generador b/Makefile_generador
index 54d7f02..7592046 100644
--- a/Makefile_generador
+++ b/Makefile_generador
@@ -6,7 +6,7 @@ PY_SRC := $(wildcard src/**.py)
 
 all: generador_public generador_public/index.html static generador_public/res/canciones
 
-static: $(ALL_STATIC)
+static: $(ALL_STATIC) generador_public/main.css generador_public/song.css
 
 generador_public:
 	mkdir generador_public
@@ -20,6 +20,9 @@ generador_public/index.html: $(ALL_TEMPLATES) $(PY_SRC)
 		--other-latex latex/canciones/ \
 		--author NONE --title NONE
 
+generador_public/%.css: res_gen/less/%.less res/less/colors.less
+	lessc $< $@
+
 generador_public/%: res_gen/static/%
 	cp -ra $< $@
 
diff --git a/res_gen/less/colors.less b/res_gen/less/colors.less
new file mode 120000
index 0000000..4b3306b
--- /dev/null
+++ b/res_gen/less/colors.less
@@ -0,0 +1 @@
+../../res/less/colors.less
\ No newline at end of file
diff --git a/res_gen/less/main.less b/res_gen/less/main.less
new file mode 100644
index 0000000..0ca17b7
--- /dev/null
+++ b/res_gen/less/main.less
@@ -0,0 +1,69 @@
+@import "colors";
+
+h1 {
+    color: @title;
+    margin-inline: auto;
+    width: max-content;
+    max-width: 100%;
+    text-align: center;
+    @media (prefers-color-scheme: dark) {
+        color: @title-dark;
+    }
+    > a, > a:hover, > a:active, > a:visited {
+        color: @title;
+        @media (prefers-color-scheme: dark) {
+            color: @title-dark;
+        }
+    }
+}
+
+h2, h3 {
+    color: @subtitle;
+    font-weight: lighter;
+    margin-bottom: 0;
+    @media (prefers-color-scheme: dark) {
+        color: @subtitle-dark;
+    }
+}
+
+footer {
+    text-align: center;
+}
+
+body {
+    font-family: Helvetica, Arial, sans-serif;
+    color: @text;
+    background: @background;
+    max-width: 75em;
+    margin: 1em;
+    @media (prefers-color-scheme: dark) {
+        color: @text-dark;
+        background: @background-dark;
+    }
+    @media (min-width: 75em + 1em) {
+        margin: auto;
+    }
+}
+
+a {
+    text-decoration: none;
+    > span {
+        color: @text;
+        padding: 0.5em;
+        margin: 0.2em;
+        display: inline-block;
+        border-radius: @border-radius * 5;
+        border: 1px solid @text;
+        @media (prefers-color-scheme: dark) {
+            color: @text-dark;
+            border-color: @text-dark;
+        }
+        &:hover {
+            background: @secondary-hover;
+            transition-duration: @transition;
+            @media (prefers-color-scheme: dark) {
+                background: @secondary-hover-dark;
+            }
+        }
+    }
+}
diff --git a/res_gen/less/song.less b/res_gen/less/song.less
new file mode 100644
index 0000000..b4c2b34
--- /dev/null
+++ b/res_gen/less/song.less
@@ -0,0 +1,48 @@
+@import "colors.less";
+
+button,
+select,
+input[type="button"] {
+    min-width: 2em;
+    min-height: 2em;
+    padding: .4em;
+    border-style: none;
+    border-radius: @border-radius;
+    color: @text;
+    background-color: @secondary;
+    @media (prefers-color-scheme: dark) {
+        color: @text-dark;
+        background-color: @secondary-dark;
+    }
+    &:hover,
+    &.pair-sub:hover ~ &.pair-sup {
+        background-color: @secondary-hover;
+        transition-duration: @transition;
+        @media (prefers-color-scheme: dark) {
+            background-color: @secondary-hover-dark;
+        }
+    }
+}
+
+.flex-reverse {
+  display: inline-flex;
+  flex-direction: row-reverse;
+}
+
+.buttonpair.flex-reverse button.right,
+.buttonpair.flex-reverse button.left {
+    border: 1px solid @secondary-hover;
+    @media (prefers-color-scheme: dark) {
+        border-color: @secondary-hover-dark;
+    }
+}
+
+.buttonpair.flex-reverse button.right {
+  border-radius: 0px 10px 10px 0px;
+  border-width: 0 0 0 2px;
+}
+
+.buttonpair.flex-reverse button.left {
+  border-radius: 10px 0px 0px 10px;
+  border-width: 0 2px 0 0;
+}
diff --git a/res_gen/static/favicon.svg b/res_gen/static/favicon.svg
new file mode 100644
index 0000000..64660f1
--- /dev/null
+++ b/res_gen/static/favicon.svg
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   data-v-fde0c5aa=""
+   viewBox="0 0 300 300"
+   class="iconAbove"
+   version="1.1"
+   id="svg18"
+   sodipodi:docname="favicon.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata22">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="956"
+     inkscape:window-height="1041"
+     id="namedview20"
+     showgrid="false"
+     inkscape:zoom="0.86620581"
+     inkscape:cx="180.22708"
+     inkscape:cy="192.64261"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg18"
+     inkscape:document-rotation="0" />
+  <!---->
+  <defs
+     data-v-fde0c5aa=""
+     id="defs2">
+    <!---->
+  </defs>
+  <rect
+     data-v-fde0c5aa=""
+     fill="#f3eea8"
+     x="0"
+     y="0"
+     width="300"
+     height="300"
+     class="logo-background-square"
+     id="rect4"
+     style="stroke-width:1" />
+  <defs
+     data-v-fde0c5aa=""
+     id="defs6">
+    <!---->
+  </defs>
+  <defs
+     data-v-fde0c5aa=""
+     id="defs11">
+    <!---->
+  </defs>
+  <g
+     data-v-fde0c5aa=""
+     id="69d3071f-d543-44f2-8f59-52c9a11420f9"
+     stroke="none"
+     fill="#933547"
+     transform="matrix(3.0327786,0,0,3.0327786,-1.6389288,8.1593111)">
+    <path
+       d="M 95,8.539 53,22.986 V 73.27 c -1.832,-0.864 -4.27,-1.001 -6.694,-0.193 -4.192,1.397 -6.74,5.078 -5.692,8.222 1.048,3.144 5.295,4.559 9.487,3.162 3.742,-1.247 6.166,-4.314 5.899,-7.195 V 32 L 92,19.603 v 32.681 c -1.835,-0.876 -4.286,-1.019 -6.722,-0.207 -4.192,1.397 -6.74,5.078 -5.692,8.222 1.048,3.144 5.295,4.559 9.487,3.162 3.525,-1.175 5.878,-3.965 5.918,-6.692 H 95 Z M 19,9 v 43 c -1.869,-0.892 -4.481,-0.971 -6.963,-0.143 -4.269,1.423 -6.865,5.172 -5.798,8.374 1.067,3.202 5.393,4.644 9.663,3.221 3.59,-1.197 6.047,-4.038 6.087,-6.816 H 22 V 23 c 0,0 12.926,3.741 17,18 C 39,24.704 25,22 19,9 Z M 37.423,79 H 2 v 2 h 35.476 a 7.751,7.751 0 0 1 -0.053,-2 z"
+       id="path13" />
+    <path
+       d="M 98,81 V 79 H 58.9 a 8.662,8.662 0 0 1 -0.591,2 z M 5.078,64 H 2 v 2 H 7.87 A 8.874,8.874 0 0 1 5.078,64 Z M 98,66 v -2 h -3.769 a 13.016,13.016 0 0 1 -3.377,2 z M 78.401,64 H 59 v 2 H 81.155 A 8.74,8.74 0 0 1 78.401,64 Z M 21.09,64 a 13.4,13.4 0 0 1 -3.433,2 H 50 V 64 Z M 25,49 h 25 v 2 H 25 Z M 11.125,49 H 2 v 2 h 5.25 a 13.625,13.625 0 0 1 3.839,-1.99 z M 59,51 h 21.822 a 13.5,13.5 0 0 1 3.507,-1.769 c 0.264,-0.088 0.53,-0.16 0.796,-0.231 H 59 Z M 32.25,34 H 25 v 2 h 8.595 A 22.994,22.994 0 0 0 32.25,34 Z M 2,34 h 14 v 2 H 2 Z m 57,2 H 89 V 34 H 59.406 L 59,34.14 Z M 41.551,36 H 50 v -2 h -8.898 c 0.175,0.642 0.323,1.311 0.449,2 z M 32.734,21 h 18.028 a 2.991,2.991 0 0 1 1.263,-0.851 L 55.366,19 h -24.68 l 0.011,0.011 c 0.68,0.657 1.362,1.317 2.037,1.989 z M 2,19 h 14 v 2 H 2 Z"
+       id="path15" />
+  </g>
+  <!---->
+</svg>
diff --git a/res_gen/static/img/down.svg b/res_gen/static/img/down.svg
new file mode 100644
index 0000000..6a89c73
--- /dev/null
+++ b/res_gen/static/img/down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
\ No newline at end of file
diff --git a/res_gen/static/img/new.svg b/res_gen/static/img/new.svg
new file mode 100644
index 0000000..9f774b4
--- /dev/null
+++ b/res_gen/static/img/new.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"/></svg>
\ No newline at end of file
diff --git a/res_gen/static/img/random.svg b/res_gen/static/img/random.svg
new file mode 100644
index 0000000..d9a323f
--- /dev/null
+++ b/res_gen/static/img/random.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm64 96a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm64 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm128 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>
\ No newline at end of file
diff --git a/res_gen/static/img/trash.svg b/res_gen/static/img/trash.svg
new file mode 100644
index 0000000..6679b45
--- /dev/null
+++ b/res_gen/static/img/trash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z"/></svg>
\ No newline at end of file
diff --git a/res_gen/static/img/up.svg b/res_gen/static/img/up.svg
new file mode 100644
index 0000000..cc1b607
--- /dev/null
+++ b/res_gen/static/img/up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>
\ No newline at end of file
diff --git a/res_gen/templates/generador.html b/res_gen/templates/generador.html
index ddc4e2b..0d00de3 100644
--- a/res_gen/templates/generador.html
+++ b/res_gen/templates/generador.html
@@ -4,10 +4,9 @@
 		<title>Generador de cancioneros</title>
 		<meta charset='utf-8' />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="icon" type="image/svg+xml" href="https://canciones.sanleandrovalencia.es/favicon.svg"/>
-		<link rel="stylesheet" type="text/css" href="https://canciones.sanleandrovalencia.es/main.css"/>
-		<link rel="stylesheet" type="text/css" href="https://canciones.sanleandrovalencia.es/index.css">
-		<link rel="stylesheet" type="text/css" href="https://canciones.sanleandrovalencia.es/song.css">
+		<link rel="icon" type="image/svg+xml" href="favicon.svg"/>
+		<link rel="stylesheet" type="text/css" href="main.css"/>
+		<link rel="stylesheet" type="text/css" href="song.css">
 <style>
 button.external,
 a.external {
@@ -113,20 +112,35 @@ span.songSelector {
 				Añadir
 				<span class="buttonpair flex-reverse">
 					<button type="button" class="icon right pair-sub" title="Añadir una canción aleatoria" onclick="addRandomSong()">
+<<<<<<< HEAD
 						aleatoria <img class="greenFilter" src="https://canciones.sanleandrovalencia.es/svg/random.svg"></button>
 					<button type="button" class="icon left pair-sup" title="Añadir una canción vacía" onclick="addSong()">
 						<img class="greenFilter" src="https://canciones.sanleandrovalencia.es/svg/new.svg"> una canción</button>
+=======
+						aleatoria <img class="greenFilter" src="img/random.svg"></button>
+					<button type="button" class="icon left pair-sup" title="Añadir una canción vacía" onclick="addSong()">
+						<img class="greenFilter" src="img/new.svg"> una canción</button>
+>>>>>>> 326fe44 (hash functionality and styling for generador)
 				</span>
 				<br>
 				Añadir
 				<span class="buttonpair flex-reverse">
 					<button type="button" class="icon right pair-sub" title="Añade una canción aleatoria por categoría" onclick="addRandomSongs()">
+<<<<<<< HEAD
 						aleatorias <img class="greenFilter" src="https://canciones.sanleandrovalencia.es/svg/random.svg"></button>
 					<button type="button" class="icon left pair-sup" title="Añade una canción por categoría" onclick="addFirstSongs()">
 						<img class="greenFilter" src="https://canciones.sanleandrovalencia.es/svg/new.svg"> varias canciones</button>
 				</span>
 				<br>
 				<button type="button" class="icon" onclick="clearSongs()"><img class="redFilter" src="https://canciones.sanleandrovalencia.es/svg/trash.svg"> Borrar todas</button>
+=======
+						aleatorias <img class="greenFilter" src="img/random.svg"></button>
+					<button type="button" class="icon left pair-sup" title="Añade una canción por categoría" onclick="addFirstSongs()">
+						<img class="greenFilter" src="img/new.svg"> varias canciones</button>
+				</span>
+				<br>
+				<button type="button" class="icon" onclick="clearSongs()"><img class="redFilter" src="img/trash.svg"> Borrar todas</button>
+>>>>>>> 326fe44 (hash functionality and styling for generador)
 			</p>
 			<ol id='songlist'></ol>
 			<template id='songtemplate'>