/* css/ui/neon-app.css — la app del alumno: un poco del neón del panel del coach.
   ---------------------------------------------------------------------------------------------
   Pedido: «traslades la estética de un poco de los neones brillosos a la app común y la apliques
   en la estética que ya está ahora». Es el mismo lenguaje del panel (css/screens/coach/neon.css):
   un filete fino en degradé a 155° con el color de la marca en las puntas (--gize-r2 arriba a la
   izquierda, --gize-r1 abajo a la derecha), tenue en reposo, más claro al pasar el mouse y claro en
   lo elegido, y solo lo elegido con un resplandor suave y quieto. Con los mismos tokens: están acá
   abajo (sección 1) y los usan las dos hojas.
   Qué lo lleva en la app:
   - Lo elegido, con el filete claro y el resplandor: el día de Entreno (Torso / Piernas…), la
     pestaña de la barra de abajo, la categoría elegida al buscar un ejercicio, el día de la semana
     elegido, la variante elegida («Ver variantes») y la opción elegida del selector propio (la hoja
     que reemplaza la lista de los <select>, app/ui/selector.js).
   - La portada del día (el nombre grande con «Iniciar entrenamiento»): un filete un poco más
     claro que el de las tarjetas.
   - Con los cantos de color (tenues): los otros días, categorías y días de la semana, y toda la
     familia de los botones secundarios que está en la app («Limpiar», «Ver rutinas armadas»,
     «+ Agregar ejercicio», «Iniciar descanso», el tiempo de descanso, «Agregar con nombre propio»,
     los botones de borde de las ventanas como «Cerrar» o «Cancelar», también el «Cancelar» de las
     preguntas propias y el «Cerrar» del selector, «+500 ml», la meta de agua, «Editar meta», «Cerrar
     sesión»): todos iguales entre sí.
   - Punteado de neón (dos tonos de la marca): «+ Serie» y el «+» entre ejercicios.
   - Los campos con foco conservan su aro azul de siempre y suman el resplandor de la marca (también
     el campo de las preguntas propias, pedir()).
   - Las tarjetas y las filas de la lista (la semana del bloque, «Rutina asignada por tu coach»,
     cada ejercicio, la nota del coach, las cajas de Hábitos, Cardio, Progreso y Ajustes, la barra
     de abajo) ya llevaban el filete tenue (css/ui/calma.css, tema-claro.css, claro-frozen.css:
     --gize-rgb-ring, el mismo degradé a 155°), y los botones de arriba (el chat y la racha) también:
     quedan como están. Los principales (blancos; negros en «Claro») también.
   Cómo se dibuja, sin mover nada (mismo tamaño y lugar con y sin esta hoja):
   - Lo elegido y la portada, como en el panel: el filete en un ::after con máscara sobre el borde de
     1 px (inset -1px; el borde queda transparente). Los que estaban quietos (static) pasan a relative
     (no cambia su caja). Son dos o tres por pantalla (el día elegido, la portada, la pestaña de la
     barra): la máscara cuesta al pintar y al recalcular estilos, por eso solo ahí.
   - Lo demás, sin máscara ni capas: los cantos son sombras de adentro sin desenfoque (una línea
     fina alrededor y dos medialunas, violeta arriba a la izquierda y azul abajo a la derecha). Lo
     que se repite (los dos botones de descanso de cada ejercicio abierto) no suma capas con
     máscara: son tres por pantalla con o sin ejercicios abiertos. Igual cuesta algo (medido en
     «Oscuro» con la CPU 4 veces más lenta, el 19/10): volver a dibujar Entreno al marcar una serie,
     unos 3 ms más con todo cerrado y 6 ms más con 8 ejercicios abiertos (de 69 a 74 ms); pintar
     la pantalla entera, 2,4 a 4,5 ms más (los cantos, 2,5 de esos 4,5). Al deslizar con el dedo
     no hay diferencia (17 ms por cuadro con y sin la hoja, sin cuadros caídos).
   - El resplandor de lo elegido, en el ::before: por dentro y debajo del texto en los días y las
     categorías (están en una fila con scroll, que lo cortaría en línea recta) y por fuera en la
     barra de abajo. El ::before de los días era el brillo que seguía al mouse (apagado,
     css/ui/botones-rediseno.css): acá se usa solo en el elegido.
   - En la portada del día, «Azul» y «Rosa» ya tenían el filete en el ::after (se aclara ese) y
     «Claro» en el ::before (se reemplaza por el ::after, para que no queden dos).
   - El punteado y el foco son colores de borde y sombras: sin capas nuevas.
   Apariencias: los colores salen de los tokens de cada una (en «Azul», «Rosa» y «Claro», el filete y
   los cantos son los de su gama; en «Claro» van con la línea blanca del vidrio, como sus tarjetas).
   Neón apagado (html.sin-neon): lo elegido y la portada con el filete blanco y gris, sin resplandor;
   lo demás, gris como siempre. Liviano y la app de Android: líneas lisas (sin máscaras, cantos ni
   resplandor; lo elegido, con el tono de la marca, salvo en «Claro», donde ya es la pastilla negra).
   GIZE básico: nada de esto. Colores forzados: sin filete ni resplandor (quedan los bordes del
   sistema). «Reducir movimiento»: nada de esto se anima.
   Alcance: la app del alumno (body sin .silk-coach); el panel del coach no cambia. Las reglas llevan
   :not(#_) en html y body, como el panel, para ganarle a las capas de botones y de cada apariencia
   sin depender del orden. Sin CSS anidado (css-sin-anidar). */

