/* css/screens/coach/neon.css — panel del coach: el filete de neón en casi todo.
   ---------------------------------------------------------------------------------------------
   Pedido: «agrégale neón a los días, a casi todo: al programar rutina nueva, al panel de la
   izquierda». Es el mismo filete de las tarjetas de vidrio (css/screens/coach/vidrio.css): una
   línea fina en degradé a 155° con el toque de color de la marca en las puntas (--gize-r2 arriba a
   la izquierda, --gize-r1 abajo a la derecha) y casi blanca en el medio. Ahora lo llevan también:
   - la barra lateral (compu) y el elegido de la navegación; la píldora de abajo (celular) y su
     elegido; las pestañas de los días (todas un filete tenue, la elegida uno claro y un resplandor
     suave); «+ Programar una rutina nueva»; el «+» de agregar día y «+ Agregar ejercicio» del final
     (punteado de neón); la rayita de la pestaña elegida de la ficha (Ficha / Rutina /
     Estadísticas / Plan) en degradé; los selectores y las fichas elegidas (Reps / Tiempo, Tema,
     las secciones de Configuración, los días de una rutina en Rutinas y la rutina elegida, los
     días de «Asignar rutina»); los días de «Se repite»; las fichas del panel lateral de Clientes;
     los campos con foco; los menús ⋯ y las ventanas; los botones secundarios. Las tarjetas (las
     estadísticas de Inicio, la del panel lateral) ya lo tenían; adentro del panel lateral, las
     fichas (Entrenos, Check-ins, Peso, la rutina) pasan del borde gris al filete tenue y la de
     Chat, la única que se toca, al más claro. En «Azul», «Rosa» y «Claro» lo suma el cartel del
     plan, y la barra de la izquierda, en la línea de su borde. Los botones principales (blancos)
     quedan como están.
   - Un solo grosor (--nn-w, el de las tarjetas). Quieto: tenue en reposo, más claro al pasar el
     mouse y claro en lo elegido. Solo lo elegido suma un resplandor suave (sombra, nunca animada).
   Cómo se dibuja, sin mover nada (mismo tamaño y lugar con y sin esta hoja):
   - El filete va en un ::after con máscara (como las tarjetas) que tapa el borde de 1 px
     (inset -1px): el borde queda transparente y en su lugar se ve el filete. A los que estaban
     en position: static se les pone relative (no cambia su caja). Sin z-index: no se sale de su
     caja ni tapa a nadie. Las pestañas de los días y los días de «Asignar rutina» recortaban lo de
     adentro (overflow: hidden): ahora no, así el filete y el resplandor se ven enteros.
   - El resplandor de lo elegido va en el ::before (una sombra hacia afuera de una caja vacía): así
     no pisa las sombras que ya tiene cada botón en cada apariencia. Adentro de una fila con scroll
     propio (que lo cortaría en línea recta) va por dentro, debajo del texto.
   - Las ventanas (.cp-modal, .cp-ccard) tienen scroll propio: un ::after se iría con el contenido.
     Ahí el filete va en capas de fondo (no se mueven al deslizar): cuatro tiras finas y un arco
     en cada esquina, con el mismo degradé (violeta arriba a la izquierda, azul abajo a la derecha).
   - Los campos no tienen ::after: con foco conservan su borde azul de siempre y suman el
     resplandor de la marca alrededor (el foco se ve más, no menos).
   - El punteado (agregar día, «+ Agregar ejercicio») toma el color de cada lado.
   Apariencias: los colores salen de los tokens de cada una (--gize-r1 / --gize-r2): en «Azul»,
   «Rosa» y «Claro» el filete es el de su gama. En «Claro» va encima de la línea blanca del vidrio,
   como sus tarjetas, y lo elegido es el azul marino de su selección con la marca en las puntas; la
   rayita de la ficha, la marca oscurecida (3:1 o más sobre el celeste). Sin color-mix()
   (iOS 15) quedan los mismos colores escritos a mano. Neón apagado (html.sin-neon): el filete
   blanco y gris de las tarjetas sin neón (a 160°: coach-bateria-neon pide que no quede ninguno a
   155°; en «Claro», el blanco del vidrio) y sin resplandor. Liviano y la app de Android: líneas
   lisas (sin máscaras ni resplandor; lo elegido, con el tono de la marca). GIZE básico: nada de esto
   (quedan los bordes lisos de siempre). Colores forzados: sin filete, sin resplandor y sin la línea
   en degradé de la barra (quedan los bordes del sistema). «Reducir movimiento»: nada de esto se
   anima.
   Alcance: solo el panel del coach (body.silk-coach). La app del alumno no cambia con esta hoja
   (tests/coach-neon-todo.test.mjs): lo suyo va en css/ui/neon-app.css, con los mismos tokens. Las
   reglas llevan :not(#_) en html y body, como css/screens/coach/vidrio.css, para ganarle a las
   capas de botones, de vidrio y de cada apariencia sin depender del orden; los estados que esas
   capas marcan con el borde (el ⋯ abierto o con el mouse encima) se respetan. Sin CSS anidado
   (css-sin-anidar). */

