diff --git a/index.html b/index.html
index db6ad15..b0efd6c 100644
--- a/index.html
+++ b/index.html
@@ -613,7 +613,7 @@
       });
       peerListEl.innerHTML = list.innerHTML;
       peerCountEl.innerText = peerCount;
-      if (peerCount < 2){
+      if (peerCount < 3){
         document.getElementById("connectStatus").src = "static/ico/connect_ko.svg"
         gun.opt({peers: RELAYS});
       } else {
@@ -787,11 +787,50 @@
     gun.get(TABLE).on((data) => {var e = true})
   </script>
   <script id="app_modules">
+
     try {
       navigator.wakeLock.request("screen");
     } catch {
       console.log("ScreenLock Failed")
     }
+    String.prototype.toHex = function() {
+      
+        var colors = [
+          "#ff0000",
+          "#ff00ff",
+          "#00ff00",
+          "#0000ff",
+          "#00ffff",
+          "#ffffff",
+          "#000000",
+        ];
+        var color = this.charCodeAt(this.length - 1)
+        * this.charCodeAt(this.length - 2)
+        * this.charCodeAt(this.length - 3)
+        var cid = colors[color % colors.length]
+        console.log(color, cid)
+        return cid;
+    }
+    function stringToColour(str) {
+      console.log(str.toHex())
+      return str.toHex()
+
+    }
+    function colorIsDarkAdvanced(bgColor) {
+      let color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
+      let r = parseInt(color.substring(0, 2), 16); // hexToR
+      let g = parseInt(color.substring(2, 4), 16); // hexToG
+      let b = parseInt(color.substring(4, 6), 16); // hexToB
+      let uicolors = [r / 255, g / 255, b / 255];
+      let c = uicolors.map((col) => {
+        if (col <= 0.03928) {
+          return col / 12.92;
+        }
+        return Math.pow((col + 0.055) / 1.055, 2.4);
+      });
+      let L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
+      return L <= 0.179 ? '#FFFFFF' : '#000000';
+    }
     function setLayeredImages(comanda, key) {
       // Base paths for each layer type (adjust paths as needed)
       const basePaths = {
@@ -812,7 +851,7 @@
       };
 
       // Start div with relative positioning for layering
-      let html = `<div style="position: relative; width: 200px; height: 200px; background: white; display: inline-block;">`;
+      let html = `<div style="position: relative; width: 200px; height: 200px; background: white; display: inline-block; border: 1px dotted black;">`;
 
       // Layer 1: Selección image
       const selection = comanda["Selección"];
@@ -940,7 +979,8 @@
       parent,
       options,
       defaultval,
-      change_cb = () => { }
+      change_cb = () => { },
+      label = "Persona"
     ) {
       var details_0 = document.createElement("details"); // children: img_0, summary_0
       //details_0.open = true;
@@ -958,7 +998,7 @@
       span_0.style.float = "right";
       var p = SC_Personas[defaultval] || {};
       span_0.append(p.Nombre || "", " ", img_0);
-      summary_0.append("Persona", span_0);
+      summary_0.append(label, span_0);
       details_0.append(summary_0, document.createElement("br"));
       details_0.style.textAlign = "center";
       details_0.style.margin = "5px";
@@ -1310,6 +1350,50 @@
       });
       return out;
     }
