ratacode 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/CREDITS.md +80 -0
  2. package/LICENSE +21 -0
  3. package/README.md +289 -0
  4. package/apreton/README.md +54 -0
  5. package/apreton/handshake.md +33 -0
  6. package/apreton/headless.md +58 -0
  7. package/apreton/mcp.md +221 -0
  8. package/apreton/navegador.md +58 -0
  9. package/bin/instalacion.js +148 -0
  10. package/bin/ratacode.js +1251 -0
  11. package/fabrica/settings.yaml +247 -0
  12. package/mcp/README.md +253 -0
  13. package/mcp/bin/ratacode-mcp.js +215 -0
  14. package/mcp/lib/actividad.js +49 -0
  15. package/mcp/lib/casa.js +126 -0
  16. package/mcp/lib/claves.js +148 -0
  17. package/mcp/lib/espacios.js +117 -0
  18. package/mcp/lib/http.js +184 -0
  19. package/mcp/lib/lectura.js +210 -0
  20. package/mcp/lib/modelos.js +235 -0
  21. package/mcp/lib/nucleo.js +332 -0
  22. package/mcp/lib/registro.js +21 -0
  23. package/mcp/lib/seguridad.js +283 -0
  24. package/mcp/lib/servidor.js +397 -0
  25. package/mcp/lib/tareas.js +406 -0
  26. package/mcp/package.json +22 -0
  27. package/mcp/tunel.mjs +209 -0
  28. package/modos/arquitecto/agent.cordis.yml +120 -0
  29. package/modos/arquitecto/preset.yml +3 -0
  30. package/modos/capataz/agent.cordis.yml +120 -0
  31. package/modos/capataz/preset.yml +3 -0
  32. package/modos/faro/agent.cordis.yml +120 -0
  33. package/modos/faro/preset.yml +3 -0
  34. package/modos/gepeto/agent.cordis.yml +191 -0
  35. package/modos/gepeto/preset.yml +3 -0
  36. package/modos/hero/agent.cordis.yml +198 -0
  37. package/modos/hero/preset.yml +3 -0
  38. package/modos/modo-rata/agent.cordis.yml +198 -0
  39. package/modos/modo-rata/preset.yml +3 -0
  40. package/modos/nex/agent.cordis.yml +213 -0
  41. package/modos/nex/preset.yml +3 -0
  42. package/modos/nex/skills/cordis-plugin-development/SKILL.md +420 -0
  43. package/modos/nex/skills/editing-cordis-compositions/SKILL.md +165 -0
  44. package/modos/pix/agent.cordis.yml +207 -0
  45. package/modos/pix/preset.yml +3 -0
  46. package/modos/tirita/agent.cordis.yml +130 -0
  47. package/modos/tirita/preset.yml +3 -0
  48. package/package.json +49 -0
  49. package/piel/activos/ratacode-emblema.svg +14 -0
  50. package/piel/activos/ratacode-es.js +1331 -0
  51. package/piel/activos/ratacode-identidad.css +50 -0
  52. package/piel/activos/ratacode-piel.css +217 -0
  53. package/piel/activos/ratacode-piel.js +487 -0
  54. package/piel/activos/ratacode-vida.js +424 -0
  55. package/piel/cordis.patch.yml +6 -0
  56. package/piel/lib/cliente.js +1020 -0
  57. package/piel/lib/index.js +1230 -0
  58. package/piel/package.json +36 -0
