/*
 * Tema de la consola. Cada página define en su :root los tokens base (tinta, papel, línea,
 * acento…); aquí se añaden los semánticos que antes eran colores fijos sueltos por las hojas y
 * por el SVG que pinta el lienzo, y se redefinen TODOS para el oscuro.
 *
 * El oscuro sigue a n8n: lienzo casi negro con puntos, cajitas gris oscuro con borde claro,
 * verdes y rojos subidos de luz para pasar AA sobre fondo oscuro. Sobre el acento el texto pasa a
 * ser oscuro: un verde claro con texto blanco no llega a 4,5:1.
 */
:root{
  --sobre-acento:#fff;
  --ok:#2e8b57; --error:#c0504a; --error-texto:#b3423a;
  --loop:#6b4fa0; --violeta:#7a4c9e; --violeta-suave:#f3ecf9; --violeta-borde:#d8c5ea; --violeta-tinta:#4e2f69; --violeta-fuerte:#3b2150;
  --vuelta-fondo:#f0ebf8; --vuelta-tinta:#553d85;
  --info:#2b6cb0; --info-suave:#eef4fb; --info-tinta:#24496e;
  --arista:#98a3b0; --puerto:#8b97a4; --pestana:#aeb8c3; --borde-nodo:#c9d1da; --tenue:#b3bdc8;
  --scroll:#cfd6de; --placeholder:#6f7d8d; --gris-tipo:#7a8794;
  --aviso-suave:#fff6e6; --aviso-tinta:#7a5200; --sello-suave:#fdf3d8; --falta:#9a6a00; --incompleto:#d9a441;
  --rayo:#e25b2c; --codigo-fondo:#f7f9fb; --fila-hover:#f7faf9;
  --vidrio:rgba(255,255,255,.92); --velo:rgba(21,32,43,.42); --sombra-rgb:21,32,43;
  --minimapa-n:#c7d0da; --minimapa-f:#d8cdea;
  --logs-fondo:#15202b; --logs-texto:#d7e3ee;
  --mon-var:#7a3fb0; --mon-var-fondo:#f3ecfb; --j-num:#2f6f9f; --j-str:#1d6f5f; --j-key:#7a4c9e;
  --lienzo-fondo:var(--papel); --rejilla:var(--linea-2);
  --leyenda-erp:#2f6f9f; --leyenda-ok:#2e8b57; --leyenda-revisar:#c9950a; --leyenda-detener:#d9534f; --leyenda-sigue:#b9d7c8; --leyenda-decide:#d9b45a;
}

:root[data-tema="oscuro"]{
  color-scheme:dark;
  --tinta:#e7ebf0; --tinta-2:#b4bec9; --tinta-3:#97a2ae;
  --fondo:#15171b; --papel:#1f2329; --linea:#363c45; --linea-2:#2a2f36;
  --acento:#45b894; --acento-suave:#17362e; --sobre-acento:#0a1f19;
  --mal:#f2837a; --mal-suave:#3b201e; --ojo:#e6bb57; --ojo-suave:#372c14;
  --general:#86b6ea; --negocio:#c7a2e6;
  --sombra:0 8px 22px -8px rgba(0,0,0,.6);

  --ok:#4fc58d; --error:#f07468; --error-texto:#f2837a;
  --loop:#ad90e6; --violeta:#c7a2e6; --violeta-suave:#2a2238; --violeta-borde:#4b3d66; --violeta-tinta:#dccdf2; --violeta-fuerte:#efe6fb;
  --vuelta-fondo:#2c2440; --vuelta-tinta:#d4c2f2;
  --info:#6eaaea; --info-suave:#172a3d; --info-tinta:#c3dbf4;
  --arista:#6c7683; --puerto:#909ba8; --pestana:#5d6773; --borde-nodo:#4a525d; --tenue:#535c68;
  --scroll:#3e4550; --placeholder:#8e99a6; --gris-tipo:#97a2ae;
  --aviso-suave:#372c14; --aviso-tinta:#f1d08a; --sello-suave:#3f3216; --falta:#e6bb57; --incompleto:#e6bb57;
  --rayo:#ff8150; --codigo-fondo:#1a1d22; --fila-hover:#262b32;
  --vidrio:rgba(31,35,41,.94); --velo:rgba(0,0,0,.62); --sombra-rgb:0,0,0;
  --minimapa-n:#4a525d; --minimapa-f:#4b3d66;
  --logs-fondo:#0e1013; --logs-texto:#d7e3ee;
  --mon-var:#d6abff; --mon-var-fondo:#33264a; --j-num:#86b6ea; --j-str:#5fd0a8; --j-key:#c7a2e6;
  --lienzo-fondo:#131518; --rejilla:#2b3038;
  --leyenda-erp:#86b6ea; --leyenda-ok:#4fc58d; --leyenda-revisar:#e6bb57; --leyenda-detener:#f07468; --leyenda-sigue:#3f6e5c; --leyenda-decide:#b8964a;
}