+    function SC_parse_short(json) {
+      var valores = "<small style='font-size: 60%;'>Servicio base (10c)</small>\n";
+
+      Object.entries(json).forEach((entry) => {
+        valores += "<small style='font-size: 60%;'>" + entry[0] + ":</small> " + entry[1] + " ";
+        var combo = entry[0] + ";" + entry[1]
+        switch (entry[0]) {
+          case "Leche":
+            // Leche pequeña = 10c
+            if (
+              json["Tamaño"] == "Pequeño" &&
+              ["de Vaca", "Sin lactosa", "Vegetal"].includes(json["Leche"])
+            ) {
+              valores += "<small>(P = 10c)</small>";
+            }
+            // Leche grande = 20c
+            if (
+              json["Tamaño"] == "Grande" &&
+              ["de Vaca", "Sin lactosa", "Vegetal"].includes(json["Leche"])
+            ) {
+              valores += "<small>(G = 20c)</small>";
+            }
+            break;
+          case "Selección":
+            // Café = 20c
+            if (
+              ["Café con leche", "Solo café (sin leche)"].includes(
+                json["Selección"]
+              )
+            ) {
+              valores += "<small>(20c)</small>";
+            }
+            // ColaCao = 20c
+            if (json["Selección"] == "ColaCao con leche") {
+              valores += "<small>(20c)</small>";
+            }
+          default:
+            break;
+        }
+
+        valores += "\n"
+      });
+      return valores;
+    }
     function SC_priceCalc(json) {
       var precio = 0;
       var valores = "";
@@ -2252,6 +2336,7 @@
           }
           setTimeout(() => {tts = true; console.log("TTS Enabled"); toastr.info("Texto a voz disponible")}, 6500)
           const tablebody = safeuuid();
+          const tablebody2 = safeuuid();
           var btn_new = safeuuid();
           var tts_check = safeuuid();
           container.innerHTML = `
@@ -2263,23 +2348,45 @@
                   <input type="checkbox" id="${tts_check}" style="height: 25px;width: 25px;">
                 </label>
 
-                <div id="scrolltable"><table>
-                    <thead>
-                        <tr>
-                          <th>Zona</th>
-                          <th>Persona</th>
-                          <th style="${sc_nobtn};">Estado</th>
-                          <th>Comanda</th>
-                          <th>Precio</th>
-                        </tr>
-                    </thead>
-                    <tbody id="${tablebody}">
-                    </tbody>
-                </table></div>
+                <details style="background: beige; padding: 15px; border-radius: 15px; border: 2px solid black" open>
+                  <summary>Todas las comandas</summary>
+                  <div id="scrolltable">
+                    <table>
+                      <thead>
+                          <tr>
+                            <th>Persona</th>
+                            <th style="${sc_nobtn};">Estado</th>
+                            <th>Comanda</th>
+                          </tr>
+                      </thead>
+                      <tbody id="${tablebody}">
+                      </tbody>
+                    </table>
+                  </div>
+                </details>
+                <br>
+                <details style="background: lightpink; padding: 15px; border-radius: 15px; border: 2px solid black" open>
+                  <summary>Deudas</summary>
+                  <div id="scrolltable2">
+                    <table>
+                      <thead>
+                          <tr>
+                            <th>Persona</th>
+                            <th style="${sc_nobtn};">Estado</th>
+                            <th>Comanda</th>
+                          </tr>
+                      </thead>
+                      <tbody id="${tablebody2}">
+                      </tbody>
+                    </table>
+                  </div>
+                </details>
                 `;
 
           tableScroll("#scrolltable") // id="scrolltable"
+          tableScroll("#scrolltable2") // id="scrolltable2"
           var tablebody_EL = document.getElementById(tablebody);