@@ -0,0 +1,50 @@
1
+ /* RATACODE · identidad compartida: los colores y la marca. Nada de la casa.
2
+ *
3
+ * R21 · LOS TRES TEMAS. El panel tiene tres aspectos y se eligen en
4
+ * Ajustes › General › Aspecto (los registra `piel\lib\cliente.js` por la vía
5
+ * OFICIAL de temas de DSH: `ctx.theme.register`, con sus fichas de tokens
6
+ * `--dsw-*`). El tema activo se apunta en `<html data-ratacode-tema="…">`, y
7
+ * aquí se traduce a las tres palabras de la casa:
8
+ *
9
+ * --mr-principal el color que manda (botones, marca, lo que pide el dedo)
10
+ * --mr-detalle el de los detalles (filos, realces, la segunda voz)
11
+ * --mr-acento el del foco y los enlaces
12
+ *
13
+ * `--mr-pink` y `--mr-yellow` NO cambian: son la identidad de RATACODE (las
14
+ * ratitas de fondo se pintan con ellas, y `ratacode-vida.js` las lee del
15
+ * documento una sola vez, antes de que el tema esté puesto).
16
+ */
17
+ :root, html[data-ratacode-piel] {
18
+ --mr-black:#101113; --mr-panel:#181a1d; --mr-raised:#222529; --mr-line:#353a3d;
19
+ --mr-white:#f0eee6; --mr-muted:#a8adae; --mr-pink:#ff268e; --mr-yellow:#e4f226; --mr-cyan:#26c6cc;
20
+ --bg-0:var(--mr-black); --bg-1:var(--mr-panel); --bg-2:#202326; --bg-3:#2a2d31;
21
+ --border:var(--mr-line); --border-soft:#282c30; --text-1:var(--mr-white); --text-2:var(--mr-muted); --text-3:#8c9396;
22
+ --rat-yellow:var(--mr-yellow); --rat-pink:var(--mr-pink); --info:var(--mr-cyan);
23
+ /* El tema de por defecto es RATACODE PINK (el primero de la lista). */
24
+ --mr-principal:#ff268e; --mr-detalle:#e4f226; --mr-acento:#e4f226;
25
+ --mr-principal-suave:#4a1c33; --mr-sombra:#e4f226; --mr-filo:#e4f226;
26
+ color-scheme:dark;
27
+ }
28
+ /* b) RATACODE YELLOW — amarillo principal, secundarios en rosa, negro y gris. */
29
+ html[data-ratacode-tema='ratacode-yellow'] {
30
+ --mr-principal:#e4f226; --mr-detalle:#ff268e; --mr-acento:#ff268e;
31
+ --mr-principal-suave:#3a3320; --mr-sombra:#ff268e; --mr-filo:#ff268e;
32
+ }
33
+ /* c) MINIMAL — todo negro y gris, sólo líneas y pequeños detalles (y sin ratitas). */
34
+ html[data-ratacode-tema='minimal'] {
35
+ --mr-principal:#e8e6df; --mr-detalle:#8c9396; --mr-acento:#b8bdbb;
36
+ --mr-principal-suave:#26282b; --mr-sombra:#3c3c3d; --mr-filo:#464d52;
37
+ }
38
+ html[data-ratacode-piel] body{background-color:var(--mr-black);color:var(--mr-white)}
39
+ ::selection{background:var(--mr-principal-suave);color:#fffaf1}
40
+ .mr-emblema{display:inline-block;flex:none;width:32px;height:32px;background:var(--mr-emblema) center/contain no-repeat}
41
+ .mr-wordmark{font:900 italic 19px/1 'Segoe UI',sans-serif;letter-spacing:-.7px;white-space:nowrap}
42
+ html[data-ratacode-piel] :is(button,input,textarea,select,[role='button']):focus-visible{outline:2px solid var(--mr-acento);outline-offset:2px}
43
+ html[data-ratacode-piel] :is(input[type='checkbox'],input[type='radio'],input[type='range']){accent-color:var(--mr-principal)}
44
+ html[data-ratacode-piel] ::-webkit-scrollbar-thumb{background:#444b4e;border-radius:5px}
45
+ /* MINIMAL no lleva ratitas de fondo: ni se pintan ni gastan reloj. El lienzo
46
+ (`.mr-vida`) se esconde aquí, y `ratacode-vida.js` para su fotograma en cuanto
47
+ ve el tema en el documento. */
48
+ html[data-ratacode-tema='minimal'] .mr-vida,
49
+ html[data-ratacode-tema='minimal'] .mr-vida-salida>.mr-vida{display:none!important}
50
+ @media(prefers-reduced-motion:reduce){html[data-ratacode-piel] *,html[data-ratacode-piel] *::before{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@@ -0,0 +1,217 @@
1
+ /* RATACODE: adaptador visual. Conserva editor, permisos y estados.
2
+ *
3
+ * R21 · LOS COLORES DE LA MARCA YA NO VIVEN AQUÍ. El aspecto lo pone el TEMA
4
+ * activo, registrado por la vía OFICIAL de temas de DSH (`ctx.theme.register`,
5
+ * en `piel\lib\cliente.js`): sus fichas de tokens `--dsw-*` se aplican al body
6
+ * como estilo en línea, y ganan a la hoja. Este bloque de tokens queda SÓLO como
7
+ * respaldo —sin `!important`, a propósito— para que un motor viejo (sin servicio
8
+ * de temas) siga viéndose como RATACODE. Todo lo demás tira de las tres palabras
9
+ * del tema (`--mr-principal`, `--mr-detalle`, `--mr-acento`), así que el panel
10
+ * entero —fondos, textos, botones y su reacción, bordes e iconos— cambia con él.
11
+ */
12
+ html body, html body[data-ds-dark-theme] {
13
+ --dsw-alias-bg-base:#101113; --dsw-alias-bg-layer-1:#181a1d;
14
+ --dsw-alias-bg-layer-2:#222529; --dsw-specific-menu:#222529;
15
+ --dsw-alias-label-primary:#f0eee6; --dsw-alias-label-secondary:#b8bdbb;
16
+ --dsw-alias-label-tertiary:#9ba3a5; --dsw-alias-label-dimmed:#818a8e;
17
+ --dsw-alias-brand-primary:var(--mr-principal);
18
+ --dsw-alias-button-primary-fill:var(--mr-principal);
19
+ --dsw-alias-label-primary-foreground:#121411;
20
+ --dsw-alias-interactive-bg-hover:#292c30; --dsw-alias-interactive-bg-active:var(--mr-principal-suave);
21
+ --dsw-alias-button-tool-bar-fill:#222529; --dsw-alias-button-tool-bar-hover:#30353a;
22
+ --dsw-alias-button-ghost-active-fill:var(--mr-principal-suave);
23
+ --dsw-alias-button-ghost-active-border:var(--mr-principal);
24
+ --dsw-alias-border-l1:#282c30; --dsw-alias-border-l2:#353a3d;
25
+ --dsw-alias-border-l3:#464d52; --dsw-alias-border-l4:#626b70;
26
+ --dsw-alias-state-success-primary:var(--mr-detalle); --dsw-alias-state-warn-primary:var(--mr-detalle);
27
+ --dsw-alias-markdown-code-block:#15171a; --dsw-alias-markdown-code-block-banner:#222529;
28
+ --dsw-alias-markdown-inline-code:#292d31; --dsh-state-ongoing:var(--mr-detalle);
29
+ background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary);color-scheme:dark;
30
+ }
31
+ [class*='_sidebarCol']{background:#16181b!important;border-right:1px solid var(--dsw-alias-border-l2)}
32
+ [class*='_logoRow']{position:relative;min-height:94px!important;border-bottom:1px solid #3a393a;margin-bottom:12px;background:linear-gradient(125deg,color-mix(in srgb,var(--mr-detalle) 8%,transparent),transparent 48%,color-mix(in srgb,var(--mr-principal) 8%,transparent)),repeating-linear-gradient(115deg,transparent 0 17px,#ffffff02 17px 18px)}
33
+ [class*='_logoRow']::after{content:'';position:absolute;bottom:0;left:16px;width:58px;height:3px;background:repeating-linear-gradient(125deg,var(--mr-filo) 0 5px,transparent 5px 9px);pointer-events:none}
34
+ button[class*='_brand']{height:72px!important;overflow:visible!important;max-width:none!important}
35
+ [class*='_brandIdentity']{gap:10px!important;height:auto!important;overflow:visible!important;align-items:center!important}
36
+ [class*='_brandMark']{display:block!important;width:48px!important;height:54px!important;flex:0 0 48px;background:var(--mr-emblema) center/contain no-repeat!important;overflow:visible!important}
37
+ [data-slot='sidebar.brand.mark'],[data-slot='sidebar.brand.name']{display:none!important}
38
+ [class*='_brandName']{display:flex!important;flex-direction:column!important;height:auto!important;overflow:visible!important;gap:5px}
39
+ [class*='_brandName']::before,[class*='_brandName']::after{content:none!important}
40
+ .mr-dsh-word{font:900 italic 25px/1 'Segoe UI',sans-serif;letter-spacing:-1.4px;white-space:nowrap;color:var(--mr-principal)}
41
+ .mr-dsh-word b{color:var(--mr-detalle);font-weight:900}
42
+
43
+
44
+ [class*='_brand'] [class*='badge'],[class*='_brand'] [class*='Badge']{display:none!important}
45
+ button[class*='_newSession']{position:relative;background:var(--mr-principal)!important;color:#141612!important;border:1px solid color-mix(in srgb,var(--mr-principal) 70%,#fff)!important;border-radius:4px!important;font-weight:750!important;box-shadow:3px 3px 0 var(--mr-sombra)!important;min-height:38px;letter-spacing:.025em}
46
+ [class*='_newSessionLabel']{background:transparent!important;box-shadow:none!important;border:0!important;color:#141612!important;height:auto!important}
47
+ button[class*='_newSession']:hover{background:color-mix(in srgb,var(--mr-principal) 84%,#fff)!important;box-shadow:3px 3px 0 var(--mr-sombra)!important}
48
+ /* La carpeta de cada espacio de trabajo. Antes apuntaba a `_folderIcon`, que
49
+ YA NO EXISTE en DSH 0.1.5-rc.3 (medido: 0 apariciones en todo el árbol
50
+ instalado). La clase de hoy es `_folder` / `_folderActive`, en
51
+ `dsh-client-ui-workspace/lib/client.js`. */
52
+ [class*='_sidebarCol'] [class*='_folder']{color:var(--mr-acento)!important}
53
+ [class*='_sidebarCol'] [class*='_row']:hover{background:#ffffff06}
54
+ [class*='_sidebarCol'] [class*='_selected'],[class*='_sidebarCol'] [aria-current='page']{background:linear-gradient(90deg,color-mix(in srgb,var(--mr-detalle) 12%,transparent),#28262a)!important;box-shadow:inset 3px 0 var(--mr-detalle);border-radius:3px!important;color:#f0eee6!important}
55
+ [class*='_sidebarCol'] [class*='_sectionTitle']{color:#a8adae;font:10px Consolas,monospace;letter-spacing:1.2px;text-transform:uppercase}
56
+
57
+ /* R12: aquí vivían «Copiar apretón» y «Claves», al pie de la barra lateral. Ya
58
+ no: el texto de la conexión vive en Ajustes › Conexiones (con sus dos
59
+ tarjetas) y las claves se ponen en Ajustes › Models, como en DSH. */
60
+
61
+ /* La nota que la piel mete en la ventana nativa de DSH «Add an API key to get
62
+ started» (sólo pide DeepSeek): una línea en español y un botón que lleva a
63
+ Ajustes › Models, donde están los 8 proveedores de RATACODE. */
64
+ .mr-guia{margin:14px 0 0;padding:10px 12px;border:1px solid #3a4046;border-left:3px solid var(--mr-principal);border-radius:6px;
65
+ background:#ffffff05;color:#c9cfd1;font:12px/1.5 system-ui,Segoe UI,sans-serif}
66
+ .mr-guia b{color:var(--mr-principal)}
67
+ .mr-guia-boton{margin-top:8px;display:block;width:100%;padding:8px 10px;cursor:pointer;
68
+ background:var(--mr-principal);color:#16181b;border:0;border-radius:5px;font:600 12px/1 system-ui,Segoe UI,sans-serif}
69
+ .mr-guia-boton:hover{background:color-mix(in srgb,var(--mr-principal) 84%,#fff)}
70
+ header[class*='_header']{background:linear-gradient(110deg,#202124,#17191c 60%)!important;border-top:2px solid var(--mr-principal);border-bottom:1px solid var(--dsw-alias-border-l2)!important}
71
+ header[class*='_header']::before{content:none!important}
72
+ .mr-dsh-kicker{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:#9ba3a5;font:9px/1.3 Consolas,monospace;letter-spacing:1.8px}
73
+ .mr-dsh-kicker .mr-wordmark{font-size:12px;letter-spacing:.2px}
74
+ .mr-dsh-kicker::after{content:'';margin-left:auto;display:block;width:48px;height:5px;background:repeating-linear-gradient(125deg,color-mix(in srgb,var(--mr-detalle) 44%,transparent) 0 4px,transparent 4px 8px)}
75
+ [class*='_crumbCurrent']{color:#f0eee6!important;font-weight:750!important}
76
+ [class*='_tabActive']{color:var(--mr-detalle)!important;border-color:var(--mr-detalle)!important}
77
+ [class*='_tabActive']::after{background:var(--mr-detalle)!important}
78
+ [data-composer-card]{position:relative;background:#222529!important;border:1px solid #51564a!important;border-top:2px solid var(--mr-principal)!important;border-radius:8px!important;box-shadow:0 10px 32px #0005!important}
79
+ [data-composer-card]::before{content:'';position:absolute;top:-2px;left:18px;width:54px;height:2px;background:var(--mr-detalle);pointer-events:none}
80
+ [data-composer-card]:focus-within{border-color:var(--mr-acento)!important;border-top-color:var(--mr-principal)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--mr-acento) 12%,transparent),0 10px 32px #0005!important}
81
+ [data-composer-input]{color:#f0eee6!important;caret-color:var(--mr-principal)}
82
+ /* El elemento SÍ existe: medido el 21-sep-2026 en la superficie (1 en el DOM).
83
+ El encargo decía que no, y por eso se quitó; se ha devuelto al comprobarlo. */
84
+ [data-composer-placeholder]{color:#a6adae!important;font-size:13px!important}
85
+ [data-composer-card] button[aria-label*='Send'],[data-composer-card] button[aria-label*='Enviar']{background:var(--mr-principal)!important;color:#141612!important;border-radius:6px!important}
86
+ [data-composer-card] button:disabled{opacity:.45}
87
+ /* El botón de acciones de la cabecera de sesión (ahí vive ahora el registro).
88
+ Antes apuntaba a `_sessionLogButton`, que YA NO EXISTE en DSH 0.1.5-rc.3
89
+ (medido: 0 apariciones). Hoy es `_moreButton`, en
90
+ `dsh-session-log-export/lib/client.js`. */
91
+ [class*='_moreButton']{font-size:11px!important;letter-spacing:.03em;color:#b1b8b8!important;border-color:#454b50!important;border-radius:4px!important}
92
+ button:focus-visible,input:focus-visible,[role='button']:focus-visible{outline:2px solid var(--mr-acento)!important;outline-offset:3px}
93
+ pre{border:1px solid #353b3e!important;border-radius:6px!important}
94
+ a{color:var(--mr-acento)}
95
+ @media(max-width:900px){.mr-dsh-kicker{letter-spacing:.8px}.mr-dsh-kicker::after{display:none}}
96
+ @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}
97
+
98
+ /* Lo que SÍ se usa y NO se toca: `.mr-vida*` (la ratita), `.mr-welcome*`,
99
+ * `.mr-dsh-word` y todo el tema de la columna. Los emblemas por personaje, las
100
+ * lucecitas y el color por título se quedaron FUERA del producto (21-sep-2026). */
101
+
102
+ /* Chispas detrás de las respuestas. El editor queda fuera de su altura.
103
+ Una capa decorativa: nunca captura clics ni selección del texto. */
104
+ .mr-vida-salida{isolation:isolate}
105
+ .mr-vida-salida>.mr-vida{position:absolute;left:0;top:0;z-index:0;pointer-events:none;opacity:.40;
106
+ -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
107
+ mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
108
+ .mr-vida-salida>[class*='_scrollBody']{position:relative;z-index:1}
109
+ @media(prefers-reduced-motion:reduce){.mr-vida{display:none!important}}
110
+ /* MINIMAL: sin ratitas de fondo (el lienzo se esconde y el fotograma se para). */
111
+ html[data-ratacode-tema='minimal'] .mr-vida{display:none!important}
112
+
113
+ /* RATACODE welcome: replace the upstream mascot, without touching history. */
114
+ .mr-welcome{gap:20px!important;padding:24px 16px!important}.mr-welcome-mark{width:78px!important;height:88px;background:var(--mr-emblema) center/contain no-repeat!important}
115
+ .mr-welcome-mark>*{display:none!important}
116
+ .mr-welcome [class*='_titleGroup']{display:flex!important;flex-direction:column;align-items:flex-start!important;gap:10px!important}
117
+ .mr-welcome-title{font:900 italic clamp(28px,3.4vw,48px)/1 'Segoe UI',sans-serif;letter-spacing:-1.8px;background:linear-gradient(90deg,var(--mr-principal) 0 48%,var(--mr-detalle) 48%);background-clip:text;-webkit-text-fill-color:transparent}
118
+ .mr-welcome [class*='_previewBadge']{font:10px/1.5 Consolas,monospace!important;letter-spacing:2px;border:0!important;border-radius:0!important;background:none!important;color:#b4b9b6!important;padding:0!important}
119
+ @media(max-width:800px){.mr-welcome{gap:12px!important}.mr-welcome-mark{width:52px;height:62px}.mr-welcome [class*='_previewBadge']{letter-spacing:.5px}}
120
+
121
+ /* R17 · EL AVISO DE LA CLAVE QUE FALTA, encima de la caja de escribir. Mismo
122
+ ancho y mismo sitio que la tarjeta del encargo (`--dsh-composer-card-max-width`,
123
+ que es la del propio motor), para que no baile con la caja. Discreto: una
124
+ banda con el filo de la casa, sin gritar. */
125
+ .mr-clave{box-sizing:border-box;display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;
126
+ max-width:var(--dsh-composer-card-max-width,780px);margin:0 0 6px;padding:7px 12px;border-radius:10px;
127
+ border:1px solid #3a3f45;border-left:3px solid var(--mr-principal);background:#181a1d;color:#f0eee6;
128
+ font-size:13px;line-height:19px}
129
+ .mr-clave-texto{flex:1 1 260px;min-width:0}
130
+ .mr-clave-boton{cursor:pointer;white-space:nowrap;padding:4px 11px;border-radius:8px;border:1px solid #464d52;
131
+ background:#222529;color:inherit;font:inherit;font-size:12px}
132
+ .mr-clave-boton:hover{border-color:var(--mr-principal)}
133
+
134
+ /* R22 §4 · EL AVISO DE MIGRACIÓN DE CLAVES: también encima de la caja, en UNA
135
+ línea, con su botón de cerrar. Filo del detalle (es un «haz esto», no un fallo). */
136
+ .mr-migracion{box-sizing:border-box;display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;
137
+ max-width:var(--dsh-composer-card-max-width,780px);margin:0 0 6px;padding:7px 12px;border-radius:10px;
138
+ border:1px solid #3a3f45;border-left:3px solid var(--mr-detalle);background:#181a1d;color:#f0eee6;
139
+ font-size:13px;line-height:19px}
140
+ .mr-migracion-texto{flex:1 1 260px;min-width:0}
141
+ .mr-migracion-cerrar{cursor:pointer;white-space:nowrap;padding:4px 11px;border-radius:8px;border:1px solid #464d52;
142
+ background:#222529;color:inherit;font:inherit;font-size:12px}
143
+ .mr-migracion-cerrar:hover{border-color:var(--mr-detalle)}
144
+
145
+ /* R18 · LA NOTA DE AJUSTES › MODELS. Ahí ya sólo quedan las APIs con clave: los
146
+ dos locales se esconden de esa lista (el frontend no tiene gancho para
147
+ filtrarla) y esta nota lleva a su pestaña. Discreta, con el filo de la casa. */
148
+ .mr-locales-nota{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0;padding:8px 12px;
149
+ border-radius:10px;border:1px solid #3a3f45;border-left:3px solid var(--mr-principal);background:#181a1d;
150
+ color:#f0eee6;font-size:13px;line-height:19px}
151
+
152
+ /* R23 · LOS MODOS, EN 3×3. La pestaña la pinta el plugin de presets del motor;
153
+ sólo se ordena lo que la piel ha marcado (`.mr-modos`): título «Modos», nueve
154
+ tarjetas en tres columnas por tres filas que se ven ENTERAS a 1280×800, el
155
+ nombre grande con el color de su personaje, el oficio en UNA línea y «En uso»
156
+ en el que manda. Fuera: la frase en inglés, «Custom», el id técnico y los
157
+ iconos (que quedan detrás del «⋯»). Por debajo de 1100 px, dos columnas. */
158
+ .mr-modos{max-width:none!important}
159
+ .mr-modos [class*='_intro']{display:none!important}
160
+ .mr-modos [class*='_groupHead']{display:none!important}
161
+ .mr-modos [class*='_creatorButton']{display:none!important}
162
+ .mr-modos [class*='_group']{gap:8px!important}
163
+ .mr-modos [class*='_group']+[class*='_group']{margin-top:8px!important}
164
+ .mr-modos [class*='_cards']{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;grid-auto-rows:1fr}
165
+ .mr-modos [class*='_card']{border-radius:12px!important}
166
+ .mr-modos [class*='_cardMain']{padding:11px 12px 9px!important;gap:5px!important}
167
+ .mr-modos [class*='_cardHead']{gap:6px!important;flex-wrap:wrap!important}
168
+ .mr-modos [class*='_cardName']{font-size:16px!important;font-weight:800!important;letter-spacing:.3px;line-height:1.25;white-space:nowrap}
169
+ .mr-modos [class*='_cardDesc']{-webkit-line-clamp:1!important;min-height:0!important;font-size:12px!important;line-height:17px!important}
170
+ .mr-modos [class*='_cardId']{display:none!important}
171
+ .mr-modos [class*='_cardFoot']{display:none!important}
172
+ .mr-modos li[data-abierto='si'] [class*='_cardFoot']{display:flex!important}
173
+ .mr-modos .mr-modos-puntos{cursor:pointer;align-self:flex-end;background:none;border:0;color:#8c9396;
174
+ font:inherit;font-size:15px;line-height:1;padding:0 6px 4px;border-radius:6px}
175
+ .mr-modos .mr-modos-puntos:hover{color:#f0eee6;background:#222529}
176
+ @media(max-width:1100px){.mr-modos [class*='_cards']{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
177
+
178
+ /* ── R21 · EL MENÚ DE AJUSTES, CON EL COLOR DE LA MARCA ─────────────────────
179
+ El menú de Ajustes lo pinta el motor (`.navCell` / `.navList`, en
180
+ `dsh-client-ui-settings-general`). Aquí se le da el toque de la casa: el
181
+ icono y la fila activa con el color que manda el tema, el realce al pasar por
182
+ encima, y una línea de color bajo la fila elegida. Todo con las tres palabras
183
+ del tema, así que los tres aspectos lo cambian a la vez. */
184
+ [class*='_navList'] button{position:relative;transition:background .12s ease,color .12s ease}
185
+ [class*='_navList'] button [class*='_navIcon'],
186
+ [class*='_navList'] button svg{color:var(--mr-detalle)}
187
+ [class*='_navList'] button:hover{background:color-mix(in srgb,var(--mr-principal) 10%,transparent)!important;color:#f0eee6}
188
+ [class*='_navList'] button:hover svg{color:var(--mr-principal)}
189
+ [class*='_navList'] button[aria-current='true'],
190
+ [class*='_navList'] button[class*='_active']{background:color-mix(in srgb,var(--mr-principal) 14%,transparent)!important;color:#fff!important;font-weight:650}
191
+ [class*='_navList'] button[aria-current='true'] svg,
192
+ [class*='_navList'] button[class*='_active'] svg{color:var(--mr-principal)}
193
+ [class*='_navList'] button[aria-current='true']::before,
194
+ [class*='_navList'] button[class*='_active']::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;
195
+ border-radius:0 3px 3px 0;background:var(--mr-principal)}
196
+ [class*='_navTitle'],nav[class*='_nav'] :is(h1,h2){letter-spacing:.4px}
197
+
198
+ /* ── R21 · EL ASPECTO, CON LOS TRES TEMAS DE LA CASA ────────────────────────
199
+ La fila nativa del motor (Claro · Oscuro · Sistema, `_themeCube`) se esconde y
200
+ en su sitio va la fila de RATACODE (`.mr-temas`, la monta
201
+ `piel\lib\cliente.js`), que ofrece los tres aspectos y los pinta con su propio
202
+ color para que se vea de un vistazo cuál es cuál. */
203
+ [class*='_group']:has([class*='_themeCube']){display:none!important}
204
+ .mr-temas{display:flex;flex-direction:column;gap:9px;padding:2px 0}
205
+ .mr-temas-titulo{font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary,#f0eee6)}
206
+ .mr-temas-fila{display:flex;gap:8px;flex-wrap:wrap}
207
+ .mr-tema{display:flex;align-items:center;gap:7px;cursor:pointer;padding:7px 13px;border-radius:9px;
208
+ border:1px solid var(--dsw-alias-border-l2,#353a3d);background:transparent;
209
+ color:var(--dsw-alias-label-secondary,#b8bdbb);font:inherit;font-size:12px;line-height:1}
210
+ .mr-tema:hover{border-color:var(--mr-principal);color:var(--dsw-alias-label-primary,#f0eee6)}
211
+ .mr-tema[aria-pressed='true']{border-color:var(--mr-principal);color:#fff;
212
+ background:color-mix(in srgb,var(--mr-principal) 14%,transparent)}
213
+ .mr-tema-punto{width:13px;height:13px;border-radius:50%;flex:none;border:1px solid #ffffff26;
214
+ box-shadow:inset -4px -4px 0 0 var(--punto-detalle)}
215
+ .mr-tema[data-tema='ratacode-pink']{--punto-detalle:#e4f226}
216
+ .mr-tema[data-tema='ratacode-yellow']{--punto-detalle:#ff268e}
217
+ .mr-tema[data-tema='minimal']{--punto-detalle:#3c3c3d}