/* Los ambientes de Norata. Un ambiente NO es un mundo: reusa el material que
   ya hay y solo le cambia la luz. Por eso son los que pueden ser gratis y los
   que pueden salir de uno en uno sin volver a revisar la app entera.

   Cómo se aplica: `<html data-apariencia="musgo">`, y el modo claro sigue
   siendo la clase `claro` de siempre. Los dos ejes son independientes — un
   ambiente tiene sus dos caras, igual que la casa.

   POR QUÉ EL BLOQUE DE NOCHE LLEVA `:not(.claro)`, que parece de más y no lo
   es: `html[data-apariencia="x"]` y `html.claro` tienen la MISMA
   especificidad —un tipo y un selector simple cada uno—, así que decide el
   orden de los archivos, y este se carga después de `estilos.css`. Resultado:
   los tonos de noche del ambiente ganaban a los de día de la casa. Escarcha
   lo destapó porque es el único cuyo bloque de día no redeclara los neutros
   —solo mueve el acento—: en modo claro se quedaba con el fondo de noche y
   texto oscuro encima. Con `:not(.claro)` el bloque de noche deja de existir
   de día y la casa vuelve a mandar, que es lo que promete la línea de arriba.

   Ningún tono se eligió a ojo. La cara de día de los siete está medida y pasa
   4,5 para escribir y 3 para trazar; la tabla está en `apariencias/LEEME.md`.

   OJO al cambiar de ambiente desde JavaScript: hay que apagar las
   transiciones un turno, igual que hace `ponerTema` con `cambiando-modo`. Una
   transición sobre una propiedad cuyo valor sale de una variable se queda
   congelada en Chrome, y cambiar de ambiente cambia veinte variables de
   golpe. Está contado en CLAUDE.md y ya mordió cuatro veces.

   Generado desde `apariencias/datos.py`. No editar a mano. */