+          var tablebody2_EL = document.getElementById(tablebody);
           var rows2 = {};
           function render() {
             function sorter(a, b) {
@@ -2298,7 +2405,9 @@
               return 0;
             }
             var tablebody_EL = document.getElementById(tablebody);
+            var tablebody2_EL = document.getElementById(tablebody2);
             tablebody_EL.innerHTML = "";
+            tablebody2_EL.innerHTML = "";
             var DefaultPersona = {
               Foto: "static/ico/user_generic.png",
               Nombre: "Desconocido??",
@@ -2328,15 +2437,19 @@
                   data.Persona = "135733281028030249";
                 }
                 if (sc_nobtn != "") {new_tr.style.pointerEvents = "none"}
-                
+                var regco = stringToColour(persona.Region.toLowerCase() || "?")
                 new_tr.innerHTML = `
-                  <td>${persona.Region.toUpperCase() || "?"}<br><br>${data.Fecha}</td>
-                  <td class="TextBorder" style="background-color: ${persona.SC_Anilla
-                  }; text-align: center; font-size: 17px;"><img src="${persona.Foto ||
-                  "static/ico/user_generic.png"
-                  }" height="50"><br> ${persona.Nombre || ""
-                  }<br> <span style="font-size: 25px;">${persona.Puntos || "0"
-                  } pts.</span></td>
+                  <td class="" style="text-align: center; font-size: 20px; background-color: ${regco}; color: ${colorIsDarkAdvanced(regco)}">
+                    <span style="font-size: 40px; text-transform: capitalize;">
+                      ${persona.Region.toLowerCase() || "?"}
+                    </span><br>
+                    <span style="background-color: white; border: 2px solid black; border-radius: 5px; display: inline-block; padding: 5px; color: black;">
+                      <img src="${persona.Foto || "static/ico/user_generic.png"}" height="70">
+                      <br>${persona.Nombre || ""}
+                      <br><span style="font-size: 17px;">${persona.Puntos || "0"} puntos.</span>
+                    </span>
+                    <br><br> ${data.Fecha}
+                  </td>
                         <td style="font-size: 17px; ${sc_nobtn};">
                           <button id="${btn_Pedido}" class="">Pedido</button>
                           <br><button id="${btn_Preparacion}" class="">En preparación</button>
@@ -2346,15 +2459,19 @@
                           <br><button id="${btn_Pagado}" class="">Pagado</button></td>
                         <td>
                           ${setLayeredImages(JSON.parse(data.Comanda), data._key)}
-                          <pre style="font-size: 17px; display: inline-block;">${SC_parse(JSON.parse(data.Comanda)) +
+                          <pre style="font-size: 15px; display: inline-block;"><span style="font-size: 20px;" id="${span_precio}"></span>\n${SC_parse_short(JSON.parse(data.Comanda)) +
                   "<hr>" +
                   data.Notas
                   }</pre></td>
-                        <td><pre>${resumen}</pre><span style="font-size: 20px;" id="${span_precio}"></span></td>
                         `;
-                tablebody_EL.append(new_tr);
+                if (data.Estado == "Deuda") {
+                  tablebody2_EL.append(new_tr);
+                } else {
+                  tablebody_EL.append(new_tr);
+                }
                 if (data.Estado == "Pedido") {
                   document.getElementById(btn_Pedido).classList = "rojo";
+                  new_tr.style.backgroundColor = "#FFFFFF";
                 }
                 if (data.Estado == "En preparación") {
                   document.getElementById(btn_Preparacion).classList = "rojo";
@@ -2370,16 +2487,15 @@
                 }
                 if (data.Estado == "Deuda") {
                   document.getElementById(btn_Deuda).classList = "rojo";
-                  new_tr.style.backgroundColor = "hotpink";
+                  new_tr.style.backgroundColor = "#f5d3ff";
                 }
                 new_tr.onclick = () => {
                   setUrlHash("supercafe," + data._key);
                 };
                 if (SC_Personas[data.Persona].Puntos >= 10) {
-                  document.getElementById(span_precio).innerHTML =
-                    "Gratis!<br> Usando puntos";
+                  document.getElementById(span_precio).innerHTML = `Total: Gratis!(${precio}c)`
                 } else {
-                  document.getElementById(span_precio).innerHTML = `Pagando ${precio}c`
+                  document.getElementById(span_precio).innerHTML = `Total: ${precio}c`
                 }
                 // Acciónes
                 document.getElementById(btn_Pedido).onclick = () => {
@@ -2539,10 +2655,12 @@
           var field_destino = safeuuid();
           var field_estado = safeuuid();
           var field_mensaje = safeuuid();
+          var field_respuesta = safeuuid();
           var btn_leer = safeuuid();
           var btn_desleer = safeuuid();
           var btn_guardar = safeuuid();
           var btn_borrar = safeuuid();
+          var div_actions = safeuuid();
           container.innerHTML = `
                 <h1>Notificación <code id="${nameh1}"></code></h1>
                 <fieldset style="float: left;">
@@ -2555,37 +2673,17 @@
                         Asunto<br>
                         <input type="text" id="${field_asunto}" value=""><br><br>
                     </label>
-                    <label>
-                        Origen<br>
-                        <select id="${field_origen}">
-                          <option value="" disabled selected>Selecciona una persona...</option>
-                          ${Object.entries(SC_Personas)
-              .sort(PERSONAS_Sorter)
-              .map((entry) => {
-                return `<option value="${entry[0]}">${entry[1].Nombre || "?"
-                  }</option>`;
-              })
-              .join("")}
-                        </select><br><br>
-
-                    </label>
-                    <label>
-                        Destino<br>
-                        <select id="${field_destino}">
-                          <option value="" disabled selected>Selecciona una persona...</option>
-                          ${Object.entries(SC_Personas)
-              .sort(PERSONAS_Sorter)
-              .map((entry) => {
-                return `<option value="${entry[0]}">${entry[1].Nombre || "?"
-                  }</option>`;
-              })
-              .join("")}
-                        </select><br><br>
-                    </label>
+                    <input type="hidden" id="${field_origen}">
+                    <input type="hidden" id="${field_destino}">
+                    <div id="${div_actions}"></div>
                     <label>
                         Mensaje<br>
                         <textarea id="${field_mensaje}"></textarea><br><br>
                     </label>
+                    <label>
+                        Respuesta<br>
+                        <textarea id="${field_respuesta}"></textarea><br><br>
+                    </label>
                     <label>
                         Estado<br>
                         <input readonly disabled type="text" id="${field_estado}" value="%%">
@@ -2604,6 +2702,25 @@
           document.getElementById(btn_desleer).onclick = () => {
             document.getElementById(field_estado).value = "por_leer";
           };
+          var divact = document.getElementById(div_actions)
+          addCategory_Personas(
+            divact,
+            SC_Personas,
+            "",
+            (value) => {
+              document.getElementById(field_origen).value = value;
+            },
+            "Origen"
+          );
+          addCategory_Personas(
+            divact,
+            SC_Personas,
+            "",
+            (value) => {
+              document.getElementById(field_destino).value = value;
+            },
+            "Destino"
+          );
           gun
             .get(TABLE)
             .get("notificaciones")
@@ -2622,6 +2739,29 @@
                   data["Destino"] || "";
                 document.getElementById(field_estado).value =
                   data["Estado"] || "";
+                document.getElementById(field_respuesta).value =
+                  data["Respuesta"] || "";
+                
+                // Persona select
+                divact.innerHTML = ""
+                addCategory_Personas(
+                  divact,
+                  SC_Personas,
+                  data["Origen"] || "",
+                  (value) => {
+                    document.getElementById(field_origen).value = value;
+                  },
+                  "Origen"
+                );
+                addCategory_Personas(
+                  divact,
+                  SC_Personas,
+                  data["Destino"] || "",
+                  (value) => {
+                    document.getElementById(field_destino).value = value;
+                  },
+                  "Destino"
+                );
               }
               if (typeof data == "string") {
                 SEA.decrypt(data, SECRET, (data) => {
@@ -2645,6 +2785,7 @@
               Origen: document.getElementById(field_origen).value,
               Destino: document.getElementById(field_destino).value,
               Mensaje: document.getElementById(field_mensaje).value,
+              Respuesta: document.getElementById(field_respuesta).value,
               Asunto: document.getElementById(field_asunto).value,
               Estado: document
                 .getElementById(field_estado)
diff --git a/sw.js b/sw.js
index 1d67954..ffde985 100644
--- a/sw.js
+++ b/sw.js
@@ -1,4 +1,4 @@
-var cacheName = 'telesec_2025-06-13_5';
+var cacheName = 'telesec_2025-06-19_2';
 
 self.addEventListener('install', event => {
   event.waitUntil(