agents-city 0.3.0-beta.21 → 0.3.0

package/bin/hall.html

@@ -11,13 +11,60 @@
 <style>
 /* The map's palette and its three typefaces. The hall manages the city the map
    draws; they must not look like two products. Single visual world on purpose. */
+/* Two skins, one set of names. DAY is the default — the palette of
+   agentscity.net, so the local tool and the public site are visibly one
+   product. Night is the map's own light, chosen with the switch and
+   remembered. Nothing below this block names a colour directly. */
 :root{
-  --suelo:#131a24; --suelo2:#1b2431; --suelo3:#222d3c; --linea:#26313f; --linea2:#38495f;
-  --tinta:#e8e2d4; --tinta2:#9aa7b8; --tinta3:#6b7889;
-  --lampara:#f5c451; --carta:#e2604f; --verde:#4ec98a;
+  /* Day is the default: the palette of agentscity.net, so the tool on your
+     machine and the public site are one product from the first second. Night
+     is one click away and remembered — it is the map's own light, not the
+     app's. */
+  --suelo:#f3f0e8; --suelo2:#fbfaf6; --suelo3:#ffffff;
+  --linea:#e2ddd0; --linea2:#cdc6b6;
+  --tinta:#1d2229; --tinta2:#515861; --tinta3:#7b8187;
+  --lampara:#7048e8; --carta:#dd5d3e; --verde:#5f8f2b;
+  --panel:#fbfaf6; --burbuja:#ffffff; --burbuja-mia:#f4efff;
+  --borde-acento:#c9b8ff; --sobre-lampara:#ffffff; --lampara-viva:#5331bd;
+  --chip-luz:52% 86%; --chip-tinta:#1d2229;
+  --tono-palabra:#6b46f0; --tono-evidencia:#2b7ab8; --tono-verificacion:#1c8d78;
   --hud:"Chakra Petch",system-ui,sans-serif; --texto:"Newsreader",Georgia,serif;
   --mono:"IBM Plex Mono",ui-monospace,monospace;
+  --sombra:0 18px 40px -30px #1d222945;
+
+  /* Night, declared once: the city's own light, an isometric map at 3am. The
+     two rules below only MAP these; a palette written twice drifts twice. */
+  --noche-suelo:#131a24; --noche-suelo2:#1b2431; --noche-suelo3:#222d3c;
+  --noche-linea:#26313f; --noche-linea2:#38495f;
+  --noche-tinta:#e8e2d4; --noche-tinta2:#9aa7b8; --noche-tinta3:#6b7889;
+  --noche-lampara:#f5c451; --noche-carta:#e2604f; --noche-verde:#4ec98a;
+  --noche-panel:#101720; --noche-burbuja:#171f2a; --noche-burbuja-mia:#27291f;
+  --noche-borde-acento:#65552d; --noche-sobre-lampara:#1a1408;
+  --noche-lampara-viva:#ffd469;
+  --noche-chip-luz:36% 30%; --noche-chip-tinta:#f3eee4;
+  --noche-tono-palabra:#aa93ff; --noche-tono-evidencia:#61ace9;
+  --noche-tono-verificacion:#50ccb1;
+  --noche-sombra:none;
+}
+/* Night, mapped from the tokens declared once above. */
+:root[data-tema="oscuro"]{
+  --suelo:var(--noche-suelo); --suelo2:var(--noche-suelo2); --suelo3:var(--noche-suelo3);
+  --linea:var(--noche-linea); --linea2:var(--noche-linea2);
+  --tinta:var(--noche-tinta); --tinta2:var(--noche-tinta2); --tinta3:var(--noche-tinta3);
+  --lampara:var(--noche-lampara); --carta:var(--noche-carta); --verde:var(--noche-verde);
+  --panel:var(--noche-panel); --burbuja:var(--noche-burbuja);
+  --burbuja-mia:var(--noche-burbuja-mia);
+  --borde-acento:var(--noche-borde-acento); --sobre-lampara:var(--noche-sobre-lampara);
+  --lampara-viva:var(--noche-lampara-viva);
+  --chip-luz:var(--noche-chip-luz); --chip-tinta:var(--noche-chip-tinta);
+  --tono-palabra:var(--noche-tono-palabra); --tono-evidencia:var(--noche-tono-evidencia);
+  --tono-verificacion:var(--noche-tono-verificacion);
+  --sombra:var(--noche-sombra);
 }