/* Lo que el navegador pinta por su cuenta también lleva el tema. */
::selection{background:color-mix(in srgb, var(--acento) 30%, transparent)}
:root[data-tema="oscuro"] body{background:var(--fondo);color:var(--tinta)}
:root[data-tema="oscuro"] input,:root[data-tema="oscuro"] select,:root[data-tema="oscuro"] textarea{background:var(--papel);color:var(--tinta);border-color:var(--linea)}
:root[data-tema="oscuro"] code{color:var(--tinta)}

/* El recuadro de la vista del minimapa, más tenue sobre oscuro. */
:root[data-tema="oscuro"] .minimapa rect.vista{fill:color-mix(in srgb, var(--acento) 7%, transparent)}

/* ── Selector ─────────────────────────────────────────────────────────────────────────────── */
.tema-selector{position:relative;display:inline-flex}
.tema-boton{width:36px;height:36px;display:inline-grid;place-items:center;border:1px solid var(--linea);border-radius:8px;background:var(--papel);color:var(--tinta-2);cursor:pointer;padding:0;transition:color .15s,border-color .15s,background .15s}
.tema-boton:hover{color:var(--tinta);border-color:var(--tinta-3)}
.tema-boton:focus-visible,.tema-menu button:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.tema-boton svg,.tema-menu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tema-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:90;min-width:200px;padding:5px;background:var(--papel);border:1px solid var(--linea);border-radius:10px;box-shadow:0 14px 34px -14px rgba(var(--sombra-rgb),.45);animation:tema-entra .14s cubic-bezier(.2,.8,.2,1)}
.tema-menu[hidden]{display:none}
.tema-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:7px;background:none;color:var(--tinta);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.tema-menu button:hover{background:var(--linea-2)}
.tema-menu button span{flex:1}
.tema-menu .tema-check{width:16px;height:16px;stroke:var(--acento);stroke-width:2.2;visibility:hidden}
.tema-menu button[aria-checked="true"] .tema-check{visibility:visible}
.tema-menu button[aria-checked="true"]{font-weight:600}
@keyframes tema-entra{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tema-menu{animation:none}.tema-boton{transition:none}}

/* ── Colores por familia del lienzo y de la paleta ───────────────────────────────────────────
 * El lienzo pone `--c` y `--suave` en línea en cada cajita, con los colores del JSON de la paleta.
 * Las hojas usan `--c-v` y `--s-v`: en claro son esos mismos; en oscuro se derivan del propio
 * `--c` (más luz para el trazo y el icono, un velo del color sobre el papel para el fondo), así
 * cambiar de tema no obliga a repintar nada desde JavaScript. */
[style*="--c:"]{--c-v:var(--c);--s-v:var(--suave)}
:root[data-tema="oscuro"] [style*="--c:"]{--c-v:color-mix(in oklab, var(--c) 62%, #fff);--s-v:color-mix(in oklab, var(--c) 26%, var(--papel))}