/* ---------- 1) Tokens ----------
   Los colores, el grosor y los resplandores (--nn-*) están en css/ui/neon-app.css, en el body:
   los comparte la app del alumno, que lleva un poco de este mismo neón. */

/* ---------- 2) El filete en el ::after ----------
   Todo lo que lleva filete: las pestañas de los días, los días de «Se repite», los botones
   secundarios, las fichas, los selectores y la navegación elegida. El borde queda transparente y el
   ::after lo tapa con el filete (inset -1px: la caja del borde; los que no tienen borde, 0).
   Liviano y la app de Android no lo llevan (sección 10): una máscara por botón cuesta al deslizar en
   un celular modesto; ahí queda el borde liso de siempre. */
/* Los que estaban quietos (static) pasan a relative para alojar el ::after (su caja no cambia). */
html:not(.basico):not(#_):not(#__) body.silk-coach:not(#_) :is(.co-copy-btn, .hd-day, .hd-all, .cv-tile, .cv-peek-rt, .cv-x,
    .co-ss-split, .co-seg, .co-seg-opt.on, .cp-cat, .cp-copt, :is(.cv-card, .cp-ccard, .cp-modal) .logout-btn:not(.cfg-danger), .cv-pill,
    .ap-day, .ap-radio, .cs-nav-i.on, .cv-util-i.on, .cm-day-b.on, .co-day-menu:not(.co-exc-menu2) > summary) {
  position: relative;
}
/* Las pestañas de los días y los días de «Asignar rutina» recortaban lo de adentro (overflow: hidden,
   de la familia de cajas del coach en css/ui/theme.css): el filete, que va sobre el borde, y el
   resplandor de afuera quedaban cortados. Sin recorte (su contenido no se sale: las pestañas no
   cortan renglón y el nombre del día parte las palabras largas). */