+/* No `prefers-color-scheme` rule on purpose: daylight is THE default, not a
+   default that a machine set to dark quietly overrides. Night is a choice made
+   here, with the switch, and remembered — which is why an owner whose whole
+   desktop is dark still opens a paper-coloured hall. */
 *{box-sizing:border-box}
 html,body{height:100%}
 body{margin:0;background:var(--suelo);color:var(--tinta);font-family:var(--texto);
@@ -41,10 +88,17 @@ nav{background:var(--suelo2);border-right:1px solid var(--linea);padding:20px 0
 .marca{padding:0 18px}
 .badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--hud);font-size:10px;
   letter-spacing:.14em;text-transform:uppercase;color:var(--lampara);
-  border:1px solid #4a4127;background:#241f14;padding:4px 9px;border-radius:2px}
+  border:1px solid var(--borde-acento);background:var(--burbuja-mia);padding:4px 9px;border-radius:2px}
 .badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--lampara)}
 .marca h2{font-size:19px;margin:9px 0 0}
 .marca p{margin:4px 0 0;font-size:12px;color:var(--tinta3);line-height:1.45}
+.railCiudad{margin:0 18px;padding:10px 12px;border-radius:7px;background:var(--suelo3);
+  border:1px solid var(--linea);display:flex;flex-direction:column;gap:2px}
+.railCiudad .railEtiqueta{font:600 9px var(--hud);letter-spacing:.16em;text-transform:uppercase;
+  color:var(--tinta3)}
+.railCiudad b{font:600 15px var(--hud);color:var(--tinta)}
+.railCiudad .railDe{font:10.5px var(--mono);color:var(--tinta3)}
+.railOtras{margin-top:6px;padding-top:6px;border-top:1px solid var(--linea)}
 nav ol{list-style:none;margin:0;padding:0 10px;display:flex;flex-direction:column;gap:2px}
 nav li{display:flex;gap:10px;align-items:baseline;padding:9px 10px;border-radius:3px;
   font-family:var(--hud);font-size:13.5px;color:var(--tinta2);cursor:pointer;white-space:nowrap}
@@ -54,6 +108,21 @@ nav li .n{font-family:var(--mono);font-size:10px;color:var(--tinta3);margin-left
 nav .pie{margin-top:auto;padding:14px 18px 0;border-top:1px solid var(--linea);
   display:flex;flex-direction:column;gap:8px}
 nav .pie a{font-family:var(--hud);font-size:12px;color:var(--tinta3);text-decoration:none}
+.peligro{border:1px solid var(--carta);border-radius:8px;padding:16px 18px;
+  background:color-mix(in srgb,var(--carta) 7%,var(--suelo2));display:flex;
+  flex-direction:column;gap:10px;align-items:flex-start}
+.peligro h3{font:600 13px var(--hud);color:var(--carta)}
+.bt.malo{border-color:var(--carta);color:var(--carta)}
+.bt.malo:hover{background:var(--carta);color:var(--suelo2)}
+.avisoVersion{margin:0;font:11px/1.45 var(--mono);color:var(--lampara);
+  border:1px solid var(--borde-acento);background:var(--burbuja-mia);
+  padding:7px 9px;border-radius:4px}
+.avisoVersion[hidden]{display:none}
+.ajustes{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
+.temaBoton{border:1px solid var(--linea2);background:var(--suelo3);
+  color:var(--tinta2);font:11px var(--mono);padding:5px 11px;border-radius:999px;
+  cursor:pointer;box-shadow:var(--sombra)}
+.temaBoton:hover{color:var(--lampara);border-color:var(--lampara)}
 nav .pie a:hover{color:var(--lampara)}
 #ciudades select{width:100%;background:var(--suelo);border:1px solid var(--linea2);
   border-radius:3px;padding:6px 8px;font-family:var(--hud);font-size:12px;color:var(--tinta)}
@@ -104,8 +173,8 @@ h1{font-size:26px;line-height:1.12}
   background:var(--suelo3);color:var(--tinta2)}
 .bt:hover:not(:disabled){color:var(--tinta);border-color:var(--tinta3)}
 .bt:focus-visible{outline:1px solid var(--lampara);outline-offset:2px}