/* ---------- 1) Tokens (los del panel del coach y los de la app) ----------
   Los mismos del panel (antes estaban en css/screens/coach/neon.css), ahora en el body: así los
   toman las dos hojas. Solo son variables: sin las reglas de cada hoja no pintan nada. */
/* «Oscuro» (y la base): sin color-mix, la gama de «Oscuro» escrita a mano. */
html:not(#_) body {
  --nn-w: 1.5px;
  --nn-filete: linear-gradient(155deg, rgba(186,140,255,.50) 0%, rgba(255,255,255,.15) 22%, rgba(255,255,255,.07) 50%,
    rgba(255,255,255,.05) 78%, rgba(110,190,255,.42) 100%);
  --nn-filete-hi: linear-gradient(155deg, rgba(186,140,255,.72) 0%, rgba(255,255,255,.24) 26%, rgba(255,255,255,.12) 52%,
    rgba(255,255,255,.10) 76%, rgba(110,190,255,.62) 100%);
  --nn-filete-on: linear-gradient(155deg, rgba(196,156,255,.95) 0%, rgba(206,170,255,.62) 26%, rgba(255,255,255,.32) 50%,
    rgba(140,200,255,.62) 74%, rgba(130,198,255,.92) 100%);
  --nn-brillo: -4px -2px 18px -4px rgba(166,92,255,.62), 4px 2px 18px -4px rgba(47,160,255,.58);
  --nn-brillo-in: inset 4px 3px 12px -6px rgba(166,92,255,.55), inset -4px -3px 12px -6px rgba(47,160,255,.50);
  --nn-foco: -3px -2px 14px -6px rgba(166,92,255,.60), 3px 2px 14px -6px rgba(47,160,255,.55);
  --nn-raya: linear-gradient(90deg, #A65CFF, #2FA0FF);
  --nn-raya-brillo: 0 0 8px rgba(166,92,255,.45);
  --nn-guion-a: rgba(186,140,255,.62);    /* punteado: arriba y a la izquierda */
  --nn-guion-b: rgba(110,190,255,.58);    /* abajo y a la derecha */
  --nn-guion-a-hi: rgba(196,156,255,.9);
  --nn-guion-b-hi: rgba(130,198,255,.88);
  --nn-borde-a: rgba(186,140,255,.42);    /* ventanas: la esquina de arriba a la izquierda */
  --nn-borde-b: rgba(110,190,255,.36);    /* y la de abajo a la derecha */
  --nn-v-n1: rgba(255,255,255,.14);       /* ventanas: el neutro de arriba a la derecha */
  --nn-v-n2: rgba(255,255,255,.07);       /* y el de abajo a la izquierda */
  --nn-borde-l: rgba(148,165,255,.39);    /* liviano: la línea lisa de las ventanas */
  --nn-linea-on: rgba(107,126,255,.85);   /* liviano: la línea lisa de lo elegido */
  --nn-lado: linear-gradient(180deg, rgba(186,140,255,.55), rgba(255,255,255,.12) 28%, rgba(255,255,255,.08) 72%, rgba(110,190,255,.48));
  /* los cantos de color (lo demás, sin máscara): el de la izquierda y el de la derecha, como las puntas del filete */
  --nn-canto-a: rgba(186,140,255,.50); --nn-canto-b: rgba(110,190,255,.42);
  --nn-canto-a-hi: rgba(186,140,255,.72); --nn-canto-b-hi: rgba(110,190,255,.62);
  --nn-canto-n: rgba(255,255,255,.12); --nn-canto-n-hi: rgba(255,255,255,.24);   /* la línea de alrededor */
  /* los cantos enteros (sección 3b): dos medialunas de adentro sin desenfoque, corridas hacia abajo a la
     derecha (se ve arriba a la izquierda) y al revés, encima de la línea de alrededor */
  --nn-cantos: inset 2.5px 1px 0 -1px var(--nn-canto-a), inset -2.5px -1px 0 -1px var(--nn-canto-b), inset 0 0 0 1px var(--nn-canto-n);
  --nn-cantos-hi: inset 2.5px 1px 0 -1px var(--nn-canto-a-hi), inset -2.5px -1px 0 -1px var(--nn-canto-b-hi), inset 0 0 0 1px var(--nn-canto-n-hi);
}
/* «Azul» y «Rosa» sin color-mix: sus colores, escritos a mano. */
html.tema-claro:not(#_) body {
  --nn-filete: linear-gradient(155deg, rgba(182,150,250,.50) 0%, rgba(255,255,255,.15) 22%, rgba(255,255,255,.07) 50%,
    rgba(255,255,255,.05) 78%, rgba(120,190,245,.42) 100%);
  --nn-filete-hi: linear-gradient(155deg, rgba(182,150,250,.72) 0%, rgba(255,255,255,.24) 26%, rgba(255,255,255,.12) 52%,
    rgba(255,255,255,.10) 76%, rgba(120,190,245,.62) 100%);
  --nn-filete-on: linear-gradient(155deg, rgba(190,160,250,.95) 0%, rgba(200,176,250,.62) 26%, rgba(255,255,255,.32) 50%,
    rgba(146,202,246,.62) 74%, rgba(136,198,246,.92) 100%);
  --nn-brillo: -4px -2px 18px -4px rgba(164,116,247,.62), 4px 2px 18px -4px rgba(63,163,242,.58);
  --nn-brillo-in: inset 4px 3px 12px -6px rgba(164,116,247,.55), inset -4px -3px 12px -6px rgba(63,163,242,.50);
  --nn-foco: -3px -2px 14px -6px rgba(164,116,247,.60), 3px 2px 14px -6px rgba(63,163,242,.55);
  --nn-raya: linear-gradient(90deg, #A474F7, #3FA3F2);
  --nn-raya-brillo: 0 0 8px rgba(164,116,247,.45);
  --nn-guion-a: rgba(182,150,250,.62); --nn-guion-b: rgba(120,190,245,.58);
  --nn-guion-a-hi: rgba(190,160,250,.9); --nn-guion-b-hi: rgba(136,198,246,.88);
  --nn-borde-a: rgba(182,150,250,.42); --nn-borde-b: rgba(120,190,245,.36);
  --nn-borde-l: rgba(151,170,248,.39); --nn-linea-on: rgba(114,140,245,.85);
  --nn-lado: linear-gradient(180deg, rgba(182,150,250,.55), rgba(255,255,255,.12) 28%, rgba(255,255,255,.08) 72%, rgba(120,190,245,.48));
  --nn-canto-a: rgba(182,150,250,.50); --nn-canto-b: rgba(120,190,245,.42);
  --nn-canto-a-hi: rgba(182,150,250,.72); --nn-canto-b-hi: rgba(120,190,245,.62);
}
html.tema-rosa:not(#_) body {
  --nn-filete: linear-gradient(155deg, rgba(226,146,248,.50) 0%, rgba(255,255,255,.15) 22%, rgba(255,255,255,.07) 50%,
    rgba(255,255,255,.05) 78%, rgba(255,146,196,.42) 100%);
  --nn-filete-hi: linear-gradient(155deg, rgba(226,146,248,.72) 0%, rgba(255,255,255,.24) 26%, rgba(255,255,255,.12) 52%,
    rgba(255,255,255,.10) 76%, rgba(255,146,196,.62) 100%);
  --nn-filete-on: linear-gradient(155deg, rgba(230,160,250,.95) 0%, rgba(234,176,250,.62) 26%, rgba(255,255,255,.32) 50%,
    rgba(255,168,206,.62) 74%, rgba(255,160,202,.92) 100%);
  --nn-brillo: -4px -2px 18px -4px rgba(214,92,245,.62), 4px 2px 18px -4px rgba(255,95,168,.58);
  --nn-brillo-in: inset 4px 3px 12px -6px rgba(214,92,245,.55), inset -4px -3px 12px -6px rgba(255,95,168,.50);
  --nn-foco: -3px -2px 14px -6px rgba(214,92,245,.60), 3px 2px 14px -6px rgba(255,95,168,.55);
  --nn-raya: linear-gradient(90deg, #D65CF5, #FF5FA8);
  --nn-raya-brillo: 0 0 8px rgba(214,92,245,.45);
  --nn-guion-a: rgba(226,146,248,.62); --nn-guion-b: rgba(255,146,196,.58);
  --nn-guion-a-hi: rgba(230,160,250,.9); --nn-guion-b-hi: rgba(255,160,202,.88);
  --nn-borde-a: rgba(226,146,248,.42); --nn-borde-b: rgba(255,146,196,.36);
  --nn-borde-l: rgba(240,146,222,.39); --nn-linea-on: rgba(236,94,207,.85);
  --nn-lado: linear-gradient(180deg, rgba(226,146,248,.55), rgba(255,255,255,.12) 28%, rgba(255,255,255,.08) 72%, rgba(255,146,196,.48));
  --nn-canto-a: rgba(226,146,248,.50); --nn-canto-b: rgba(255,146,196,.42);
  --nn-canto-a-hi: rgba(226,146,248,.72); --nn-canto-b-hi: rgba(255,146,196,.62);
}
/* «Claro» sin color-mix: fondo claro. Como las tarjetas de «Claro» (css/ui/claro-frozen.css), el
   filete va encima de la línea blanca del vidrio (abajo, en el ::after): el medio, más blanco
   todavía (el borde de vidrio se ve nítido sobre el celeste). Lo elegido, el azul marino de la selección de «Claro» (se ve como
   antes, a 5:1) con el violeta y el azul de la marca en las puntas. */
html.tema-luz:not(#_) body {
  --nn-filete: linear-gradient(155deg, rgba(172,107,251,.72) 0%, rgba(255,255,255,.34) 22%, rgba(255,255,255,.28) 50%,
    rgba(255,255,255,.26) 78%, rgba(35,115,194,.85) 100%);
  --nn-filete-hi: linear-gradient(155deg, rgba(172,118,251,.84) 0%, rgba(255,255,255,.62) 26%, rgba(255,255,255,.56) 52%,
    rgba(255,255,255,.54) 76%, rgba(132,190,246,.80) 100%);
  --nn-filete-on: linear-gradient(155deg, rgb(129,74,224) 0%, rgb(63,67,159) 11%, rgb(23,63,120) 22%, rgb(23,63,120) 78%,
    rgb(27,80,144) 89%, rgb(39,130,216) 100%);
  --nn-v-n1: rgba(255,255,255,.70); --nn-v-n2: rgba(255,255,255,.62);
  --nn-borde-l: rgba(82,96,230,.32); --nn-linea-on: rgb(56,67,153);
  --nn-brillo: -4px -2px 16px -4px rgba(155,77,250,.42), 4px 2px 16px -4px rgba(43,147,240,.38);
  --nn-brillo-in: inset 4px 3px 12px -6px rgba(155,77,250,.32), inset -4px -3px 12px -6px rgba(43,147,240,.30);
  --nn-foco: -3px -2px 12px -6px rgba(155,77,250,.42), 3px 2px 12px -6px rgba(43,147,240,.40);
  --nn-raya: linear-gradient(90deg, #703AB4, #216BAD);   /* la marca oscurecida: a 3:1 o más sobre el celeste */
  --nn-raya-brillo: 0 0 6px rgba(155,77,250,.30);
  --nn-guion-a: rgba(134,64,236,.55); --nn-guion-b: rgba(30,128,224,.52);
  --nn-guion-a-hi: rgba(134,64,236,.85); --nn-guion-b-hi: rgba(30,128,224,.82);
  --nn-borde-a: rgba(134,64,236,.34); --nn-borde-b: rgba(30,128,224,.30);
  --nn-lado: linear-gradient(180deg, rgba(134,64,236,.45), rgba(11,13,17,.10) 28%, rgba(11,13,17,.08) 72%, rgba(30,128,224,.40));
  /* los cantos, con el blanco del vidrio mezclado (no hay línea blanca debajo: son el borde mismo) */
  --nn-canto-a: rgba(191,142,252,.87); --nn-canto-b: rgba(105,160,214,.88);
  --nn-canto-a-hi: rgba(174,111,251,.93); --nn-canto-b-hi: rgba(77,142,206,.93);
  --nn-canto-n: var(--frz-line, rgba(255,255,255,.70)); --nn-canto-n-hi: rgba(255,255,255,.92);   /* la línea blanca del vidrio */
}
/* Con color-mix: los mismos degradés armados con los tokens de la apariencia (--gize-r1 / --gize-r2),
   como el filete de las tarjetas. Uno para las oscuras («Oscuro», «Azul», «Rosa») y otro para «Claro». */
@supports (color: color-mix(in srgb, red, blue)) {
  html:not(.tema-luz):not(#_) body {
    --nn-filete: linear-gradient(155deg, color-mix(in srgb, var(--gize-r2) 42%, rgba(255,255,255,.14)) 0%, rgba(255,255,255,.15) 22%,
      rgba(255,255,255,.07) 50%, rgba(255,255,255,.05) 78%, color-mix(in srgb, var(--gize-r1) 34%, rgba(255,255,255,.12)) 100%);
    --nn-filete-hi: linear-gradient(155deg, color-mix(in srgb, var(--gize-r2) 64%, rgba(255,255,255,.22)) 0%, rgba(255,255,255,.24) 26%,
      rgba(255,255,255,.12) 52%, rgba(255,255,255,.10) 76%, color-mix(in srgb, var(--gize-r1) 56%, rgba(255,255,255,.18)) 100%);
    --nn-filete-on: linear-gradient(155deg, color-mix(in srgb, var(--gize-r2) 88%, rgba(255,255,255,.6)) 0%,
      color-mix(in srgb, var(--gize-r2) 52%, rgba(255,255,255,.3)) 26%, rgba(255,255,255,.32) 50%,
      color-mix(in srgb, var(--gize-r1) 52%, rgba(255,255,255,.3)) 74%, color-mix(in srgb, var(--gize-r1) 86%, rgba(255,255,255,.55)) 100%);
    --nn-brillo: -4px -2px 18px -4px color-mix(in srgb, var(--gize-r2) 62%, transparent), 4px 2px 18px -4px color-mix(in srgb, var(--gize-r1) 58%, transparent);
    --nn-brillo-in: inset 4px 3px 12px -6px color-mix(in srgb, var(--gize-r2) 55%, transparent), inset -4px -3px 12px -6px color-mix(in srgb, var(--gize-r1) 50%, transparent);
    --nn-foco: -3px -2px 14px -6px color-mix(in srgb, var(--gize-r2) 60%, transparent), 3px 2px 14px -6px color-mix(in srgb, var(--gize-r1) 55%, transparent);
    --nn-raya: linear-gradient(90deg, var(--gize-r2), var(--gize-r1));
    --nn-raya-brillo: 0 0 8px color-mix(in srgb, var(--gize-r2) 45%, transparent);
    --nn-guion-a: color-mix(in srgb, var(--gize-r2) 55%, rgba(255,255,255,.18)); --nn-guion-b: color-mix(in srgb, var(--gize-r1) 52%, rgba(255,255,255,.16));
    --nn-guion-a-hi: color-mix(in srgb, var(--gize-r2) 86%, rgba(255,255,255,.5)); --nn-guion-b-hi: color-mix(in srgb, var(--gize-r1) 84%, rgba(255,255,255,.5));
    --nn-borde-a: color-mix(in srgb, var(--gize-r2) 36%, rgba(255,255,255,.10)); --nn-borde-b: color-mix(in srgb, var(--gize-r1) 30%, rgba(255,255,255,.10));
    --nn-lado: linear-gradient(180deg, color-mix(in srgb, var(--gize-r2) 45%, rgba(255,255,255,.16)), rgba(255,255,255,.12) 28%,
      rgba(255,255,255,.08) 72%, color-mix(in srgb, var(--gize-r1) 40%, rgba(255,255,255,.12)));
    --nn-linea-on: color-mix(in srgb, color-mix(in srgb, var(--gize-r2) 50%, var(--gize-r1)) 85%, transparent);
    --nn-canto-a: color-mix(in srgb, var(--gize-r2) 42%, rgba(255,255,255,.14)); --nn-canto-b: color-mix(in srgb, var(--gize-r1) 34%, rgba(255,255,255,.12));
    --nn-canto-a-hi: color-mix(in srgb, var(--gize-r2) 64%, rgba(255,255,255,.22)); --nn-canto-b-hi: color-mix(in srgb, var(--gize-r1) 56%, rgba(255,255,255,.18));
  }
  html.tema-luz:not(#_) body {
    --nn-filete: linear-gradient(155deg, color-mix(in srgb, var(--gize-r2) 60%, rgba(255,255,255,.3)) 0%, rgba(255,255,255,.34) 22%,
      rgba(255,255,255,.28) 50%, rgba(255,255,255,.26) 78%, color-mix(in srgb, color-mix(in srgb, var(--gize-r1) 62%, var(--gize-blue)) 85%, transparent) 100%);
    --nn-filete-hi: linear-gradient(155deg, color-mix(in srgb, var(--gize-r2) 66%, rgba(255,255,255,.5)) 0%, rgba(255,255,255,.62) 26%,
      rgba(255,255,255,.56) 52%, rgba(255,255,255,.54) 76%, color-mix(in srgb, var(--gize-r1) 58%, rgba(255,255,255,.5)) 100%);
    --nn-filete-on: linear-gradient(155deg, color-mix(in srgb, var(--gize-r2) 80%, var(--gize-blue)) 0%,
      color-mix(in srgb, var(--gize-r2) 30%, var(--gize-blue)) 11%, var(--gize-blue) 22%, var(--gize-blue) 78%,
      color-mix(in srgb, var(--gize-r1) 20%, var(--gize-blue)) 89%, color-mix(in srgb, var(--gize-r1) 80%, var(--gize-blue)) 100%);
    --nn-brillo: -4px -2px 16px -4px color-mix(in srgb, var(--gize-r2) 42%, transparent), 4px 2px 16px -4px color-mix(in srgb, var(--gize-r1) 38%, transparent);
    --nn-brillo-in: inset 4px 3px 12px -6px color-mix(in srgb, var(--gize-r2) 32%, transparent), inset -4px -3px 12px -6px color-mix(in srgb, var(--gize-r1) 30%, transparent);
    --nn-foco: -3px -2px 12px -6px color-mix(in srgb, var(--gize-r2) 42%, transparent), 3px 2px 12px -6px color-mix(in srgb, var(--gize-r1) 40%, transparent);
    --nn-raya: linear-gradient(90deg, color-mix(in srgb, var(--gize-r2) 70%, #0B0D11), color-mix(in srgb, var(--gize-r1) 70%, #0B0D11));
    --nn-raya-brillo: 0 0 6px color-mix(in srgb, var(--gize-r2) 30%, transparent);
    --nn-guion-a: color-mix(in srgb, var(--gize-r2) 55%, rgba(11,13,17,.1)); --nn-guion-b: color-mix(in srgb, var(--gize-r1) 52%, rgba(11,13,17,.1));
    --nn-guion-a-hi: color-mix(in srgb, var(--gize-r2) 85%, rgba(11,13,17,.2)); --nn-guion-b-hi: color-mix(in srgb, var(--gize-r1) 82%, rgba(11,13,17,.2));
    --nn-borde-a: color-mix(in srgb, var(--gize-r2) 32%, rgba(11,13,17,.08)); --nn-borde-b: color-mix(in srgb, var(--gize-r1) 28%, rgba(11,13,17,.08));
    --nn-lado: linear-gradient(180deg, color-mix(in srgb, var(--gize-r2) 40%, rgba(11,13,17,.08)), rgba(11,13,17,.10) 28%,
      rgba(11,13,17,.08) 72%, color-mix(in srgb, var(--gize-r1) 36%, rgba(11,13,17,.08)));
    --nn-linea-on: color-mix(in srgb, var(--gize-r2) 25%, var(--gize-blue));
    --nn-canto-a: color-mix(in srgb, var(--gize-r2) 55%, rgba(255,255,255,.7));
    --nn-canto-b: color-mix(in srgb, color-mix(in srgb, var(--gize-r1) 62%, var(--gize-blue)) 60%, rgba(255,255,255,.7));
    --nn-canto-a-hi: color-mix(in srgb, var(--gize-r2) 75%, rgba(255,255,255,.7));
    --nn-canto-b-hi: color-mix(in srgb, color-mix(in srgb, var(--gize-r1) 62%, var(--gize-blue)) 75%, rgba(255,255,255,.7));
  }
  /* Liviano: la línea lisa de las ventanas, el promedio de las dos esquinas. */
  html:not(#_):not(#__) body { --nn-borde-l: color-mix(in srgb, var(--nn-borde-a) 50%, var(--nn-borde-b)); }
}
/* Neón apagado: el filete blanco y gris de las tarjetas sin neón (a 160°), sin resplandor; el
   punteado y las ventanas en gris. La rayita de la pestaña elegida queda azul (el azul de acción). */
html.sin-neon:not(.tema-luz):not(#_) body {
  --nn-filete: linear-gradient(160deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.15) 22%, rgba(255,255,255,.08) 55%,
    rgba(255,255,255,.06) 80%, rgba(255,255,255,.12) 100%);
  --nn-filete-hi: linear-gradient(160deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 26%, rgba(255,255,255,.13) 55%,
    rgba(255,255,255,.10) 80%, rgba(255,255,255,.20) 100%);
  --nn-filete-on: linear-gradient(160deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.48) 30%, rgba(255,255,255,.32) 58%,
    rgba(255,255,255,.44) 100%);
  --nn-brillo: 0 0 0 0 transparent; --nn-brillo-in: inset 0 0 0 0 transparent;
  --nn-foco: 0 0 0 3px rgba(255,255,255,.10);
  --nn-guion-a: rgba(255,255,255,.26); --nn-guion-b: rgba(255,255,255,.20);
  --nn-guion-a-hi: rgba(255,255,255,.5); --nn-guion-b-hi: rgba(255,255,255,.42);
}
/* «Claro» sin neón: el filete blanco del vidrio (como las tarjetas de «Claro» sin neón, blanco .72);
   lo elegido, un gris casi negro (a 4:1 o más sobre el celeste), sin color. */
html.sin-neon.tema-luz:not(#_) body {
  --nn-filete: linear-gradient(160deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.74) 22%, rgba(255,255,255,.70) 55%,
    rgba(255,255,255,.68) 80%, rgba(255,255,255,.74) 100%);
  --nn-filete-hi: linear-gradient(160deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.90) 26%, rgba(255,255,255,.86) 55%,
    rgba(255,255,255,.84) 80%, rgba(255,255,255,.90) 100%);
  --nn-filete-on: linear-gradient(160deg, rgba(11,13,17,.80) 0%, rgba(11,13,17,.66) 30%, rgba(11,13,17,.60) 58%,
    rgba(11,13,17,.68) 100%);
  --nn-brillo: 0 0 0 0 transparent; --nn-brillo-in: inset 0 0 0 0 transparent;
  --nn-foco: 0 0 0 3px rgba(11,13,17,.10);
  --nn-guion-a: rgba(11,13,17,.26); --nn-guion-b: rgba(11,13,17,.20);
  --nn-guion-a-hi: rgba(11,13,17,.5); --nn-guion-b-hi: rgba(11,13,17,.42);
}
/* Liviano y la app de Android: sin resplandores (y sin el filete con máscara: lo saca cada hoja). Con
   :not(#__) para ganarle a los tokens de arriba, que tienen más peso. */
html.lite:not(#_):not(#__) body, html.android-app:not(#_):not(#__) body {
  --nn-brillo: 0 0 0 0 transparent; --nn-brillo-in: inset 0 0 0 0 transparent; --nn-raya-brillo: 0 0 0 0 transparent;
  --nn-foco: 0 0 0 0 transparent; /* el campo con foco queda con su borde de foco, como antes */
}

/* ---------- 2) Lo elegido y la portada del día: el filete en el ::after ----------
   Solo lo elegido (el día, la categoría, el día de la semana, la variante, la opción del selector, la
   pestaña de la barra de abajo) y la portada del día: dos o tres por pantalla. El borde queda transparente y el ::after lo
   tapa con el filete (inset -1px: la caja del borde; la pestaña de la barra no tiene borde: 0).
   Liviano y la app de Android no lo llevan (sección 6). */
/* Los que estaban quietos (static) pasan a relative para alojar el ::after (su caja no cambia). */
html:not(.basico):not(#_):not(#__) body:not(.silk-coach):not(#_) :is(.ex-chip.on, .dd-chip.on, .var-pick.on, .sl-op.on) {
  position: relative;
}
html:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body:not(.silk-coach):not(#_) :is(.tabs .tab.active, .ex-chip.on, .dd-chip.on, .var-pick.on, .sl-op.on, .day-head) {
  border-color: transparent;
}
html:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body:not(.silk-coach):not(#_) :is(.tabs .tab.active, .ex-chip.on, .dd-chip.on, .var-pick.on, .sl-op.on, .day-head, .nav-item.active)::after {
  content: ""; display: block; position: absolute; top: var(--nn-b, -1px); right: var(--nn-b, -1px); bottom: var(--nn-b, -1px); left: var(--nn-b, -1px);
  border-radius: inherit; padding: var(--nn-w); pointer-events: none;
  background: var(--nn-f, var(--nn-filete-on));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask: linear-gradient(#000, #000) content-box exclude, linear-gradient(#000, #000);
}
/* La pestaña de la barra de abajo no tiene borde: el filete va justo en su contorno. */
html:not(.basico):not(#_):not(#__) body:not(.silk-coach):not(#_) .nav-item.active { --nn-b: 0px; }
/* La portada del día: un filete un poco más claro que el de las tarjetas (en el ::after mismo: puesto
   en la portada, lo heredarían «Limpiar» y los días de la semana que van adentro). En «Claro» el suyo
   iba en el ::before (css/ui/claro-frozen.css): lo reemplaza este, así no quedan dos. */
html:not(.basico):not(#_):not(#__) body:not(.silk-coach):not(#_) .day-head::after { --nn-f: var(--nn-filete-hi); }
html.tema-luz:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body:not(.silk-coach):not(#_) .day-head::before { content: none; }
/* «Claro» con neón: como sus tarjetas (css/ui/claro-frozen.css), el filete va encima de la línea
   blanca del vidrio; el gris solo casi no se veía sobre el celeste. */
html.tema-luz:not(.sin-neon):not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body:not(.silk-coach):not(#_) :is(.tabs .tab.active, .ex-chip.on, .dd-chip.on,
    .var-pick.on, .sl-op.on, .day-head, .nav-item.active)::after {
  background: var(--nn-f, var(--nn-filete-on)), linear-gradient(var(--frz-line), var(--frz-line));
}

/* ---------- 3) Lo elegido: el resplandor suave y quieto, en el ::before ----------
   Los días, las categorías, los días de la semana, la variante y la opción del selector elegidas
   están en una fila con scroll (o una lista que se desliza), que cortaría el de afuera en línea
   recta: ahí va por dentro, debajo del texto (z -1 en una caja aislada). El de los días pisa el brillo que seguía al mouse (apagado,
   css/ui/botones-rediseno.css): su lugar, su tamaño y su transición. */
html:not(.basico):not(#_):not(#__) body:not(.silk-coach):not(#_) :is(.tabs .tab.active, .ex-chip.on, .dd-chip.on, .var-pick.on, .sl-op.on) { isolation: isolate; }
html:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body:not(.silk-coach):not(#_) :is(.tabs .tab.active, .ex-chip.on, .dd-chip.on, .var-pick.on, .sl-op.on, .nav-item.active)::before {
  content: ""; display: block; position: absolute; top: var(--nn-b, -1px); right: var(--nn-b, -1px); bottom: var(--nn-b, -1px); left: var(--nn-b, -1px);
  width: auto; height: auto; margin: 0; border-radius: inherit; background: none; opacity: 1; transform: none;
  pointer-events: none; animation: none; transition: none;
  z-index: -1; box-shadow: var(--nn-brillo-in);
}
/* La pestaña elegida de la barra de abajo: la barra no recorta, el resplandor va por fuera. */
/* (con .navbar adelante: así pesa lo mismo que la regla de arriba, que con :is() toma el peso de
   .tabs .tab.active, y le gana por venir después) */
html:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body:not(.silk-coach):not(#_) .navbar .nav-item.active::before {
  z-index: auto; box-shadow: var(--nn-brillo);
}

/* ---------- 3b) Lo demás: los cantos de color, sin máscara ----------
   Los otros días, categorías y días de la semana, y todos los botones secundarios de la app (la misma
   familia de css/ui/botones-rediseno.css, la que está en la app: «Limpiar», «Ver rutinas armadas»,
   «+ Agregar ejercicio», «Iniciar descanso» y el tiempo de descanso de cada ejercicio, «Agregar con
   nombre propio», los botones de borde de las ventanas como «Cerrar» o «Cancelar», «+500 ml», la meta
   de agua, «Editar meta», «Cerrar sesión»; y los de las ventanas propias: «Cancelar» de confirmar() y
   pedir() y «Cerrar» del selector). Las filas de las listas (.ex-pick, .sl-op) no: son filas.
   Sin ::after ni máscara (se repiten de a muchos: dos por ejercicio abierto): todo en sombras de
   adentro, sin desenfoque, que no suman capas y se pintan como un borde. Una línea fina alrededor
   (--nn-canto-n, en el lugar del borde, que queda transparente) y encima dos medialunas que se afinan
   solas en las curvas: la violeta arriba a la izquierda y la azul abajo a la derecha, como las puntas
   del filete a 155°. El relleno no pasa por debajo del borde transparente (padding-box): el botón se
   ve con su borde nítido. Sin neón quedan grises, como siempre. */
html:not(.sin-neon):not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body:not(.silk-coach):not(#_) :is(.tabs .tab:not(.active), .ex-chip:not(.on),
    .dd-chip:not(.on), .clear, .load-def, .add-ex, .rest-btn-full, .rest-edit, .ex-custom, .qbtn, .cal-edit, .water-goal,
    .logout-btn:not(.cfg-danger), .ctrl.ghost:not(.sov-del), .av-sec, .sl-x) {
  border-color: transparent; background-clip: padding-box;
  box-shadow: var(--nn-cantos);
}
/* Al pasar el mouse, más claros. */
@media (hover: hover) {
  html:not(.sin-neon):not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body:not(.silk-coach):not(#_) :is(.tabs .tab:not(.active), .ex-chip:not(.on),
      .dd-chip:not(.on), .clear, .load-def, .add-ex, .rest-btn-full, .rest-edit, .ex-custom, .qbtn, .cal-edit, .water-goal,
      .logout-btn:not(.cfg-danger), .ctrl.ghost:not(.sov-del), .av-sec, .sl-x):hover {
    box-shadow: var(--nn-cantos-hi);
  }
}

/* ---------- 4) Punteado de neón: «+ Serie» y el «+» entre ejercicios ---------- */
html:not(.basico):not(#_):not(#__) body:not(.silk-coach):not(#_) :is(.add-set, .ins-ex) {
  border-color: var(--nn-guion-a) var(--nn-guion-b) var(--nn-guion-b) var(--nn-guion-a);
}
@media (hover: hover) {
  html:not(.basico):not(#_):not(#__) body:not(.silk-coach):not(#_) :is(.add-set, .ins-ex):hover {
    border-color: var(--nn-guion-a-hi) var(--nn-guion-b-hi) var(--nn-guion-b-hi) var(--nn-guion-a-hi);
  }
}

/* ---------- 5) Campos con foco: el aro azul de siempre y el resplandor de la marca ----------
   El aro va arriba (primera sombra) y el resplandor debajo. En las apariencias oscuras los campos del
   login (css/ui/estetica-login.css) tienen su aro propio. */
html:not(.basico):not(#_):not(#__) body:not(.silk-coach):not(#_) :is(.field input, .form-input:not(.rq-neon), .hb-add input, .ex-search,
    .cal-search input, .sheet-input, .ch-input):focus {
  box-shadow: var(--focus-ring), var(--nn-foco);
}
html:not(.tema-claro):not(.tema-luz):not(.basico):not(#_):not(#__) body:not(.silk-coach):not(#_) :is(.field input, .form-input:not(.rq-neon)):focus {
  box-shadow: var(--login-ring), var(--nn-foco);
}
/* El campo de las preguntas propias (pedir(), app/ui/avisos.js) marca el foco con su contorno (outline):
   lo conserva y suma solo el resplandor. */
html:not(.basico):not(#_):not(#__) body:not(.silk-coach):not(#_) .av-in:focus { box-shadow: var(--nn-foco); }

/* ---------- 6) Liviano y la app de Android: líneas lisas ----------
   Sin el ::after con máscara, el ::before del resplandor ni los cantos (arriba quedan afuera): los
   botones con su borde de siempre. Lo elegido, una línea lisa con el tono de la marca (sin neón, la de
   siempre); la pestaña de la barra no tiene borde: la línea va por dentro, en una sombra sin
   desenfoque. En «Claro» no: lo elegido ya es una pastilla negra (una línea azul marino encima casi no
   se ve) y la de la barra perdería la sombra que la levanta. */
html:is(.lite, .android-app):not(.sin-neon):not(.tema-luz):not(.basico):not(#_):not(#__) body:not(.silk-coach):not(#_) :is(.tabs .tab.active, .ex-chip.on, .dd-chip.on, .var-pick.on, .sl-op.on) {
  border-color: var(--nn-linea-on);
}
html:is(.lite, .android-app):not(.sin-neon):not(.tema-luz):not(.basico):not(#_):not(#__) body:not(.silk-coach):not(#_) .nav-item.active {
  box-shadow: inset 0 0 0 1px var(--nn-linea-on);
}

/* ---------- 7) Reducir movimiento, colores forzados ---------- */
/* Nada de esto se anima: el resplandor del foco aparece de una. */
@media (prefers-reduced-motion: reduce) {
  html:not(#_):not(#__) body:not(.silk-coach):not(#_) :is(.field input, .form-input, .hb-add input, .ex-search, .cal-search input, .sheet-input, .ch-input) {
    transition: none;
  }
}
/* Colores forzados (contraste alto): el navegador ya saca los degradés y las sombras y pinta los
   bordes con el color del sistema (también los transparentes); acá se sacan las cajas vacías del
   filete y del resplandor. */
@media (forced-colors: active) {
  html:not(#_):not(#__):not(#___) body:not(.silk-coach):not(#_) :is(.tabs .tab.active, .ex-chip.on, .dd-chip.on, .var-pick.on, .sl-op.on, .day-head, .nav-item.active)::after,
  html:not(#_):not(#__):not(#___) body:not(.silk-coach):not(#_) :is(.tabs .tab.active, .ex-chip.on, .dd-chip.on, .var-pick.on, .sl-op.on, .nav-item.active)::before {
    content: none;
  }
}