lampson 0.1.2 → 0.1.4

package/public/css/panel.css

@@ -0,0 +1,125 @@
+/* panel: EL componente modal de la app (js/panel.js). Un cascarón (overlay, cabecera, ✕/Esc/clic afuera) y
+   tres layouts: browse (buscador + lista + detalle), tabs (pestañas con formularios) y form (un formulario).
+   Cada vista (sesiones, lámparas, configuración, programar…) solo aporta su contenido; nada de esto se repite. */
+.modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:50; }
+.panel { background:var(--paper); border:1px solid var(--rule-2); border-radius:var(--r); box-shadow:0 10px 30px rgba(0,0,0,.35); display:flex; flex-direction:column; min-height:0; max-height:92vh; }
+.panel.lg { width:min(1100px, 94vw); height:min(760px, 90vh); padding:14px 18px 12px; }
+.panel.md { width:min(680px, 94vw); padding:14px 18px 12px; }
+.panel.sm { width:min(560px, 92vw); padding:14px 18px 12px; }
+
+/* cabecera */
+.panel .phead { display:flex; align-items:center; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--rule); flex:none; }
+.panel .phead .eyebrow { font:400 10.5px/1 var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--rubric); margin:0; }
+.panel .phead h3 { margin:0; font:600 16px/1.2 var(--serif); letter-spacing:-.01em; }
+.panel .phead .sub { color:var(--ink-3); font:400 11.5px/1 var(--mono); }
+.panel .pghost { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; margin:0; font:400 13px/1 var(--mono); letter-spacing:0; text-transform:none; border:1px solid var(--rule); border-radius:var(--r); background:transparent; color:var(--ink-3); cursor:pointer; }
+.panel .pghost:hover { color:var(--ink); border-color:var(--rule-2); }
+.panel .pghost + .pghost { margin-left:6px; }
+
+/* pestañas */
+.panel .ptabs { display:flex; gap:2px; border-bottom:1px solid var(--rule); margin:0 0 14px; flex:none; }
+.panel .ptab { font:400 11px/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); padding:10px 12px 8px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
+.panel .ptab:hover { color:var(--ink); }
+.panel .ptab.on { color:var(--accent); border-bottom-color:var(--accent); }
+
+/* cuerpo genérico (form / tabs): prosa y campos con la gramática de la app */
+.panel .pbody { flex:1; min-height:0; overflow:auto; padding:14px 2px 4px; }
+.panel .lead { color:var(--ink-2); margin:0 0 16px; font-size:14px; }
+.panel .lead code, .panel .phelp code { font:400 .88em/1.5 var(--mono); background:var(--paper-2); padding:.08em .3em; border-radius:2px; color:var(--ink); }
+.panel label { display:flex; align-items:center; gap:12px; font:400 10.5px/1 var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin:0 0 10px; }
+.panel label.col { flex-direction:column; align-items:stretch; gap:4px; }
+.panel label .ds { display:block; color:var(--ink-3); font:400 11.5px/1.4 var(--serif); text-transform:none; letter-spacing:0; margin-top:2px; }
+.panel input, .panel select, .panel textarea { flex:1; font:400 13px/1.4 var(--mono); color:var(--ink); background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r); padding:7px 10px; min-width:0; }
+.panel input:focus, .panel select:focus, .panel textarea:focus { outline:none; border-color:var(--rule-2); box-shadow:0 0 0 3px var(--accent-bg); }
+.panel input[disabled] { opacity:.55; }
+.panel textarea { width:100%; resize:vertical; font:400 12.5px/1.45 var(--mono); }
+.panel .pfoot { display:flex; gap:8px; align-items:center; margin-top:14px; flex:none; }
+.panel .err { color:var(--rubric); font:400 12px/1.4 var(--mono); min-height:14px; }
+.panel .plist { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); max-height:40vh; overflow:auto; margin:0 0 14px; }
+.panel .plist .pr { display:flex; align-items:center; gap:10px; padding:7px 10px; cursor:pointer; font:400 12.5px/1.4 var(--mono); color:var(--ink-2); border-left:2px solid transparent; }
+.panel .plist .pr:hover { color:var(--ink); }
+.panel .plist .pr.on { color:var(--ink); border-left-color:var(--accent); background:var(--paper-2); }
+.panel .plist .pr b { width:110px; font-weight:600; color:var(--ink); }
+.panel .plist .pr .dm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-3); }
+.panel .plist .pr .k { font-size:11px; color:var(--str); }
+.panel .plist .pr .k.no { color:var(--ink-3); }
+
+/* browse: lista a la izquierda (buscador, filas, contador), detalle a la derecha. Un scroll por columna, nunca horizontal. */
+.panel .browse { flex:1; min-height:0; display:grid; grid-template-columns:var(--list-w, 300px) minmax(0,1fr); }
+.panel .blist { display:flex; flex-direction:column; border-right:1px solid var(--rule); padding:10px 12px 8px 0; min-height:0; min-width:0; }
+.panel .blist input { flex:none; height:30px; font:400 12px/1.4 var(--mono); background:transparent; padding:0 8px; margin:0 0 8px; width:100%; }
+.panel .bitems { flex:1; overflow-y:auto; overflow-x:hidden; min-height:0; }
+.panel .bcount { color:var(--ink-3); font:400 11px/1 var(--mono); padding-top:8px; border-top:1px solid var(--rule); flex:none; }
+.panel .bdetail { overflow-y:auto; overflow-x:hidden; min-height:0; min-width:0; padding:12px 6px 8px 18px; font:400 12.5px/1.5 var(--mono); }
+.panel .bempty { color:var(--ink-3); font:400 12.5px/1.5 var(--serif); padding:8px; }
+.panel .li { display:grid; grid-template-columns:14px minmax(0,1fr); gap:8px; align-items:start; padding:7px 8px; border-radius:var(--r); cursor:pointer; font:400 12px/1.35 var(--mono); min-width:0; }
+.panel .li.nodot { grid-template-columns:minmax(0,1fr); }
+.panel .li > div { min-width:0; }
+.panel .li:hover { background:var(--paper-2); }
+.panel .li.sel { background:var(--paper-2); box-shadow:inset 2px 0 0 var(--accent); }
+.panel .li .dot { color:var(--ink-3); margin-top:1px; }
+.panel .li.on .dot { color:var(--accent); }
+.panel .li.bad .dot { color:var(--rubric); }
+.panel .li.new .nm { color:var(--accent); font-weight:400; }
+.panel .dform label { margin-top:10px; }
+.panel .dform .lead { margin:8px 0 12px; }
+.panel .dform .pfoot { margin-top:16px; }
+.panel .derr { color:var(--rubric); font:400 12px/1.4 var(--mono); min-height:14px; margin-top:6px; }
+.panel .dlog { margin-top:12px; max-height:38vh; overflow:auto; font:400 11.5px/1.45 var(--mono); border:1px solid var(--rule); border-radius:var(--r); padding:8px; white-space:pre-wrap; color:var(--ink-2); }
+.panel .li.broken .dot { color:var(--rubric); }
+.panel .li .nm { color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.panel .li .nm.serif { font:400 13px/1.35 var(--serif); }
+.panel .li .meta { color:var(--ink-3); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.panel .li .snip { color:var(--ink-2); font:400 12px/1.4 var(--serif); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.panel mark { background:transparent; color:var(--accent); font-weight:600; }
+
+/* piezas de detalle que comparten las vistas */
+.panel .dhead { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
+.panel .dhead .nm { font:600 18px/1.2 var(--mono); color:var(--ink); }
+.panel .dhead .nm.serif { font:600 16px/1.3 var(--serif); }
+.panel .dhead .meta { color:var(--ink-3); font-size:11.5px; }
+.panel .ddesc { color:var(--ink-2); font:400 13px/1.5 var(--serif); margin:8px 0 4px; max-width:70ch; }
+.panel .dcap { color:var(--ink-3); font-size:11.5px; margin-bottom:12px; word-break:break-all; }
+.panel .dcap b { color:var(--rubric); font-weight:600; }
+.panel .dcap.err { color:var(--rubric); }
+.panel .dnote { color:var(--ink-3); font:400 12px/1.5 var(--serif); border:1px dashed var(--rule-2); border-radius:var(--r); padding:8px 10px; margin:8px 0 12px; }
+.panel .dacts { display:flex; gap:8px; margin-top:12px; }
+.panel .dacts button { font:400 12px/1 var(--mono); padding:6px 12px; }
+.panel .dfoot { display:flex; align-items:center; gap:12px; margin-top:14px; padding-top:10px; border-top:1px solid var(--rule); color:var(--ink-3); font-size:11.5px; }
+.panel .dfoot .del { margin-left:auto; cursor:pointer; color:var(--rubric); }
+.panel .dfoot .del.ask .yes { color:var(--rubric); cursor:pointer; font-weight:600; }
+.panel .dfoot .del.ask .no { cursor:pointer; }
+.panel .none { color:var(--ink-3); font:400 13px/1.6 var(--serif); max-width:520px; }
+/* switch encendido/apagado (lámparas) */
+.panel label.sw { display:inline-flex; align-items:center; margin:0 0 0 auto; gap:6px; cursor:pointer; user-select:none; font:400 11.5px/1 var(--mono); text-transform:none; letter-spacing:0; color:var(--ink-3); }
+.panel label.sw input { flex:none; width:16px; height:16px; padding:0; margin:0; accent-color:var(--accent); }
+.panel label.sw.on { color:var(--accent); }
+/* formulario generado desde un JSON Schema (tools de una lámpara) */
+.panel .tool { border:1px solid var(--rule); border-radius:var(--r); padding:10px 12px; margin-bottom:10px; }
+.panel .tool .th { display:grid; grid-template-columns:auto 1fr auto; gap:8px 10px; align-items:baseline; }
+.panel .tool .th code { font-weight:600; color:var(--ink); }
+.panel .tool .th .ds { color:var(--ink-3); font:400 12px/1.4 var(--serif); }
+.panel label.lf { display:grid; grid-template-columns:120px minmax(0,1fr); gap:2px 10px; align-items:center; margin:8px 0 0; font:400 12px/1.4 var(--mono); text-transform:none; letter-spacing:0; color:var(--ink); }
+.panel label.lf .lk { color:var(--ink); }
+.panel label.lf .req { color:var(--rubric); font-size:10.5px; }
+.panel label.lf .ds { grid-column:2; color:var(--ink-3); font:400 11.5px/1.4 var(--serif); }
+.panel label.lf input, .panel label.lf select, .panel label.lf textarea { flex:none; width:100%; max-width:420px; padding:4px 6px; font:400 12px/1.4 var(--mono); background:transparent; }
+.panel label.lf textarea { grid-column:2; min-height:56px; }
+.panel .tool .go { margin-top:10px; display:flex; align-items:center; gap:10px; }
+.panel .tool .go button { font:400 12px/1 var(--mono); padding:5px 10px; }
+.panel .tool .go .st { color:var(--ink-3); font-size:11.5px; }
+.panel .tool pre.out { margin-top:8px; max-height:38vh; overflow:auto; font:400 11.5px/1.45 var(--mono); border:1px solid var(--rule); border-radius:var(--r); padding:8px; white-space:pre-wrap; }
+/* conversación resumida (sesiones) */
+.panel .dmsgs { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
+.panel .dmsg { border-left:2px solid var(--rule-2); padding:2px 0 2px 10px; font:400 12.5px/1.5 var(--serif); color:var(--ink-2); white-space:pre-wrap; word-break:break-word; }
+.panel .dmsg.dm-user { border-left-color:var(--accent); color:var(--ink); }
+.panel .dmsg.dm-bad { border-left-color:var(--rubric); }
+.panel .dmsg .who a { color:var(--accent); text-decoration:none; }
+.panel .dmsg .who { font:400 10.5px/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); display:block; margin-bottom:3px; }
+/* ayuda («?»): prosa a lo ancho, reemplaza al cuerpo */
+.panel .phelp { flex:1; min-height:0; overflow:auto; padding:16px 24px 8px 6px; font:400 13.5px/1.6 var(--serif); color:var(--ink-2); }
+.panel .phelp h4 { margin:0 0 8px; font:600 15px/1.3 var(--serif); color:var(--ink); }
+.panel .phelp b { color:var(--ink); font-weight:600; }
+.panel .phelp p { margin:0 0 12px; max-width:78ch; }
+.panel .phelp ul { margin:0 0 16px 20px; padding:0; display:grid; gap:4px; max-width:78ch; }
+.panel .phelp button { text-transform:none; letter-spacing:0; font:400 12px/1 var(--mono); padding:6px 10px; }

package/public/css/sidebar.css

@@ -0,0 +1,80 @@
+/* sidebar: secciones acordeón y las filas de cada una */
+/* secciones colapsables; el activo es una muesca en la regla, no una caja */
+.sec { display:flex; flex-direction:column; min-height:0; flex:none; overflow:hidden; }
+.sec + .sec { border-top:1px solid var(--rule); }
+.sec h2 { font:400 10.5px/1.35 var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin:0; padding:12px 16px 8px; display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; flex:none; }
+.sec h2:hover { color:var(--ink); }
+.sec .caret { width:9px; font-size:9px; color:var(--ink-3); }
+.sec h2 .h2act { margin-left:auto; border:0; background:none; color:var(--ink-3); font:inherit; font-size:12px; cursor:pointer; padding:0 2px; line-height:1; opacity:.6; }
+.sec h2 .h2act:hover { opacity:1; color:var(--accent); }
+.sec h2 .h2act.spin { animation: h2spin .6s linear; }
+@keyframes h2spin { to { transform: rotate(360deg); } }
+.sec .cnt { margin-left:auto; letter-spacing:0; text-transform:none; }
+.sec .body { display:none; overflow:auto; min-height:0; padding:0 10px 10px 16px; }
+.sec.open .body { display:block; }
+.sec:not(.grow).open .body { max-height:22vh; }
+.sec.grow.open { flex:1; }
+.sec.grow.open .body { flex:1; }
+#tree { font:400 12.5px/1.5 var(--mono); }
+.node { user-select:none; }
+.row { display:flex; align-items:center; gap:6px; padding:3px 6px 3px 8px; cursor:pointer; color:var(--ink-2); white-space:nowrap; margin-left:-1px; border-left:2px solid transparent; }
+.row:hover { color:var(--ink); }
+.row.dir { color:var(--ink); }
+.row .tw { width:9px; color:var(--ink-3); font-size:9px; }
+.row.active { color:var(--ink); font-weight:600; border-left-color:var(--accent); }
+.row.gM > span:nth-child(2) { color:var(--amber); }
+.row.gA > span:nth-child(2), .row.gU > span:nth-child(2) { color:var(--str); }
+.row.gD > span:nth-child(2) { color:var(--rubric); text-decoration:line-through; }
+.row .gs { margin-left:auto; font-size:10px; color:var(--ink-3); }
+.kids { margin-left:12px; border-left:1px solid var(--rule); }
+.kids.hidden { display:none; }
+.s, .m, .p { display:flex; align-items:center; gap:8px; padding:4px 6px 4px 8px; cursor:pointer; color:var(--ink-2); font:400 12.5px/1.5 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-left:-1px; border-left:2px solid transparent; }
+.s:hover, .m:hover, .p:hover { color:var(--ink); }
+.s.active, .m.active, .p.active { color:var(--ink); border-left-color:var(--accent); }
+.s .title { overflow:hidden; text-overflow:ellipsis; font-family:var(--serif); font-size:13px; }
+.s .id { color:var(--ink-3); font-size:11px; flex:none; }
+.m b { color:var(--ink); font-weight:600; flex:none; }
+.m .t { overflow:hidden; text-overflow:ellipsis; font-family:var(--serif); font-size:13px; }
+.p .st { width:7px; height:7px; border-radius:50%; background:var(--ink-3); flex:none; }
+.p.run .st { background:var(--str); }
+.p .nm { font-weight:600; color:var(--ink); }
+.p .cm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
+.p .port { color:var(--amber); font-weight:600; text-decoration:none; flex:none; }
+.p .port:hover { text-decoration:underline; text-underline-offset:.18em; }
+.p button { padding:1px 7px; font-size:10px; }
+.none { color:var(--ink-3); cursor:default; }
+.none:hover { color:var(--ink-3); }
+
+/* filas de tareas programadas y aprobaciones */
+.p.sched { flex-wrap:wrap; }
+.p.sched .st.on { background:var(--accent); }
+.p.sched .st.busy { background:var(--amber); animation: pulse 1s ease-in-out infinite; }
+.p.sched .st.bad { background:var(--rubric); }
+.p.sched .sub { flex-basis:100%; color:var(--ink-3); font-size:10.5px; padding-left:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.p.sched .act { margin-left:auto; display:inline-flex; gap:2px; visibility:hidden; }
+.p.sched:hover .act, .p.sched .act.ask { visibility:visible; }
+.p.sched .act span { color:var(--ink-3); font-size:11px; padding:0 4px; cursor:pointer; }
+.p.sched .act span:hover { color:var(--accent); }
+.p.sched .act span.rm:hover { color:var(--rubric); }
+.p.appr { flex-wrap:wrap; cursor:default; }
+.p.appr .msg { flex-basis:100%; color:var(--ink); font-size:11.5px; white-space:pre-wrap; padding-left:15px; }
+.p.appr .why { flex-basis:100%; color:var(--rubric); font-size:10.5px; padding-left:15px; }
+.p.appr .btns { flex-basis:100%; display:flex; gap:6px; padding:4px 0 2px 15px; }
+.p.appr .btns button { padding:2px 9px; font-size:11px; }
+.sec .daemon { font:400 10.5px/1.5 var(--mono); color:var(--ink-3); padding:2px 0 4px; }
+.sec .daemon.off { color:var(--rubric); }
+@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.35 } }
+
+.s.more { color:var(--accent); }
+
+/* ✕ → «¿borrar? sí · no» en línea */
+.s .del { margin-left:auto; color:var(--ink-3); visibility:hidden; font-size:11px; padding:0 4px; }
+.s:hover .del { visibility:visible; }
+.s .del:hover { color:var(--rubric); }
+.p .del { margin-left:auto; color:var(--ink-3); visibility:hidden; font-size:11px; padding:0 4px; cursor:pointer; }
+.p:hover .del { visibility:visible; }
+.p .del:hover { color:var(--rubric); }
+.del.ask, .s:hover .del.ask { visibility:visible; color:var(--ink-2); font:400 11px/1.4 var(--mono); white-space:nowrap; }
+.del.ask .yes { color:var(--rubric); cursor:pointer; font-weight:600; }
+.del.ask .no { color:var(--ink-2); cursor:pointer; }
+.del.ask .yes:hover, .del.ask .no:hover { text-decoration:underline; text-underline-offset:.18em; }

package/public/css/tokens.css

@@ -0,0 +1,57 @@
+/* tokens: fuentes, paleta (dark/light), base y botones — lo que todo lo demás asume */
+/* Misma dirección que docs.synsema.com: tinta sobre papel, una superfamilia (IBM Plex) en dos
+   voces — la SERIF para lo que se lee (mensajes, hero), la MONO para estructura y maquinaria
+   (header, sidebar, pasos, código, controles). El color se raciona: azul = link / dónde estás,
+   rubric rojo = peligro y permisos (la única cosa que vale la pena ver desde lejos). */
+@font-face{font-family:"Plex Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-serif-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
+@font-face{font-family:"Plex Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-serif-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
+@font-face{font-family:"Plex Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/plex-serif-400i-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
+@font-face{font-family:"Plex Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/plex-serif-400i-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
+@font-face{font-family:"Plex Serif";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-serif-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
+@font-face{font-family:"Plex Serif";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-serif-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
+@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
+@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
+@font-face{font-family:"Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-mono-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
+@font-face{font-family:"Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-mono-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
+
+:root, :root[data-theme=dark] {
+  --paper:#131412; --paper-2:#1b1c19; --paper-3:#212320;
+  --ink:#e9e8df; --ink-2:#9b9c90; --ink-3:#848678;
+  --rule:#2b2c27; --rule-2:#3c3d36;
+  --accent:#8fb4dc; --accent-bg:#1b2836;
+  --rubric:#d98670; --str:#a8bd84; --amber:#d9b26f;
+  --sel:#33465b; --term-blue:#4f86d1;
+  --serif:"Plex Serif",Georgia,"Times New Roman",serif;
+  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
+  --r:3px; --side:280px;
+}
+:root[data-theme=light] {
+  --paper:#fcfcfa; --paper-2:#f4f3ee; --paper-3:#ecebe3;
+  --ink:#1a1b18; --ink-2:#56584f; --ink-3:#6a6c61;
+  --rule:#e4e3da; --rule-2:#cfcec2;
+  --accent:#21578c; --accent-bg:#e9eef4;
+  --rubric:#99372a; --str:#4a6b3f; --amber:#8a6a1f;
+  --sel:#cfe0f0; --term-blue:#21578c;
+}
+
+* { box-sizing:border-box; }
+html, body { height:100%; }
+body { margin:0; background:var(--paper); color:var(--ink); font:400 14.5px/1.6 var(--serif); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
+::selection { background:var(--sel); }
+:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:1px; }
+button, select, textarea { font-family:inherit; }
+.spacer { flex:1; }
+
+/* botones: el primario es tinta sobre papel, el secundario solo borde */
+button { font:600 10.5px/1 var(--mono); text-transform:uppercase; letter-spacing:.09em; color:var(--ink-2); background:none; border:1px solid var(--rule-2); border-radius:2px; padding:7px 12px; cursor:pointer; }
+button:hover { color:var(--ink); border-color:var(--ink-3); }
+button.primary { color:var(--paper); background:var(--ink); border-color:var(--ink); }
+button.primary:hover { opacity:.85; color:var(--paper); }
+button:disabled { opacity:.45; cursor:default; }
+
+/* barras de scroll finas y del color del tema (las nativas de Windows son gruesas y grises) */
+* { scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent; }
+*::-webkit-scrollbar { width:7px; height:7px; }
+*::-webkit-scrollbar-track { background:transparent; }
+*::-webkit-scrollbar-thumb { background:var(--rule-2); border-radius:4px; }
+*::-webkit-scrollbar-thumb:hover { background:var(--ink-3); }