-.bt.ppal{background:var(--lampara);border-color:var(--lampara);color:#1a1408}
-.bt.ppal:hover:not(:disabled){background:#ffd469;border-color:#ffd469}
+.bt.ppal{background:var(--lampara);border-color:var(--lampara);color:var(--sobre-lampara)}
+.bt.ppal:hover:not(:disabled){background:var(--lampara-viva);border-color:var(--lampara-viva)}
 .bt:disabled{opacity:.4;cursor:not-allowed}
 .bt.mini{padding:4px 10px;font-size:11px}
 input[type=text],select{background:var(--suelo);border:1px solid var(--linea2);
@@ -198,13 +267,13 @@ input[type=text]:focus,select:focus{outline:none;border-color:var(--lampara)}
 .fichasRPG{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
 .fichaRPG{background:var(--suelo2);border:1px solid var(--linea);border-radius:8px;
   padding:14px 15px;display:flex;flex-direction:column;gap:9px}
-.fichaRPG.rpgSeat{border-color:#65552d}
+.fichaRPG.rpgSeat{border-color:var(--borde-acento)}
 .rpgCab{display:flex;align-items:center;gap:10px}
 .rpgCara{width:40px;height:40px;border-radius:9px;flex:none}
 .rpgCab h3{margin:0;font-size:15px}
 .rpgTags{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px;align-items:center}
 .kindChip{font:600 9px var(--hud);letter-spacing:.08em;text-transform:uppercase;
-  padding:2px 7px;border-radius:8px;color:#0f172a}
+  padding:2px 7px;border-radius:8px;color:#0f172a;font-weight:600}
 .kindChip.code{background:#3b82f6}.kindChip.knowledge{background:#8b5cf6;color:#f4efe5}
 .kindChip.coordinator{background:#f59e0b}
 .rpgRol,.rpgRun,.rpgHogar{font:10.5px var(--mono);color:var(--tinta3)}
@@ -235,8 +304,70 @@ input[type=text]:focus,select:focus{outline:none;border-color:var(--lampara)}
 .rpgBotones{display:flex;gap:6px;margin-left:auto}
 .rpgMini{border:1px solid var(--linea2);background:var(--suelo);color:var(--tinta3);
   font:10px var(--mono);padding:3px 7px;border-radius:4px;cursor:pointer}
-.rpgMini:hover{color:var(--lampara);border-color:#65552d}
+.rpgMini:hover{color:var(--lampara);border-color:var(--borde-acento)}
 .rpgSubir input{display:none}
+/* Adding an agent is the city growing, so it reads as an action, not a chip. */
+.rpgAlta{margin-top:14px;border:1px solid var(--borde-acento);background:var(--suelo2);
+  color:var(--lampara);font:12px var(--mono);padding:7px 14px;border-radius:5px;
+  cursor:pointer}
+.rpgAlta:hover{background:var(--suelo);border-color:var(--lampara)}
+
+/* ── the guided first run ────────────────────────────────────────────────── */
+.bv{display:flex;flex-direction:column;gap:26px;max-width:min(760px,100%)}
+.bv .prosa{max-width:100%}
+.bv code.mono{word-break:break-all}
+/* The live rail has nothing to show before a city exists, and it costs half
+   the screen exactly when the guide needs it. */
+body.enGuia #livePanel,body.enGuia #liveResize{display:none}
+body.enGuia #app{grid-template-columns:250px minmax(0,1fr)}
+.bvPasos{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
+.bvPunto{display:flex;align-items:center;gap:6px;font:10px var(--hud);letter-spacing:.1em;
+  text-transform:uppercase;color:var(--tinta3)}
+.bvPunto i{width:8px;height:8px;border-radius:50%;background:var(--linea2);display:block}
+.bvPunto+.bvPunto{margin-left:10px}
+.bvPunto.aqui{color:var(--lampara)}.bvPunto.aqui i{background:var(--lampara)}
+.bvPunto.hecho i{background:var(--verde)}
+.bvHola{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start}
+@media(max-width:820px){.bvHola{grid-template-columns:1fr}}
+.bvArte{display:flex;flex-direction:column;gap:2px;padding-top:6px}
+.bvCasa{width:92px;height:83px;margin-bottom:-26px;filter:drop-shadow(var(--sombra))}
+.bvPaso{display:flex;flex-direction:column;gap:14px}
+.bvPaso h1{font-size:26px;line-height:1.15}
+.bvEtiqueta{font:600 10px var(--hud);letter-spacing:.14em;text-transform:uppercase;
+  color:var(--tinta3)}
+.bvRejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
+.bvRejilla.bvTres{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
+.bvOpcion{text-align:left;display:flex;flex-direction:column;gap:4px;padding:12px 13px;
+  border:1px solid var(--linea2);border-radius:7px;background:var(--suelo2);cursor:pointer}
+.bvOpcion b{font-family:var(--hud);font-size:13px;color:var(--tinta)}
+.bvOpcion span{font-size:12px;line-height:1.45;color:var(--tinta3)}
+.bvOpcion:hover{border-color:var(--lampara)}
+.bvOpcion.elegida{border-color:var(--lampara);background:var(--burbuja-mia);
+  box-shadow:inset 3px 0 0 var(--lampara)}
+.bvChips{display:flex;flex-wrap:wrap;gap:6px}
+.bvChip{border:1px solid var(--linea2);background:var(--suelo2);color:var(--tinta2);
+  font:11px var(--mono);padding:5px 10px;border-radius:999px;cursor:pointer}
+.bvChip:hover{border-color:var(--lampara)}
+.bvChip.elegida{border-color:var(--lampara);background:var(--burbuja-mia);color:var(--tinta)}
+.bvClase{font:600 9px var(--mono);letter-spacing:.08em;text-transform:uppercase;
+  opacity:.55;font-style:normal;margin-right:6px}
+.bvChip.cl-docs .bvClase{color:var(--verde);opacity:.85}
+.bvChip.cl-worktree .bvClase{color:var(--lampara);opacity:.85}
+.bvBuscador{display:flex;gap:8px;align-items:center;margin:4px 0 10px}
+.bvBuscador input{flex:1;background:var(--suelo);border:1px solid var(--linea2);
+  border-radius:4px;padding:8px 10px;font-family:var(--hud);font-size:13px;color:var(--tinta)}
+.bvBuscador input:focus{outline:none;border-color:var(--lampara)}
+.bt.bvMini{padding:7px 12px;font-size:11px;white-space:nowrap}
+.bvMotor{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
+.bvMotor .campo{margin:0}
+@media (max-width:640px){.bvMotor{grid-template-columns:1fr}}
+.bvFichas{display:flex;flex-direction:column;gap:6px}
+.bvFicha{display:flex;gap:10px;align-items:baseline;padding:9px 12px;border-radius:6px;
+  border:1px solid var(--linea);background:var(--suelo2)}
+.bvFicha b{font-family:var(--hud);font-size:13px}
+.bvFicha span{font:11px var(--mono);color:var(--tinta3)}
+.bvBotones{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}
+.bvSiguientes{display:flex;gap:9px;flex-wrap:wrap}
 /* The instruction editor: one file, one reader, saved where the agent lives. */
 #editorIns{position:fixed;inset:0;background:rgba(6,10,15,.72);z-index:60;
   display:flex;align-items:center;justify-content:center}
@@ -278,7 +409,7 @@ input[type=text]:focus,select:focus{outline:none;border-color:var(--lampara)}
 @media(prefers-reduced-motion:reduce){.cargando::after{animation:none}#toast{transition:none}}
 
 /* ── live city feed ────────────────────────────────────────────────────── */
-#livePanel{background:#101720;border-left:1px solid var(--linea);min-width:0;min-height:0;
+#livePanel{background:var(--panel);border-left:1px solid var(--linea);min-width:0;min-height:0;
   display:flex;flex-direction:column;overflow:hidden;position:relative}
 /* The divider you can grab: the rail's left edge. Wide enough for a mouse,
    invisible until hovered so it does not read as chrome. */
@@ -301,26 +432,26 @@ input[type=text]:focus,select:focus{outline:none;border-color:var(--lampara)}
    framed row, not two grey buttons — the person who missed the show has to be
    able to FIND the way back without being told where it is. */
 #demoControles{display:flex;align-items:center;gap:7px;margin-top:10px;
-  padding:7px 9px;border:1px solid #65552d;border-radius:5px;
+  padding:7px 9px;border:1px solid var(--borde-acento);border-radius:5px;
   background:rgba(245,196,81,.06)}
 #demoControles span{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
   text-transform:uppercase;color:var(--lampara);margin-right:auto}
 #demoControles button{border:1px solid var(--linea2);background:var(--suelo);
   color:var(--tinta2);font-family:var(--hud);font-size:12px;padding:6px 11px;
   border-radius:4px;cursor:pointer}
-#demoControles #demoReplay{background:var(--lampara);color:#131a24;
+#demoControles #demoReplay{background:var(--lampara);color:var(--sobre-lampara);
   border-color:var(--lampara);font-weight:600}
 #demoControles button:hover{filter:brightness(1.12)}
 #liveFilter{width:100%;font-family:var(--hud);font-size:11px;padding:6px 8px;background:var(--suelo)}
 #liveWorkToggle{border:1px solid var(--linea2);background:var(--suelo);color:var(--tinta3);
   border-radius:3px;padding:0 9px;font:600 9.5px var(--hud);text-transform:uppercase;
   letter-spacing:.06em;cursor:pointer;white-space:nowrap}
-#liveWorkToggle:hover,#liveWorkToggle.on{color:var(--lampara);border-color:#65552d}
+#liveWorkToggle:hover,#liveWorkToggle.on{color:var(--lampara);border-color:var(--borde-acento)}
 #liveContext{display:flex;align-items:center;gap:9px;margin-top:10px;padding-top:10px;
   border-top:1px solid var(--linea)}
 .livePeople{display:flex;padding-left:5px}.livePerson{width:25px;height:25px;margin-left:-5px;
   border-radius:50%;display:grid;place-items:center;border:2px solid var(--suelo2);
-  background:hsl(var(--actor-hue) 36% 30%);color:#f3eee4;font:600 8.5px var(--hud)}
+  background:hsl(var(--actor-hue) var(--chip-luz));color:var(--chip-tinta);font:600 8.5px var(--hud)}
 .livePerson svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;
   stroke-linecap:round;stroke-linejoin:round}
 .liveContextText{min-width:0;color:var(--tinta3);font:10px/1.35 var(--hud)}
@@ -332,15 +463,15 @@ input[type=text]:focus,select:focus{outline:none;border-color:var(--lampara)}
   align-items:start;gap:8px;max-width:94%}
 .liveTurn.chair{grid-template-columns:minmax(0,1fr) 31px;align-self:flex-end}
 .liveTurn.chair .liveAvatar{grid-column:2}.liveTurn.chair .liveBubble{grid-column:1;grid-row:1;
-  border-radius:9px 3px 9px 9px;background:#27291f;border-color:#49452d}
+  border-radius:9px 3px 9px 9px;background:var(--burbuja-mia);border-color:var(--borde-acento)}
 .liveTurn.member{align-self:flex-start}.liveTurn.system{align-self:center;max-width:100%}
-.liveTurn.system .liveAvatar{display:none}.liveTurn.system .liveBubble{grid-column:1/-1;background:#171f2a}
-.liveTurn.question{--tono:var(--lampara)}.liveTurn.floor{--tono:#aa93ff}
-.liveTurn.evidence{--tono:#61ace9}.liveTurn.decision{--tono:var(--verde)}
-.liveTurn.verification{--tono:#50ccb1}.liveTurn.error{--tono:var(--carta)}
+.liveTurn.system .liveAvatar{display:none}.liveTurn.system .liveBubble{grid-column:1/-1;background:var(--burbuja)}
+.liveTurn.question{--tono:var(--lampara)}.liveTurn.floor{--tono:var(--tono-palabra)}
+.liveTurn.evidence{--tono:var(--tono-evidencia)}.liveTurn.decision{--tono:var(--verde)}
+.liveTurn.verification{--tono:var(--tono-verificacion)}.liveTurn.error{--tono:var(--carta)}
 .liveAvatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;
-  background:hsl(var(--actor-hue) 36% 29%);color:#f4efe5;border:1px solid hsl(var(--actor-hue) 38% 39%);
-  font:600 9.5px var(--hud);box-shadow:0 0 0 2px #101720}
+  background:hsl(var(--actor-hue) var(--chip-luz));color:var(--chip-tinta);border:1px solid hsl(var(--actor-hue) 38% 55%);
+  font:600 9.5px var(--hud);box-shadow:0 0 0 2px var(--panel)}
 .liveAvatar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
   stroke-linecap:round;stroke-linejoin:round}
 /* Identicon faces: the SVG brings its own ground and kind-tinted ring, so the
@@ -371,14 +502,23 @@ input[type=text]:focus,select:focus{outline:none;border-color:var(--lampara)}
 <div id="app">
   <nav>
     <div class="marca">
-      <span class="badge">town hall</span>
+      <span class="badge" data-i18n>town hall</span>
       <h2>Agents City</h2>
-      <p>Manage one autonomous city: its seat, repo agents, roads and map. Everything here is a plain file you can also inspect by hand.</p>
+      <p data-i18n>Manage one autonomous city: its seat, repo agents, roads and map. Everything here is a plain file you can also inspect by hand.</p>
+      <div class="ajustes">
+        <button type="button" id="temaBoton" class="temaBoton"
+          title="Daylight is the default; night is the map's own light">☾ Night</button>
+        <button type="button" id="idiomaBoton" class="temaBoton"
+          title="Español / English">EN</button>
+      </div>
     </div>
+    <div id="railCiudad" class="railCiudad"></div>
     <ol id="rail"></ol>
+    <ol id="railOtras" class="railOtras"></ol>
     <div id="ciudades" style="padding:0 18px"></div>
     <div class="pie">
-      <a href="#" id="alWizard">Create another city →</a>
+      <p id="avisoVersion" class="avisoVersion" hidden></p>
+      <a href="#" id="alWizard" data-i18n>Create another city →</a>
       <span class="dato" id="dondeDatos"></span>
     </div>
   </nav>