html:not(.basico):not(#_):not(#__) body.silk-coach:not(#_) :is(.co-daytab:not(.co-day-ghost), .ap-day) { overflow: visible; }
html:not(.basico):not(#_):not(#__) body.silk-coach:not(#_) .ap-day .ap-dname { overflow-wrap: anywhere; }
html:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body.silk-coach:not(#_) :is(.co-daytab:not(.add):not(.co-day-ghost), .co-copy-btn, .hd-day, .hd-all,
    .cv-tile, .cv-peek-rt, .cv-x, .co-ss-split, .co-seg, .cp-cat, .cp-copt, :is(.cv-card, .cp-ccard, .cp-modal) .logout-btn:not(.cfg-danger),
    .cv-pill, .ap-day, .ap-radio, .cv-nav-i.on, .cs-nav-i.on, .cv-util-i.on, .co-day-pop, .co-day-menu:not(.co-exc-menu2):not([open]) > summary:not(:hover)) {
  border-color: transparent;
}
html:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body.silk-coach:not(#_) :is(.co-daytab:not(.add):not(.co-day-ghost), .co-copy-btn, .hd-day, .hd-all,
    .cv-tile, .cv-peek-rt, .cv-x, .co-ss-split, .co-seg, .co-seg-opt.on, .cp-cat, .cp-copt, :is(.cv-card, .cp-ccard, .cp-modal) .logout-btn:not(.cfg-danger),
    .cv-pill, .ap-day, .ap-radio, .cv-nav-i.on, .cs-nav-i.on, .cv-util-i.on, .cm-day-b.on, .co-day-menu:not(.co-exc-menu2) > summary, .co-day-pop)::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));
  -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);
}
/* Sin borde propio: el filete va justo en el contorno. */
html:not(.basico):not(#_):not(#__) body.silk-coach:not(#_) :is(.co-seg-opt.on, .cm-day-b.on) { --nn-b: 0px; }
@media (max-width: 899px) {
  html:not(.basico):not(#_):not(#__) body.silk-coach:not(#_) .cv-nav-i.on { --nn-b: 0px; }
}
/* La ficha de Chat del panel lateral (la única que se toca): el filete más claro, así se lee como
   botón entre las otras fichas (Entrenos, Check-ins, Peso), que llevan el tenue. */
html:not(.basico):not(#_):not(#__) body.silk-coach:not(#_) button.cv-tile { --nn-f: var(--nn-filete-hi); }

/* ---------- 3) Al pasar el mouse y lo elegido ---------- */
@media (hover: hover) {
  html:not(.basico):not(#_):not(#__) body.silk-coach:not(#_) :is(.co-daytab:not(.on):not(.add), .co-copy-btn, .hd-day:not(.on), .hd-all:not(.on), .cv-x,
      .co-ss-split, .cp-cat, .cp-copt:not(.on), :is(.cv-card, .cp-ccard, .cp-modal) .logout-btn:not(.cfg-danger), .cv-pill:not(.on), .ap-day:not(.on),
      .ap-radio:not(.on)):hover {
    --nn-f: var(--nn-filete-hi);
  }
  html:not(.basico):not(#_):not(#__) body.silk-coach:not(#_) button.cv-tile:hover { --nn-f: var(--nn-filete-on); }
}
/* El ⋯ abierto o con el mouse encima: se ve su borde azul de siempre (rutinas.css, vidrio.css), sin
   el filete encima. */
html:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body.silk-coach:not(#_) :is(.co-day-menu:not(.co-exc-menu2)[open] > summary, .co-day-menu:not(.co-exc-menu2) > summary:hover)::after {
  content: none;
}
/* Lo elegido: el filete claro. */
html:not(.basico):not(#_):not(#__) body.silk-coach:not(#_) :is(.co-daytab.on, .hd-day.on, .hd-all.on, .cv-nav-i.on, .cv-util-i.on, .co-seg-opt.on, .cp-copt.on,
    .cv-pill.on, .ap-day.on, .ap-radio.on, .cs-nav-i.on, .cm-day-b.on) {
  --nn-f: var(--nn-filete-on);
}
/* La rutina elegida en Rutinas (una tarjeta): su propio filete, el claro, en vez del contorno azul
   (con foco de teclado, el contorno de siempre). */
html:not(.sin-neon):not(.basico):not(#_):not(#__) body.silk-coach:not(#_) .cv-tpl.on:not(:focus-visible) {
  outline-color: transparent; --cg-ring: var(--nn-filete-on); --gize-rgb-ring: var(--nn-filete-on);
}
/* …y un resplandor suave alrededor, quieto, en el ::before (una caja vacía del tamaño del botón: la
   sombra queda afuera y no pisa las que ya tiene cada uno). */
html:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body.silk-coach:not(#_) :is(.co-daytab.on:not(.co-day-ghost), .hd-day.on, .hd-all.on, .cv-nav-i.on, .cv-util-i.on, .co-seg-opt.on,
    .cp-copt.on, .cv-pill.on, .ap-day.on, .ap-radio.on, .cs-nav-i.on, .cm-day-b.on)::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);
  border-radius: inherit; background: none; pointer-events: none; animation: none; transition: none;
  box-shadow: var(--nn-brillo);
}
/* Lo que está adentro de una fila con scroll propio (las pestañas de los días en el celular, los días
   de una rutina en Rutinas, los de «Asignar rutina», las secciones de Configuración en el celular): la
   fila recortaría el resplandor de afuera en línea recta. Ahí va por dentro, debajo del texto
   (z -1 en una caja aislada). */
html:not(.basico):not(#_):not(#__) body.silk-coach:not(#_) :is(.co-daytab.on, .cv-pill.on, .ap-day.on) { isolation: isolate; }
html:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body.silk-coach:not(#_) :is(.co-daytab.on:not(.co-day-ghost), .cv-pill.on, .ap-day.on)::before {
  z-index: -1; box-shadow: var(--nn-brillo-in);
}
@media (max-width: 819px) {
  html:not(.basico):not(#_):not(#__) body.silk-coach:not(#_) .cs-nav-i.on { isolation: isolate; }
  /* (con .cs-nav adelante: así pesa más que la regla general del resplandor de afuera) */
  html:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body.silk-coach:not(#_) .cs-nav .cs-nav-i.on::before { z-index: -1; box-shadow: var(--nn-brillo-in); }
}
/* En la compu (mouse) las pestañas de los días van en varias filas, sin scroll: resplandor de afuera. */
@media (hover: hover) and (pointer: fine) {
  html:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body.silk-coach:not(#_) .co-daytab.on:not(.co-day-ghost)::before { z-index: auto; box-shadow: var(--nn-brillo); }
}

/* ---------- 4) Navegación: la barra lateral (compu) y la píldora de abajo (celular) ---------- */
/* Compu, «Oscuro»: el panel de vidrio de la barra lateral ya tiene su filete en el ::after
   (vidrio.css): pasa a ser el de neón, con el grosor de los demás (vidrio.css le daba 1 px). */
@media (min-width: 900px) {
  html:not(.tema-claro):not(.tema-luz):not(.basico):not(#_):not(#__) body.silk-coach:not(#_) .cv-side::after { background: var(--nn-filete); padding: var(--nn-w); }
  /* «Azul», «Rosa» y «Claro»: la barra es una columna con una línea a la derecha; la línea pasa a ser
     un degradé vertical con el toque de color arriba y abajo (border-image: solo se pinta donde hay
     borde, a la derecha, y no cambia su ancho). */
  html.tema-claro:not(.basico):not(.sin-neon):not(#_):not(#__) body.silk-coach:not(#_) .cv-side,
  html.tema-luz:not(.basico):not(.sin-neon):not(#_):not(#__) body.silk-coach:not(#_) .cv-side {
    border-image: var(--nn-lado) 1;
  }
}
/* El cartel del plan («Plan cortesía · 8/30 clientes»): en «Oscuro» ya es vidrio con filete; en
   «Azul», «Rosa» y «Claro» era el único sin el filete de las tarjetas. */
html:is(.tema-claro, .tema-luz):not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body.silk-coach:not(#_) .pl-banner:not(.warn) { position: relative; border-color: transparent; }
html:is(.tema-claro, .tema-luz):not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body.silk-coach:not(#_) .pl-banner:not(.warn)::after {
  content: ""; display: block; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; border-radius: inherit; padding: var(--nn-w);
  pointer-events: none; background: var(--nn-filete);
  -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);
}
/* Celular: la píldora de abajo, con el filete en su ::after (vidrio.css no lo usa). */
@media (max-width: 899px) {
  html:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body.silk-coach:not(#_) .cv-nav { border-color: transparent; }
  html:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body.silk-coach:not(#_) .cv-nav::after {
    content: ""; display: block; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; border-radius: inherit; padding: var(--nn-w);
    pointer-events: none; background: var(--nn-filete);
    -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 franja de arriba (Preguntas, Configuración, Salir): fichas con filete. */
  html:not(.basico):not(#_):not(#__) body.silk-coach:not(#_) .cv-util-i { position: relative; }
  html:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body.silk-coach:not(#_) .cv-util-i { border-color: transparent; }
  html:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body.silk-coach:not(#_) .cv-util-i::after {
    content: ""; display: block; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; border-radius: inherit; padding: var(--nn-w);
    pointer-events: none; background: var(--nn-f, var(--nn-filete));
    -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);
  }
}
/* Configuración en el celular (hasta 819 px, como vidrio.css): las secciones son fichas en fila. */
@media (max-width: 819px) {
  html:not(.basico):not(#_):not(#__) body.silk-coach:not(#_) .cs-nav-i:not(.on) { position: relative; }
  html:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body.silk-coach:not(#_) .cs-nav-i:not(.on) { border-color: transparent; }
  html:not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body.silk-coach:not(#_) .cs-nav-i:not(.on)::after {
    content: ""; display: block; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; border-radius: inherit; padding: var(--nn-w);
    pointer-events: none; background: var(--nn-filete);
    -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);
  }
}
/* «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.silk-coach:not(#_) :is(.co-daytab:not(.add):not(.co-day-ghost), .co-copy-btn,
    .hd-day, .hd-all, .cv-tile, .cv-peek-rt, .cv-x, .co-ss-split, .co-seg, .co-seg-opt.on, .cp-cat, .cp-copt,
    :is(.cv-card, .cp-ccard, .cp-modal) .logout-btn:not(.cfg-danger), .cv-pill, .ap-day, .ap-radio, .cv-nav-i.on, .cs-nav-i, .cv-util-i, .cm-day-b.on,
    .co-day-menu:not(.co-exc-menu2) > summary, .co-day-pop, .cv-nav, .pl-banner:not(.warn))::after {
  background: var(--nn-f, var(--nn-filete)), linear-gradient(var(--frz-line), var(--frz-line));
}

/* ---------- 5) Pestañas de la ficha: la rayita de la elegida en degradé ---------- */
html:not(.sin-neon):not(.basico):not(#_):not(#__) body.silk-coach:not(#_) .cv-ctab.on::after {
  background: var(--nn-raya); box-shadow: var(--nn-raya-brillo);
}

/* ---------- 6) Punteado de neón: agregar día y «+ Agregar ejercicio» del final ---------- */
html:not(.basico):not(#_):not(#__) body.silk-coach:not(#_) :is(.co-daytab.add, .co-rt-add-end, .co-add-day) {
  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.silk-coach:not(#_) :is(.co-daytab.add, .co-rt-add-end, .co-add-day):hover {
    border-color: var(--nn-guion-a-hi) var(--nn-guion-b-hi) var(--nn-guion-b-hi) var(--nn-guion-a-hi);
  }
}

/* ---------- 7) Ventanas: el filete en el fondo (tienen scroll propio) ----------
   Un ::after se iría con el contenido al deslizar; las capas de fondo no (quedan en la caja). El
   borde queda transparente y encima del relleno de cada apariencia van las cuatro tiras y los arcos
   de --nn-ventana: el mismo degradé de las tarjetas, sin cortes en las esquinas. El relleno es el de
   siempre de cada una (vidrio.css, tema-claro.css, claro-frozen.css). */
/* Las capas: cuatro tiras de --nn-w en los lados y un arco en cada esquina (del radio de la ventana,
   --nn-vr), con los colores del degradé de las tarjetas (violeta arriba a la izquierda, azul abajo a
   la derecha, neutro en las otras dos). Se arman en la ventana misma, con su radio. */
html:not(#_) body.silk-coach :is(.cp-modal, .cp-ccard) {
  --nn-vr: var(--r-md, 12px);
  --nn-ventana:
    radial-gradient(circle at 100% 100%, transparent calc(var(--nn-vr) - var(--nn-w) - .5px), var(--nn-borde-a) calc(var(--nn-vr) - var(--nn-w) + .25px)) 0 0 / var(--nn-vr) var(--nn-vr) no-repeat border-box,
    radial-gradient(circle at 0 100%, transparent calc(var(--nn-vr) - var(--nn-w) - .5px), var(--nn-v-n1) calc(var(--nn-vr) - var(--nn-w) + .25px)) 100% 0 / var(--nn-vr) var(--nn-vr) no-repeat border-box,
    radial-gradient(circle at 0 0, transparent calc(var(--nn-vr) - var(--nn-w) - .5px), var(--nn-borde-b) calc(var(--nn-vr) - var(--nn-w) + .25px)) 100% 100% / var(--nn-vr) var(--nn-vr) no-repeat border-box,
    radial-gradient(circle at 100% 0, transparent calc(var(--nn-vr) - var(--nn-w) - .5px), var(--nn-v-n2) calc(var(--nn-vr) - var(--nn-w) + .25px)) 0 100% / var(--nn-vr) var(--nn-vr) no-repeat border-box,
    linear-gradient(90deg, var(--nn-borde-a), var(--nn-v-n1) 45%) var(--nn-vr) 0 / calc(100% - 2 * var(--nn-vr)) var(--nn-w) no-repeat border-box,
    linear-gradient(180deg, var(--nn-v-n1), var(--nn-v-n1) 35%, var(--nn-borde-b)) 100% var(--nn-vr) / var(--nn-w) calc(100% - 2 * var(--nn-vr)) no-repeat border-box,
    linear-gradient(90deg, var(--nn-v-n2), var(--nn-v-n2) 35%, var(--nn-borde-b)) var(--nn-vr) 100% / calc(100% - 2 * var(--nn-vr)) var(--nn-w) no-repeat border-box,
    linear-gradient(180deg, var(--nn-borde-a), var(--nn-v-n2) 55%) 0 var(--nn-vr) / var(--nn-w) calc(100% - 2 * var(--nn-vr)) no-repeat border-box;
}
html:not(#_) body.silk-coach .cp-modal { --nn-vr: 6px; }
html:not(.sin-neon):not(.basico):not(.lite):not(.android-app):not(.tema-claro):not(.tema-luz):not(#_):not(#__) body.silk-coach:not(#_) :is(.cp-modal, .cp-ccard) {
  border-color: transparent;
  background: var(--nn-ventana), var(--cg-sheen), linear-gradient(var(--cg-pop), var(--cg-pop));
}
html.tema-claro:not(.sin-neon):not(.basico):not(.lite):not(.android-app):not(#_):not(#__) body.silk-coach:not(#_) :is(.cp-modal, .cp-ccard) {
  border-color: transparent;
  background: var(--nn-ventana), var(--gize-glass-sheet);
}
/* (en «Claro», con un :not(#___) más: claro-frozen.css pinta las ventanas con un #streakHost en la lista) */
html.tema-luz:not(.sin-neon):not(.basico):not(.lite):not(.android-app):not(#_):not(#__):not(#___) body.silk-coach:not(#_) :is(.cp-modal, .cp-ccard) {
  border-color: transparent;
  background: var(--nn-ventana), var(--frz-glass-solid);
}

/* ---------- 8) Campos con foco: el borde azul de siempre y el resplandor de la marca ---------- */
html:not(.basico):not(#_):not(#__) body.silk-coach:not(#_) :is(.co-note, .co-search, .co-dayname, .ml-in, .opt-body, .co-target, .co-pin, .cp-search, .co-exc-name):focus {
  box-shadow: var(--nn-foco);
}

/* ---------- 9) Reducir movimiento, colores forzados ---------- */
/* Nada de esto se anima: las sombras del resplandor y del foco aparecen de una. */
@media (prefers-reduced-motion: reduce) {
  html:not(#_):not(#__) body.silk-coach:not(#_) :is(.co-note, .co-search, .co-dayname, .ml-in, .opt-body, .co-target, .co-pin, .cp-search, .co-exc-name) {
    transition: none;
  }
}
/* Colores forzados (contraste alto): el navegador ya saca los degradés de fondo 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 la línea en degradé de la barra (border-image no lo saca el navegador: taparía el
   borde del sistema). */
@media (forced-colors: active) {
  html:not(#_):not(#__):not(#___) body.silk-coach:not(#_) :is(.co-daytab, .co-copy-btn, .hd-day, .hd-all, .cv-tile, .cv-peek-rt, .cv-x, .co-ss-split, .co-seg, .co-seg-opt, .cp-cat,
      .cp-copt, .logout-btn, .cv-pill, .ap-day, .ap-radio, .cv-nav-i, .cs-nav-i, .cm-day-b, .co-day-menu > summary, .co-day-pop, .cv-nav, .cv-util-i, .pl-banner)::after {
    content: none;
  }
  html:not(#_):not(#__):not(#___) body.silk-coach:not(#_) .cv-side { border-image: none; }
}

/* ---------- 10) Liviano y la app de Android: líneas lisas ----------
   Sin el ::after con máscara ni el ::before del resplandor (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);
   las ventanas, una línea lisa (el promedio de las dos esquinas). El punteado, la rayita de la
   ficha y la barra lateral son colores de borde o de fondo: quedan. */
html:is(.lite, .android-app):not(.sin-neon):not(.basico):not(#_):not(#__) body.silk-coach:not(#_) :is(.co-daytab.on:not(.co-day-ghost), .hd-day.on, .hd-all.on,
    .cv-nav-i.on, .cv-util-i.on, .cp-copt.on, .cv-pill.on, .ap-day.on, .ap-radio.on, .cs-nav-i.on) {
  border-color: var(--nn-linea-on);
}
html:is(.lite, .android-app):not(.sin-neon):not(.basico):not(#_):not(#__):not(#___) body.silk-coach:not(#_) :is(.cp-modal, .cp-ccard) {
  border-color: var(--nn-borde-l);
}