/* ---------- Tinta · grado 3 · Desde el día uno · gratis siempre ---------- */
/* No es negro puro a propósito. El negro absoluto solo se luce en OLED y en una pantalla normal se ve gris apagado y triste, así que la idea cambió de «apagar la pantalla» a «tinta sobre papel»: un monocromo elegido, no la ausencia de color. */
html:not(.claro)[data-apariencia="tinta"] {
  --bg: #0d0f11;
  --bg2: #16181b;
  --card: #25292e;
  --card2: #2c3238;
  --line: #41474f;
  --carril: #41474f;
  --text: #eceff2;
  --muted: #98a1aa;
  --faint: #6b737c;
  --mint: #f0ece2;
  --mint-macizo: #f0ece2;
  --aro-alto: #f0ece2;
  --fondo-raiz: #080a0c;
  --fondo-pagina: linear-gradient(180deg, #080a0c 0%, #101214 55%, #0d0f11 100%);
  --orbe-1: rgba(240, 236, 226, 0.18);
  --orbe-2: rgba(245, 215, 110, 0.13);
  --orbe-3: rgba(255, 138, 112, 0.12);
  --lienzo-apagado: #4a4f54;
  --lienzo-hilo: #3d4247;
  --lienzo-rotulo: #a5abb0;
  --lienzo-ficha: #13171b;
  --lienzo-caja: #0e1216;
  --lienzo-bloqueado: #181c20;
  --lienzo-candado: #2d3236;
  --lienzo-flujo: #fef3cf;
  --lienzo-punto: rgba(165, 171, 176, 0.055);
  --sup-hondo: #111315;
  --borde-panel: rgba(65, 71, 79, 0.7);
}
html.claro[data-apariencia="tinta"] {
  --bg: #dfe1e6;
  --bg2: #ebecf0;
  --card: #f7f9fc;
  --card2: #ffffff;
  --line: #abaeb5;
  --carril: #c1c4cb;
  --text: #16181b;
  --muted: #54575c;
  --faint: #797d84;
  --mint: #16181b;
  --mint-macizo: #16181b;
  --aro-alto: #16181b;
  --sobre-macizo: #f7f9fc;
  --fondo-raiz: #d8dadf;
  --fondo-pagina: linear-gradient(180deg, #d8dadf 0%, #e4e6eb 55%, #dfe1e6 100%);
  --orbe-1: rgba(22, 24, 27, 0.18);
  --orbe-2: rgba(245, 195, 20, 0.13);
  --orbe-3: rgba(255, 96, 61, 0.12);
  --lienzo-apagado: #8d8f93;
  --lienzo-hilo: #929398;
  --lienzo-rotulo: #44464a;
  --lienzo-ficha: #f9fafc;
  --lienzo-caja: #f9fafc;
  --lienzo-bloqueado: #e9ebf0;
  --lienzo-candado: #8d8f93;
  --lienzo-flujo: #b79100;
  --lienzo-punto: rgba(68, 70, 74, 0.075);
  --sup-hondo: #d7d8dd;
  --borde-panel: #ced1d8;
}

/* ---------- Musgo · grado 1 · Nivel 3 · con el rango Brote ---------- */
/* El verde de día se corrigió una vez: estaba demasiado oscuro y saturado para ser papel, y a ese nivel deja de leerse como una hoja y se lee como una pared pintada. Se le subió la luz y se le bajó la saturación sin cambiar el matiz. La noche no se tocó. */
html:not(.claro)[data-apariencia="musgo"] {
  --bg: #030e08;
  --bg2: #081910;
  --card: #062a17;
  --card2: #11331d;
  --line: #294230;
  --carril: #294230;
  --text: #e8f1e9;
  --muted: #87998c;
  --faint: #5c6b60;
  --fondo-raiz: #010905;
  --fondo-pagina: linear-gradient(180deg, #010905 0%, #05110b 55%, #030e08 100%);
  --orbe-1: rgba(92, 195, 136, 0.18);
  --orbe-2: rgba(245, 215, 110, 0.13);
  --orbe-3: rgba(255, 138, 112, 0.12);
  --lienzo-apagado: #3a4f44;
  --lienzo-hilo: #2c4337;
  --lienzo-rotulo: #99a9a0;
  --lienzo-ficha: #08160f;
  --lienzo-caja: #06100b;
  --lienzo-bloqueado: #0a1b13;
  --lienzo-candado: #1f3128;
  --lienzo-flujo: #fef3cf;
  --lienzo-punto: rgba(153, 169, 160, 0.055);
  --sup-hondo: #05120c;
  --borde-panel: rgba(41, 66, 48, 0.7);
}
html.claro[data-apariencia="musgo"] {
  --bg: #e0e3de;
  --bg2: #e9ece7;
  --card: #f4f7f3;
  --card2: #fcfdfb;
  --line: #bdc4bb;
  --carril: #c7cfc6;
  --text: #16211a;
  --muted: #57655b;
  --faint: #78877c;
  --fondo-raiz: #d9dcd7;
  --fondo-pagina: linear-gradient(180deg, #d9dcd7 0%, #e5e8e3 55%, #e0e3de 100%);
  --orbe-1: rgba(117, 177, 95, 0.18);
  --orbe-2: rgba(245, 195, 20, 0.13);
  --orbe-3: rgba(255, 96, 61, 0.12);
  --lienzo-apagado: #8e918c;
  --lienzo-hilo: #939591;
  --lienzo-rotulo: #454844;
  --lienzo-ficha: #fafbf9;
  --lienzo-caja: #fafbf9;
  --lienzo-bloqueado: #eaede8;
  --lienzo-candado: #8e918c;
  --lienzo-flujo: #b79100;
  --lienzo-punto: rgba(69, 72, 68, 0.075);
  --sup-hondo: #d7dad6;
  --borde-panel: #e0e8de;
}

/* ---------- Adobe · grado 1 · Nivel 7 · con el rango Refugio ---------- */
html:not(.claro)[data-apariencia="adobe"] {
  --bg: #0b0301;
  --bg2: #180903;
  --card: #321306;
  --card2: #3d1c0e;
  --line: #4c3025;
  --carril: #4c3025;
  --text: #f4ebe4;
  --muted: #ab958a;
  --faint: #7c6a60;
  --fondo-raiz: #070100;
  --fondo-pagina: linear-gradient(180deg, #070100 0%, #0e0502 55%, #0b0301 100%);
  --orbe-1: rgba(239, 142, 102, 0.18);
  --orbe-2: rgba(245, 215, 110, 0.13);
  --orbe-3: rgba(255, 138, 112, 0.12);
  --lienzo-apagado: #4f3b32;
  --lienzo-hilo: #432e25;
  --lienzo-rotulo: #a5968e;
  --lienzo-ficha: #130804;
  --lienzo-caja: #0d0502;
  --lienzo-bloqueado: #1a0b05;
  --lienzo-candado: #302018;
  --lienzo-flujo: #fef3cf;
  --lienzo-punto: rgba(165, 150, 142, 0.055);
  --sup-hondo: #0f0502;
  --borde-panel: rgba(76, 48, 37, 0.7);
}
html.claro[data-apariencia="adobe"] {
  --bg: #dbccc2;
  --bg2: #e7dbd3;
  --card: #f4ebe4;
  --card2: #faf5f0;
  --line: #bda89a;
  --carril: #cbb8aa;
  --text: #241a14;
  --muted: #6b5a50;
  --faint: #8c7a70;
  --fondo-raiz: #d4c5bb;
  --fondo-pagina: linear-gradient(180deg, #d4c5bb 0%, #e0d1c6 55%, #dbccc2 100%);
  --orbe-1: rgba(216, 137, 65, 0.18);
  --orbe-2: rgba(245, 195, 20, 0.13);
  --orbe-3: rgba(255, 96, 61, 0.12);
  --lienzo-apagado: #897c72;
  --lienzo-hilo: #8e8077;
  --lienzo-rotulo: #41352d;
  --lienzo-ficha: #e9e7e6;
  --lienzo-caja: #e9e7e6;
  --lienzo-bloqueado: #e2d7d0;
  --lienzo-candado: #897c72;
  --lienzo-flujo: #b79100;
  --lienzo-punto: rgba(65, 53, 45, 0.075);
  --sup-hondo: #d8c9bf;
  --borde-panel: #e0cbbc;
}

/* ---------- Duna · grado 1 · Nivel 20 · con el rango Norte ---------- */
/* Rehecha en la 0.7.147. La primera Duna era violeta y lavanda —el desierto de noche— y Eduardo la paró: «necesita parecerse algo más al desierto, ahorita carece de sentido ese color y ese nombre». Ahora el suelo es arena y el violeta se quedó en el cielo, de segundo tono. Con eso Cobre dejó de ser bronce (bronce y arena daban 3 de distancia) y pasó a su pátina. */
html:not(.claro)[data-apariencia="duna"] {
  --bg: #100b06;
  --bg2: #1b140c;
  --card: #352818;
  --card2: #40311d;
  --line: #5a4630;
  --carril: #5a4630;
  --text: #f5eee2;
  --muted: #b3a38a;
  --faint: #85765f;
  --fondo-raiz: #0b0703;
  --fondo-pagina: linear-gradient(180deg, #0b0703 0%, #130e08 55%, #100b06 100%);
  --orbe-1: rgba(221, 156, 66, 0.18);
  --orbe-2: rgba(245, 215, 110, 0.13);
  --orbe-3: rgba(255, 138, 112, 0.12);
  --lienzo-apagado: #574838;
  --lienzo-hilo: #4a3b2b;
  --lienzo-rotulo: #afa498;
  --lienzo-ficha: #1a1208;
  --lienzo-caja: #140d06;
  --lienzo-bloqueado: #211609;
  --lienzo-candado: #372b1e;
  --lienzo-flujo: #fef3cf;
  --lienzo-punto: rgba(175, 164, 152, 0.055);
  --sup-hondo: #140f09;
  --borde-panel: rgba(90, 70, 48, 0.7);
}
html.claro[data-apariencia="duna"] {
  --bg: #e2d4bc;
  --bg2: #ebe1ce;
  --card: #f8f2e7;
  --card2: #fcf9f3;
  --line: #c8b38f;
  --carril: #d4c19f;
  --text: #2a1f10;
  --muted: #6b5a40;
  --faint: #8a785c;
  --fondo-raiz: #dbcdb5;
  --fondo-pagina: linear-gradient(180deg, #dbcdb5 0%, #e7d9c0 55%, #e2d4bc 100%);
  --orbe-1: rgba(198, 150, 43, 0.18);
  --orbe-2: rgba(245, 195, 20, 0.13);
  --orbe-3: rgba(255, 96, 61, 0.12);
  --lienzo-apagado: #90836d;
  --lienzo-hilo: #948771;
  --lienzo-rotulo: #473b27;
  --lienzo-ficha: #efeeec;
  --lienzo-caja: #efeeec;
  --lienzo-bloqueado: #e5dfd5;
  --lienzo-candado: #8e8371;
  --lienzo-flujo: #b79100;
  --lienzo-punto: rgba(71, 59, 39, 0.075);
  --sup-hondo: #d9ccb4;
  --borde-panel: #ecd6b1;
}

/* ---------- Escarcha · grado 2 · Nivel 12 · con el rango Cima · Pro ---------- */
html:not(.claro)[data-apariencia="escarcha"] {
  --bg: #040b13;
  --bg2: #081420;
  --card: #0c243c;
  --card2: #0f2d44;
  --line: #253a4e;
  --carril: #253a4e;
  --text: #e7f0f5;
  --muted: #8496a3;
  --faint: #5a6b78;
  --mint: #8ecdf5;
  --mint-macizo: #8ecdf5;
  --aro-alto: #8ecdf5;
  --fondo-raiz: #02070e;
  --fondo-pagina: linear-gradient(180deg, #02070e 0%, #060e16 55%, #040b13 100%);
  --orbe-1: rgba(142, 205, 245, 0.18);
  --orbe-2: rgba(245, 215, 110, 0.13);
  --orbe-3: rgba(255, 138, 112, 0.12);
  --lienzo-apagado: #3b4a5a;
  --lienzo-hilo: #2e3e4e;
  --lienzo-rotulo: #99a5b1;
  --lienzo-ficha: #09131c;
  --lienzo-caja: #060e15;
  --lienzo-bloqueado: #0b1823;
  --lienzo-candado: #202d3a;
  --lienzo-flujo: #fef3cf;
  --lienzo-punto: rgba(153, 165, 177, 0.055);
  --sup-hondo: #070f17;
  --borde-panel: rgba(37, 58, 78, 0.7);
}
html.claro[data-apariencia="escarcha"] {
  --mint: #0f688f;
  --mint-macizo: #3ab0e0;
  --aro-alto: #1a8cbe;
  --orbe-1: rgba(58, 176, 224, 0.18);
  --orbe-2: rgba(245, 195, 20, 0.13);
  --orbe-3: rgba(255, 96, 61, 0.12);
}

/* ---------- Marea · grado 2 · Nivel 5 · Pro ---------- */
/* La primera versión era la casa con otro azul, y con razón: el clásico ya es un carbón azulado, así que ponerle más azul no lo aleja, lo confirma. Se arregló en dos movimientos — la tarjeta dejó de ser gris azulado y se volvió verdiazul de verdad, y el acento se corrió hacia el agua. Eso lo subió a grado 2. */
html:not(.claro)[data-apariencia="marea"] {
  --bg: #010c11;
  --bg2: #041820;
  --card: #022f3e;
  --card2: #073a49;
  --line: #204b59;
  --carril: #204b59;
  --text: #dff2f5;
  --muted: #79a3ae;
  --faint: #4f7784;
  --mint: #4fe0d0;
  --mint-macizo: #4fe0d0;
  --aro-alto: #4fe0d0;
  --fondo-raiz: #00080c;
  --fondo-pagina: linear-gradient(180deg, #00080c 0%, #020f14 55%, #010c11 100%);
  --orbe-1: rgba(79, 224, 208, 0.18);
  --orbe-2: rgba(245, 215, 110, 0.13);
  --orbe-3: rgba(255, 138, 112, 0.12);
  --lienzo-apagado: #354c55;
  --lienzo-hilo: #274049;
  --lienzo-rotulo: #95a6ad;
  --lienzo-ficha: #051419;
  --lienzo-caja: #040f13;
  --lienzo-bloqueado: #051920;
  --lienzo-candado: #1b2f36;
  --lienzo-flujo: #fef3cf;
  --lienzo-punto: rgba(149, 166, 173, 0.055);
  --sup-hondo: #031015;
  --borde-panel: rgba(32, 75, 89, 0.7);
}
html.claro[data-apariencia="marea"] {
  --bg: #cbdcde;
  --bg2: #dde9ea;
  --card: #ebf4f4;
  --card2: #f5fafa;
  --line: #a0babe;
  --carril: #b4cdcf;
  --text: #06232a;
  --muted: #4f717a;
  --faint: #6d8b93;
  --mint: #006b62;
  --mint-macizo: #00d4bd;
  --aro-alto: #009083;
  --fondo-raiz: #c4d5d7;
  --fondo-pagina: linear-gradient(180deg, #c4d5d7 0%, #d0e1e3 55%, #cbdcde 100%);
  --orbe-1: rgba(0, 212, 189, 0.18);
  --orbe-2: rgba(245, 195, 20, 0.13);
  --orbe-3: rgba(255, 96, 61, 0.12);
  --lienzo-apagado: #7b8a8c;
  --lienzo-hilo: #7f8f91;
  --lienzo-rotulo: #344244;
  --lienzo-ficha: #eff1f2;
  --lienzo-caja: #eff1f2;
  --lienzo-bloqueado: #d8e6e7;
  --lienzo-candado: #7b8a8c;
  --lienzo-flujo: #b79100;
  --lienzo-punto: rgba(52, 66, 68, 0.075);
  --sup-hondo: #c3d4d6;
  --borde-panel: #c3dde1;
}

/* ---------- Cobre · grado 1 · Nivel 10 ---------- */
html:not(.claro)[data-apariencia="cobre"] {
  --bg: #080d0b;
  --bg2: #0f1713;
  --card: #1f2d28;
  --card2: #263733;
  --line: #3a4d45;
  --carril: #3a4d45;
  --text: #eaf2ee;
  --muted: #97aaa2;
  --faint: #687a73;
  --fondo-raiz: #050807;
  --fondo-pagina: linear-gradient(180deg, #050807 0%, #0b100e 55%, #080d0b 100%);
  --orbe-1: rgba(57, 197, 159, 0.18);
  --orbe-2: rgba(245, 215, 110, 0.13);
  --orbe-3: rgba(255, 138, 112, 0.12);
  --lienzo-apagado: #404e49;
  --lienzo-hilo: #33423c;
  --lienzo-rotulo: #99aaa3;
  --lienzo-ficha: #091612;
  --lienzo-caja: #06110d;
  --lienzo-bloqueado: #0e1b16;
  --lienzo-candado: #23312c;
  --lienzo-flujo: #fef3cf;
  --lienzo-punto: rgba(153, 170, 163, 0.055);
  --sup-hondo: #0c110f;
  --borde-panel: rgba(58, 77, 69, 0.7);
}
html.claro[data-apariencia="cobre"] {
  --bg: #d5ded9;
  --bg2: #e1e8e4;
  --card: #f1f6f3;
  --card2: #f8fbf9;
  --line: #aebfb6;
  --carril: #bdccc4;
  --text: #13201b;
  --muted: #4e6159;
  --faint: #6d8078;
  --fondo-raiz: #ced7d2;
  --fondo-pagina: linear-gradient(180deg, #ced7d2 0%, #dae3de 55%, #d5ded9 100%);
  --orbe-1: rgba(68, 183, 130, 0.18);
  --orbe-2: rgba(245, 195, 20, 0.13);
  --orbe-3: rgba(255, 96, 61, 0.12);
  --lienzo-apagado: #848c88;
  --lienzo-hilo: #88918c;
  --lienzo-rotulo: #3c4440;
  --lienzo-ficha: #f2f5f3;
  --lienzo-caja: #f2f5f3;
  --lienzo-bloqueado: #dfe8e3;
  --lienzo-candado: #848c88;
  --lienzo-flujo: #b79100;
  --lienzo-punto: rgba(60, 68, 64, 0.075);
  --sup-hondo: #cdd6d1;
  --borde-panel: #d1e2d9;
}

/* ---------- Zafiro · grado 2 · Nivel 16 · Pro ---------- */
html:not(.claro)[data-apariencia="zafiro"] {
  --bg: #050613;
  --bg2: #0b0d20;
  --card: #1d2144;
  --card2: #242a50;
  --line: #363d6a;
  --carril: #363d6a;
  --text: #eceefb;
  --muted: #9ba1c9;
  --faint: #6a7099;
  --mint: #7f95ff;
  --mint-macizo: #7f95ff;
  --aro-alto: #7f95ff;
  --fondo-raiz: #03030e;
  --fondo-pagina: linear-gradient(180deg, #03030e 0%, #070816 55%, #050613 100%);
  --orbe-1: rgba(127, 149, 255, 0.18);
  --orbe-2: rgba(245, 215, 110, 0.13);
  --orbe-3: rgba(255, 138, 112, 0.12);
  --lienzo-apagado: #404356;
  --lienzo-hilo: #33374a;
  --lienzo-rotulo: #9a9dac;
  --lienzo-ficha: #0b0d18;
  --lienzo-caja: #080912;
  --lienzo-bloqueado: #101220;
  --lienzo-candado: #242736;
  --lienzo-flujo: #fef3cf;
  --lienzo-punto: rgba(154, 157, 172, 0.055);
  --sup-hondo: #080917;
  --borde-panel: rgba(54, 61, 106, 0.7);
}
html.claro[data-apariencia="zafiro"] {
  --bg: #d7d9eb;
  --bg2: #e3e4f2;
  --card: #f3f3fc;
  --card2: #fafaff;
  --line: #b2b6d8;
  --carril: #c0c3e1;
  --text: #161a33;
  --muted: #50557a;
  --faint: #6d7298;
  --mint: #3446c2;
  --mint-macizo: #7f95ff;
  --aro-alto: #5064e0;
  --fondo-raiz: #d0d2e4;
  --fondo-pagina: linear-gradient(180deg, #d0d2e4 0%, #dcdef0 55%, #d7d9eb 100%);
  --orbe-1: rgba(127, 149, 255, 0.18);
  --orbe-2: rgba(245, 195, 20, 0.13);
  --orbe-3: rgba(255, 96, 61, 0.12);
  --lienzo-apagado: #868898;
  --lienzo-hilo: #8a8c9d;
  --lienzo-rotulo: #3e3f4e;
  --lienzo-ficha: #f2f3f5;
  --lienzo-caja: #f2f3f5;
  --lienzo-bloqueado: #e2e4ef;
  --lienzo-candado: #868898;
  --lienzo-flujo: #b79100;
  --lienzo-punto: rgba(62, 63, 78, 0.075);
  --sup-hondo: #cfd1e2;
  --borde-panel: #d5d9fc;
}

/* ---------- Oliva · grado 1 · Nivel 30 ---------- */
html:not(.claro)[data-apariencia="oliva"] {
  --bg: #080904;
  --bg2: #101309;
  --card: #262c18;
  --card2: #2f371e;
  --line: #424b2d;
  --carril: #424b2d;
  --text: #eef0e4;
  --muted: #a2a88e;
  --faint: #737a60;
  --fondo-raiz: #050502;
  --fondo-pagina: linear-gradient(180deg, #050502 0%, #0b0c06 55%, #080904 100%);
  --orbe-1: rgba(157, 184, 84, 0.18);
  --orbe-2: rgba(245, 215, 110, 0.13);
  --orbe-3: rgba(255, 138, 112, 0.12);
  --lienzo-apagado: #454834;
  --lienzo-hilo: #393c27;
  --lienzo-rotulo: #9fa293;
  --lienzo-ficha: #0f1105;
  --lienzo-caja: #0a0c04;
  --lienzo-bloqueado: #141606;
  --lienzo-candado: #282b1b;
  --lienzo-flujo: #fef3cf;
  --lienzo-punto: rgba(159, 162, 147, 0.055);
  --sup-hondo: #0c0d06;
  --borde-panel: rgba(66, 75, 45, 0.7);
}
html.claro[data-apariencia="oliva"] {
  --bg: #dcdece;
  --bg2: #e7e8dc;
  --card: #f5f6ee;
  --card2: #fafbf6;
  --line: #bec2a8;
  --carril: #cacdb6;
  --text: #1c2012;
  --muted: #5d634a;
  --faint: #7b8166;
  --fondo-raiz: #d5d7c7;
  --fondo-pagina: linear-gradient(180deg, #d5d7c7 0%, #e1e3d3 55%, #dcdece 100%);
  --orbe-1: rgba(160, 166, 58, 0.18);
  --orbe-2: rgba(245, 195, 20, 0.13);
  --orbe-3: rgba(255, 96, 61, 0.12);
  --lienzo-apagado: #8a8c7d;
  --lienzo-hilo: #8f9182;
  --lienzo-rotulo: #424336;
  --lienzo-ficha: #f5f5f3;
  --lienzo-caja: #f5f5f3;
  --lienzo-bloqueado: #e6e8dc;
  --lienzo-candado: #8a8c7d;
  --lienzo-flujo: #b79100;
  --lienzo-punto: rgba(66, 67, 54, 0.075);
  --sup-hondo: #d4d6c6;
  --borde-panel: #e1e6cb;
}


/* ---------- Y dentro de las escenas ----------
   La tarjeta de la racha, los encabezados de los cuatro módulos y la
   celebración NO cambian de modo: son un dibujo de una noche, no interfaz, y
   por eso `estilos.css` les vuelve a declarar la paleta oscura entera dentro.
   Esa relectura es la que dejaba a los ambientes fuera: cambiaban :root y la
   escena seguía pintada con los hexes de la casa escritos a mano. Se veía
   clarísimo en los banners de los módulos — la app entera de otro color y sus
   cuatro cabeceras en azul.

   Aquí cada ambiente vuelve a declarar SU noche dentro de la escena. Sin
   `:not(.claro)` a propósito, y es la única regla de este archivo que no lo
   lleva: la escena se queda de noche en los dos modos, así que su bloque
   también.

   Lo que se toca y por qué: los neutros y el acento salen del propio ambiente;
   el cielo del motivo y las tres bases de la escena se DERIVAN de su fondo y
   su tinta, porque son el mismo material visto con otra transparencia y
   dejarlos fijos volvería a poner el azul de la casa por debajo del dibujo. */

/* Tinta */
html[data-apariencia="tinta"] .scene-card,
html[data-apariencia="tinta"] .celebrate,
html[data-apariencia="tinta"] .ncel,
html[data-apariencia="tinta"] .scel {
  --bg: #0d0f11;
  --bg2: #16181b;
  --card: #25292e;
  --card2: #2c3238;
  --sup-pagina: var(--bg);
  --sup-panel: var(--bg2);
  --sup-tarjeta: var(--card);
  --sup-tarjeta2: var(--card2);
  --line: #41474f;
  --carril: #41474f;
  --text: #eceff2;
  --muted: #98a1aa;
  --faint: #6b737c;
  --mint: #f0ece2;
  --mint-macizo: #f0ece2;
  --mint-soft: rgba(240, 236, 226, 0.13);
  --sobre-acento: #0d0f11;
  --motivo-cielo-1: #25292e;
  --motivo-cielo-2: #16181b;
  --motivo-chispa: #eceff2;
  --motivo-humo: rgba(236, 239, 242, 0.3);
  --motivo-humo-tenue: rgba(236, 239, 242, 0.2);
  --motivo-espuma: rgba(236, 239, 242, 0.6);
  --motivo-lienzo: #16181b;
  --motivo-curva: #41474f;
  --escena-fondo: 13, 15, 17;
  --escena-vidrio: 37, 41, 46;
  --escena-tinta: 236, 239, 242;
  --escena-tinte-modo: block;
  --escena-tinte: #25292e;
  --escena-tinte-fuerza: 1;
}

/* Musgo */
html[data-apariencia="musgo"] .scene-card,
html[data-apariencia="musgo"] .celebrate,
html[data-apariencia="musgo"] .ncel,
html[data-apariencia="musgo"] .scel {
  --bg: #030e08;
  --bg2: #081910;
  --card: #062a17;
  --card2: #11331d;
  --sup-pagina: var(--bg);
  --sup-panel: var(--bg2);
  --sup-tarjeta: var(--card);
  --sup-tarjeta2: var(--card2);
  --line: #294230;
  --carril: #294230;
  --text: #e8f1e9;
  --muted: #87998c;
  --faint: #5c6b60;
  --motivo-cielo-1: #062a17;
  --motivo-cielo-2: #081910;
  --motivo-chispa: #e8f1e9;
  --motivo-humo: rgba(232, 241, 233, 0.3);
  --motivo-humo-tenue: rgba(232, 241, 233, 0.2);
  --motivo-espuma: rgba(232, 241, 233, 0.6);
  --motivo-lienzo: #081910;
  --motivo-curva: #294230;
  --escena-fondo: 3, 14, 8;
  --escena-vidrio: 6, 42, 23;
  --escena-tinta: 232, 241, 233;
  --escena-tinte-modo: block;
  --escena-tinte: #062a17;
  --escena-tinte-fuerza: 0.85;
}

/* Adobe */
html[data-apariencia="adobe"] .scene-card,
html[data-apariencia="adobe"] .celebrate,
html[data-apariencia="adobe"] .ncel,
html[data-apariencia="adobe"] .scel {
  --bg: #0b0301;
  --bg2: #180903;
  --card: #321306;
  --card2: #3d1c0e;
  --sup-pagina: var(--bg);
  --sup-panel: var(--bg2);
  --sup-tarjeta: var(--card);
  --sup-tarjeta2: var(--card2);
  --line: #4c3025;
  --carril: #4c3025;
  --text: #f4ebe4;
  --muted: #ab958a;
  --faint: #7c6a60;
  --motivo-cielo-1: #321306;
  --motivo-cielo-2: #180903;
  --motivo-chispa: #f4ebe4;
  --motivo-humo: rgba(244, 235, 228, 0.3);
  --motivo-humo-tenue: rgba(244, 235, 228, 0.2);
  --motivo-espuma: rgba(244, 235, 228, 0.6);
  --motivo-lienzo: #180903;
  --motivo-curva: #4c3025;
  --escena-fondo: 11, 3, 1;
  --escena-vidrio: 50, 19, 6;
  --escena-tinta: 244, 235, 228;
  --escena-tinte-modo: block;
  --escena-tinte: #321306;
  --escena-tinte-fuerza: 0.85;
}

/* Duna */
html[data-apariencia="duna"] .scene-card,
html[data-apariencia="duna"] .celebrate,
html[data-apariencia="duna"] .ncel,
html[data-apariencia="duna"] .scel {
  --bg: #100b06;
  --bg2: #1b140c;
  --card: #352818;
  --card2: #40311d;
  --sup-pagina: var(--bg);
  --sup-panel: var(--bg2);
  --sup-tarjeta: var(--card);
  --sup-tarjeta2: var(--card2);
  --line: #5a4630;
  --carril: #5a4630;
  --text: #f5eee2;
  --muted: #b3a38a;
  --faint: #85765f;
  --motivo-cielo-1: #352818;
  --motivo-cielo-2: #1b140c;
  --motivo-chispa: #f5eee2;
  --motivo-humo: rgba(245, 238, 226, 0.3);
  --motivo-humo-tenue: rgba(245, 238, 226, 0.2);
  --motivo-espuma: rgba(245, 238, 226, 0.6);
  --motivo-lienzo: #1b140c;
  --motivo-curva: #5a4630;
  --escena-fondo: 16, 11, 6;
  --escena-vidrio: 53, 40, 24;
  --escena-tinta: 245, 238, 226;
  --escena-tinte-modo: block;
  --escena-tinte: #352818;
  --escena-tinte-fuerza: 0.85;
}

/* Escarcha */
html[data-apariencia="escarcha"] .scene-card,
html[data-apariencia="escarcha"] .celebrate,
html[data-apariencia="escarcha"] .ncel,
html[data-apariencia="escarcha"] .scel {
  --bg: #040b13;
  --bg2: #081420;
  --card: #0c243c;
  --card2: #0f2d44;
  --sup-pagina: var(--bg);
  --sup-panel: var(--bg2);
  --sup-tarjeta: var(--card);
  --sup-tarjeta2: var(--card2);
  --line: #253a4e;
  --carril: #253a4e;
  --text: #e7f0f5;
  --muted: #8496a3;
  --faint: #5a6b78;
  --mint: #8ecdf5;
  --mint-macizo: #8ecdf5;
  --mint-soft: rgba(142, 205, 245, 0.13);
  --sobre-acento: #040b13;
  --motivo-cielo-1: #0c243c;
  --motivo-cielo-2: #081420;
  --motivo-chispa: #e7f0f5;
  --motivo-humo: rgba(231, 240, 245, 0.3);
  --motivo-humo-tenue: rgba(231, 240, 245, 0.2);
  --motivo-espuma: rgba(231, 240, 245, 0.6);
  --motivo-lienzo: #081420;
  --motivo-curva: #253a4e;
  --escena-fondo: 4, 11, 19;
  --escena-vidrio: 12, 36, 60;
  --escena-tinta: 231, 240, 245;
  --escena-tinte-modo: block;
  --escena-tinte: #0c243c;
  --escena-tinte-fuerza: 0.95;
}

/* Marea */
html[data-apariencia="marea"] .scene-card,
html[data-apariencia="marea"] .celebrate,
html[data-apariencia="marea"] .ncel,
html[data-apariencia="marea"] .scel {
  --bg: #010c11;
  --bg2: #041820;
  --card: #022f3e;
  --card2: #073a49;
  --sup-pagina: var(--bg);
  --sup-panel: var(--bg2);
  --sup-tarjeta: var(--card);
  --sup-tarjeta2: var(--card2);
  --line: #204b59;
  --carril: #204b59;
  --text: #dff2f5;
  --muted: #79a3ae;
  --faint: #4f7784;
  --mint: #4fe0d0;
  --mint-macizo: #4fe0d0;
  --mint-soft: rgba(79, 224, 208, 0.13);
  --sobre-acento: #010c11;
  --motivo-cielo-1: #022f3e;
  --motivo-cielo-2: #041820;
  --motivo-chispa: #dff2f5;
  --motivo-humo: rgba(223, 242, 245, 0.3);
  --motivo-humo-tenue: rgba(223, 242, 245, 0.2);
  --motivo-espuma: rgba(223, 242, 245, 0.6);
  --motivo-lienzo: #041820;
  --motivo-curva: #204b59;
  --escena-fondo: 1, 12, 17;
  --escena-vidrio: 2, 47, 62;
  --escena-tinta: 223, 242, 245;
  --escena-tinte-modo: block;
  --escena-tinte: #022f3e;
  --escena-tinte-fuerza: 0.95;
}

/* Cobre */
html[data-apariencia="cobre"] .scene-card,
html[data-apariencia="cobre"] .celebrate,
html[data-apariencia="cobre"] .ncel,
html[data-apariencia="cobre"] .scel {
  --bg: #080d0b;
  --bg2: #0f1713;
  --card: #1f2d28;
  --card2: #263733;
  --sup-pagina: var(--bg);
  --sup-panel: var(--bg2);
  --sup-tarjeta: var(--card);
  --sup-tarjeta2: var(--card2);
  --line: #3a4d45;
  --carril: #3a4d45;
  --text: #eaf2ee;
  --muted: #97aaa2;
  --faint: #687a73;
  --motivo-cielo-1: #1f2d28;
  --motivo-cielo-2: #0f1713;
  --motivo-chispa: #eaf2ee;
  --motivo-humo: rgba(234, 242, 238, 0.3);
  --motivo-humo-tenue: rgba(234, 242, 238, 0.2);
  --motivo-espuma: rgba(234, 242, 238, 0.6);
  --motivo-lienzo: #0f1713;
  --motivo-curva: #3a4d45;
  --escena-fondo: 8, 13, 11;
  --escena-vidrio: 31, 45, 40;
  --escena-tinta: 234, 242, 238;
  --escena-tinte-modo: block;
  --escena-tinte: #1f2d28;
  --escena-tinte-fuerza: 0.85;
}

/* Zafiro */
html[data-apariencia="zafiro"] .scene-card,
html[data-apariencia="zafiro"] .celebrate,
html[data-apariencia="zafiro"] .ncel,
html[data-apariencia="zafiro"] .scel {
  --bg: #050613;
  --bg2: #0b0d20;
  --card: #1d2144;
  --card2: #242a50;
  --sup-pagina: var(--bg);
  --sup-panel: var(--bg2);
  --sup-tarjeta: var(--card);
  --sup-tarjeta2: var(--card2);
  --line: #363d6a;
  --carril: #363d6a;
  --text: #eceefb;
  --muted: #9ba1c9;
  --faint: #6a7099;
  --mint: #7f95ff;
  --mint-macizo: #7f95ff;
  --mint-soft: rgba(127, 149, 255, 0.13);
  --sobre-acento: #050613;
  --motivo-cielo-1: #1d2144;
  --motivo-cielo-2: #0b0d20;
  --motivo-chispa: #eceefb;
  --motivo-humo: rgba(236, 238, 251, 0.3);
  --motivo-humo-tenue: rgba(236, 238, 251, 0.2);
  --motivo-espuma: rgba(236, 238, 251, 0.6);
  --motivo-lienzo: #0b0d20;
  --motivo-curva: #363d6a;
  --escena-fondo: 5, 6, 19;
  --escena-vidrio: 29, 33, 68;
  --escena-tinta: 236, 238, 251;
  --escena-tinte-modo: block;
  --escena-tinte: #1d2144;
  --escena-tinte-fuerza: 0.95;
}

/* Oliva */
html[data-apariencia="oliva"] .scene-card,
html[data-apariencia="oliva"] .celebrate,
html[data-apariencia="oliva"] .ncel,
html[data-apariencia="oliva"] .scel {
  --bg: #080904;
  --bg2: #101309;
  --card: #262c18;
  --card2: #2f371e;
  --sup-pagina: var(--bg);
  --sup-panel: var(--bg2);
  --sup-tarjeta: var(--card);
  --sup-tarjeta2: var(--card2);
  --line: #424b2d;
  --carril: #424b2d;
  --text: #eef0e4;
  --muted: #a2a88e;
  --faint: #737a60;
  --motivo-cielo-1: #262c18;
  --motivo-cielo-2: #101309;
  --motivo-chispa: #eef0e4;
  --motivo-humo: rgba(238, 240, 228, 0.3);
  --motivo-humo-tenue: rgba(238, 240, 228, 0.2);
  --motivo-espuma: rgba(238, 240, 228, 0.6);
  --motivo-lienzo: #101309;
  --motivo-curva: #424b2d;
  --escena-fondo: 8, 9, 4;
  --escena-vidrio: 38, 44, 24;
  --escena-tinta: 238, 240, 228;
  --escena-tinte-modo: block;
  --escena-tinte: #262c18;
  --escena-tinte-fuerza: 0.85;
}


/* ---------- Las muestras de la pantalla de Ajustes ----------
   Los mismos tonos de arriba, expuestos en una clase para poder pintar cada
   ambiente EN PEQUEÑO sin ponérselo a la app entera. Salen del mismo sitio
   que los de verdad, así que no pueden discrepar: el día que cambie un tono
   cambian los dos.

   Una muestra enseña TRES cosas —fondo, tarjeta y acento— y no un círculo de
   color, porque un ambiente cambia tres cosas y un círculo solo enseña una.
   Es la diferencia entre elegir un color y elegir cómo se va a ver la app. */

.mues-casa { --mu-bg: #10151d; --mu-card: #1d2530; --mu-acento: #5fe0b0; --mu-segundo: #f5d76e; }
html.claro .mues-casa { --mu-bg: #dcdef0; --mu-card: #f2f0f9; --mu-acento: #00cc7f; --mu-segundo: #c79a06; }
.mues-tinta { --mu-bg: #0d0f11; --mu-card: #25292e; --mu-acento: #f0ece2; --mu-segundo: #8a8f98; }
html.claro .mues-tinta { --mu-bg: #dfe1e6; --mu-card: #f7f9fc; --mu-acento: #16181b; --mu-segundo: #6b7079; }
.mues-musgo { --mu-bg: #030e08; --mu-card: #062a17; --mu-acento: #5fe0b0; --mu-segundo: #a6c46a; }
html.claro .mues-musgo { --mu-bg: #e0e3de; --mu-card: #f4f7f3; --mu-acento: #00cc7f; --mu-segundo: #5d8a2c; }
.mues-adobe { --mu-bg: #0b0301; --mu-card: #321306; --mu-acento: #5fe0b0; --mu-segundo: #e8b98a; }
html.claro .mues-adobe { --mu-bg: #dbccc2; --mu-card: #f4ebe4; --mu-acento: #00cc7f; --mu-segundo: #b0703a; }
.mues-duna { --mu-bg: #100b06; --mu-card: #352818; --mu-acento: #5fe0b0; --mu-segundo: #8c86e0; }
html.claro .mues-duna { --mu-bg: #e2d4bc; --mu-card: #f8f2e7; --mu-acento: #00cc7f; --mu-segundo: #5a52c0; }
.mues-escarcha { --mu-bg: #040b13; --mu-card: #0c243c; --mu-acento: #8ecdf5; --mu-segundo: #b8b2f0; }
html.claro .mues-escarcha { --mu-bg: #dcdef0; --mu-card: #f2f0f9; --mu-acento: #3ab0e0; --mu-segundo: #6f66cf; }
.mues-marea { --mu-bg: #010c11; --mu-card: #022f3e; --mu-acento: #4fe0d0; --mu-segundo: #3a8fc9; }
html.claro .mues-marea { --mu-bg: #cbdcde; --mu-card: #ebf4f4; --mu-acento: #00d4bd; --mu-segundo: #1f6fa8; }
.mues-cobre { --mu-bg: #080d0b; --mu-card: #1f2d28; --mu-acento: #5fe0b0; --mu-segundo: #d08a55; }
html.claro .mues-cobre { --mu-bg: #d5ded9; --mu-card: #f1f6f3; --mu-acento: #00cc7f; --mu-segundo: #a55e2a; }
.mues-zafiro { --mu-bg: #050613; --mu-card: #1d2144; --mu-acento: #7f95ff; --mu-segundo: #7ee8d6; }
html.claro .mues-zafiro { --mu-bg: #d7d9eb; --mu-card: #f3f3fc; --mu-acento: #7f95ff; --mu-segundo: #0f8f7c; }
.mues-oliva { --mu-bg: #080904; --mu-card: #262c18; --mu-acento: #5fe0b0; --mu-segundo: #c2b3f2; }
html.claro .mues-oliva { --mu-bg: #dcdece; --mu-card: #f5f6ee; --mu-acento: #00cc7f; --mu-segundo: #6d5bc4; }