/* ============================================================
   figuras.css — las visualizaciones interactivas (js/viz/)

   Las comparten la versión clásica y la de Duna: solo usa los tokens que
   existen en las dos (--violeta, --lavanda, --crema*, --azul*, --alerta,
   --linea*, --f-*). Cada figura es una «Nota de estudio · Visualización»:
   hereda el azul de .b-estudio y dentro lleva un lienzo oscuro.

   Cada color tiene UN papel dentro de las figuras:
     crema     el objeto que se estudia (la función f, la curva, el conjunto)
     violeta   lo que se calcula con él (promedios, f*, f*K, la poligonal)
     lavanda   lo que el lector mueve (asas, cursor, el paso actual)
     azul      conjuntos y medidas (la ventana I, {f*>α}, cubrimientos)
     alerta    lo que falla (error, contraejemplo, divergencia)
   ============================================================ */

.b-fig { --fg-fondo: #0c0912; margin: 0; }   /* <figure> trae márgenes laterales del navegador */
.b-estudio.tono-visual { border-left-style: solid; border-left-width: 3px; }
.b-fig .b-estudio-tit { margin-bottom: 10px; }

.fg-escena { min-height: 300px; }
.fg-espera { margin: 0; font-family: var(--f-mono); font-size: 12px; color: var(--crema-3); }

.b-fig-pie { margin-top: 14px; font-size: 15px; color: var(--crema-2); }
.b-fig-pie p { margin: 0 0 .6em; }
.b-fig-pie p:last-child { margin-bottom: 0; }
.b-fig-pie strong { color: var(--crema); font-weight: 600; }
.b-fig-pie a.xref { color: var(--azul-claro); border-bottom-color: rgba(142, 199, 234, .45); }

/* El chip que lleva a una visualización desde la cabecera de la parte (versión clásica). */
.chip-fig { border-color: var(--azul); color: var(--azul-claro); }
.chip-fig::before { content: '◔'; margin-right: 6px; opacity: .85; }
.chip-fig:hover { background: var(--azul); color: var(--crema); }
.cab-figs { margin-top: 10px; padding-top: 0; border-top: 0; }

/* ---------------------------------------------------------------- lienzo */

.fg-lienzo { background: var(--fg-fondo); border: 1px solid var(--linea-suave); }
.fg-svg {
  display: block; width: 100%; height: auto;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.fg-svg.fg-arrastrable { cursor: crosshair; }
.fg-svg.fg-arrastrando { cursor: grabbing; }

.fg-svg text {
  font-family: var(--f-texto);
  fill: var(--crema-2);
  paint-order: stroke; stroke: var(--fg-fondo); stroke-width: 3px; stroke-linejoin: round;
}
.fg-svg .fg-t  { font-size: 12.5px; fill: var(--crema-2); }
.fg-svg .fg-tb { font-size: 12.5px; fill: var(--crema); font-weight: 600; }
.fg-svg .fg-tk { font-family: var(--f-mono); font-size: 10.5px; fill: var(--crema-3); stroke-width: 2px; }
.fg-svg .fg-ti { font-size: 14px; font-style: italic; fill: var(--crema); }
.fg-svg .fg-tv { font-size: 12.5px; fill: var(--lavanda); }
.fg-svg .fg-tx { font-size: 12.5px; fill: var(--alerta); }
.fg-svg .fg-ta { font-size: 12.5px; fill: var(--azul-claro); }
.fg-svg .fg-sub { font-size: .72em; }

/* ejes, rejilla y guías */
.fg-svg .fg-eje { stroke: var(--crema-3); stroke-width: 1; fill: none; }
.fg-svg .fg-eje-fino { stroke: var(--crema-3); stroke-width: 1; stroke-dasharray: 2 3; opacity: .75; }
.fg-svg .fg-rej { stroke: var(--crema); stroke-opacity: .07; stroke-width: 1; }
.fg-svg .fg-g { stroke: var(--crema-3); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
.fg-svg .fg-gv { stroke: var(--violeta); stroke-width: 1.2; stroke-dasharray: 4 4; fill: none; }
.fg-svg .fg-ga { stroke: var(--azul-claro); stroke-width: 1.2; stroke-dasharray: 4 4; fill: none; }
.fg-svg .fg-rayo { stroke: var(--lavanda); stroke-width: 1; opacity: .42; fill: none; }
.fg-svg .fg-gl { stroke: var(--lavanda); stroke-width: 1.4; stroke-dasharray: 5 4; fill: none; }

/* trazos: uno por papel */
.fg-svg .fg-c1, .fg-svg .fg-c2, .fg-svg .fg-c3, .fg-svg .fg-c4, .fg-svg .fg-c5 {
  fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
}
.fg-svg .fg-c1 { stroke: var(--crema); }
.fg-svg .fg-c2 { stroke: var(--violeta); stroke-width: 2.4; }
.fg-svg .fg-c3 { stroke: var(--lavanda); }
.fg-svg .fg-c4 { stroke: var(--azul-claro); }
.fg-svg .fg-c5 { stroke: var(--alerta); }
.fg-svg .fg-fino { stroke-width: 1.2; }
.fg-svg .fg-grueso { stroke-width: 3.2; }
.fg-svg .fg-punteado { stroke-dasharray: 5 4; }
.fg-svg .fg-tenue { opacity: .45; }

/* áreas */
.fg-svg .fg-a1, .fg-svg .fg-a2, .fg-svg .fg-a3, .fg-svg .fg-a4, .fg-svg .fg-a5 { stroke: none; }
.fg-svg .fg-barra-c { fill: var(--crema); stroke: none; }
.fg-svg .fg-a1 { fill: var(--violeta); fill-opacity: .24; }
.fg-svg .fg-a2 { fill: var(--azul-claro); fill-opacity: .26; }
.fg-svg .fg-a3 { fill: var(--lavanda); fill-opacity: .24; }
.fg-svg .fg-a4 { fill: var(--crema); fill-opacity: .07; }
.fg-svg .fg-a5 { fill: var(--alerta); fill-opacity: .22; }
.fg-svg .fg-borde-v { stroke: var(--violeta); stroke-width: 1.2; }
.fg-svg .fg-borde-a { stroke: var(--azul-claro); stroke-width: 1.2; }
.fg-svg .fg-borde-c { stroke: var(--crema); stroke-width: 1.2; }
.fg-svg .fg-rect-prom { fill: var(--violeta); fill-opacity: .1; stroke: var(--violeta); stroke-width: 1; stroke-dasharray: 3 3; }

/* discos, intervalos y barras */
.fg-svg .fg-marco { fill: none; stroke: var(--linea-suave); stroke-width: 1; }
.fg-svg .fg-disco-n { fill: var(--crema); fill-opacity: .06; stroke: var(--crema-2); stroke-width: 1.2; }
.fg-svg .fg-disco-del { fill: var(--azul-claro); fill-opacity: .1; stroke: var(--azul-claro); stroke-width: 1; stroke-dasharray: 3 3; }
.fg-svg .fg-disco-del-act { fill-opacity: .2; stroke-width: 2; stroke-dasharray: none; }
.fg-svg .fg-triple { fill: none; stroke: var(--lavanda); stroke-width: 1; stroke-dasharray: 4 4; opacity: .38; }
.fg-svg .fg-triple-act { fill: var(--lavanda); fill-opacity: .08; stroke: var(--lavanda); stroke-width: 1.6; stroke-dasharray: 5 4; }
.fg-svg .fg-disco-sel { fill: var(--violeta); fill-opacity: .55; stroke: var(--violeta); stroke-width: 1.8; }
.fg-svg .fg-disco-act { fill-opacity: .72; stroke: var(--lavanda); stroke-width: 3; }
.fg-svg .fg-resto { fill: var(--azul-claro); fill-opacity: .85; }
.fg-svg .fg-iv { fill: var(--violeta); fill-opacity: .6; }
.fg-svg .fg-iv-act { fill: var(--lavanda); fill-opacity: .92; }
.fg-svg .fg-barra-v { fill: var(--violeta); fill-opacity: .7; }
.fg-svg .fg-barra-act { fill: var(--lavanda); }
.fg-svg .fg-barra-x { fill: var(--alerta); fill-opacity: .8; }
.fg-svg .fg-barra-a { fill: var(--azul-claro); fill-opacity: .8; }
.fg-svg .fg-barra-tenue { fill: var(--crema); fill-opacity: .12; }

/* entornos de curvas */
.fg-svg .fg-tubo { fill: none; stroke: var(--azul-claro); stroke-opacity: .32; stroke-linecap: round; stroke-linejoin: round; }
.fg-svg .fg-nucleo { fill: var(--violeta); fill-opacity: .38; stroke: none; }
.fg-svg .fg-rect-cub { fill: var(--violeta); fill-opacity: .14; stroke: var(--violeta); stroke-width: 1.2; }
.fg-svg .fg-seg-l { stroke: var(--lavanda); stroke-width: 1.6; stroke-linecap: round; }

/* conjuntos en el plano */
.fg-svg .fg-ns { vector-effect: non-scaling-stroke; }
.fg-svg .fg-forma { fill: var(--crema); fill-opacity: .15; stroke: var(--crema); stroke-width: 1.8; }
.fg-svg .fg-forma-dentro { fill: var(--azul-claro); fill-opacity: .5; stroke: none; }
.fg-svg .fg-bola { fill: var(--lavanda); fill-opacity: .08; stroke: var(--lavanda); stroke-width: 2; }
.fg-svg .fg-rect-u { fill: var(--violeta); fill-opacity: .35; stroke: var(--violeta); stroke-width: 2; }
.fg-svg .fg-rect-mal { fill: var(--alerta); fill-opacity: .3; stroke: var(--alerta); }

/* puntos y asas */
.fg-svg .fg-pt { fill: var(--lavanda); stroke: var(--fg-fondo); stroke-width: 2; }
.fg-svg .fg-asa { cursor: grab; }
.fg-svg .fg-hueco { fill: var(--fg-fondo); stroke: var(--crema); stroke-width: 1.6; }
.fg-svg .fg-lleno { fill: var(--crema); stroke: var(--fg-fondo); stroke-width: 1.2; }
.fg-svg .fg-pv { fill: var(--violeta); stroke: var(--fg-fondo); stroke-width: 1.5; }
.fg-svg .fg-pa { fill: var(--azul-claro); stroke: var(--fg-fondo); stroke-width: 1.5; }
.fg-svg .fg-px { fill: var(--alerta); stroke: var(--fg-fondo); stroke-width: 1.5; }
.fg-svg .fg-err { stroke: var(--alerta); stroke-width: 2.4; stroke-linecap: round; fill: none; }

/* ---------------------------------------------------------------- lecturas */

.b-fig sup, .b-fig sub { font-size: .72em; line-height: 0; }

.fg-lect {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 16px; margin: 12px 0 0;
}
.fg-l { margin: 0; min-width: 0; }
.fg-l dt {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .02em;
  color: var(--crema-2); line-height: 1.3;
}
.fg-l dd { margin: 2px 0 0; font-family: var(--f-mono); font-size: 17px; color: var(--crema); overflow-wrap: anywhere; }
.fg-sw { flex: none; display: inline-block; width: 14px; height: 4px; border-radius: 2px; background: var(--crema-3); }
.fg-sw-c1 { background: var(--crema); }
.fg-sw-v  { background: var(--violeta); }
.fg-sw-l  { background: var(--lavanda); }
.fg-sw-a  { background: var(--azul-claro); }
.fg-sw-x  { background: var(--alerta); }

/* La línea de uso: una frase, encima de la figura. */
.fg-uso { margin: 0 0 10px; font-size: 14.5px; color: var(--crema-2); }

/* ---------------------------------------------------------------- controles */

.fg-controles {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--linea-suave);
}
.fg-ctl { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fg-ctl-rango { flex: 1 1 250px; }
.fg-ctl-opc { flex-wrap: wrap; }
.fg-etq {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .03em;
  color: var(--crema-2); white-space: nowrap;
}
.fg-valor { flex: none; min-width: 4.2em; text-align: right; font-family: var(--f-mono); font-size: 12.5px; color: var(--crema); }

.fg-rango {
  flex: 1; min-width: 90px; height: 24px; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: transparent; accent-color: var(--violeta);
}
.fg-rango::-webkit-slider-runnable-track { height: 3px; background: var(--linea); border-radius: 2px; }
.fg-rango::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -6.5px; border-radius: 50%;
  background: var(--lavanda); border: 2px solid var(--fg-fondo); box-shadow: 0 0 0 1px var(--lavanda);
}
.fg-rango::-moz-range-track { height: 3px; background: var(--linea); border-radius: 2px; }
.fg-rango::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--lavanda); border: 2px solid var(--fg-fondo); box-shadow: 0 0 0 1px var(--lavanda);
}

.fg-seg { display: inline-flex; flex-wrap: wrap; }
.fg-op, .fg-btn {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--crema-2); background: none; cursor: pointer;
  border: 1px solid var(--linea-suave); padding: 6px 11px;
  transition: background .12s, color .12s, border-color .12s;
}
.fg-op { margin: 0 -1px -1px 0; }
.fg-op:hover, .fg-btn:hover { color: var(--crema); border-color: var(--azul-claro); }
.fg-op[aria-pressed="true"] { background: var(--violeta); border-color: var(--violeta); color: var(--tinta); }
.fg-btn.fg-play { border-color: var(--violeta); color: var(--crema); padding: 6px 14px; }
.fg-btn.fg-play[aria-pressed="true"] { background: var(--violeta); color: var(--tinta); }
.fg-play-ico { display: inline-block; min-width: 1em; }
.fg-reiniciar { padding: 6px 10px; }

.fg-int { cursor: pointer; }
.fg-int input { accent-color: var(--violeta); width: 16px; height: 16px; margin: 0; cursor: pointer; }
.fg-int-txt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--crema-2); }
.fg-int:hover .fg-int-txt { color: var(--crema); }

.fg-op:focus-visible, .fg-btn:focus-visible, .fg-rango:focus-visible, .fg-int input:focus-visible {
  outline: 2px solid var(--lavanda); outline-offset: 2px;
}

/* ---------------------------------------------------------------- móvil */

@media (max-width: 560px) {
  .b-fig { padding-left: 12px; padding-right: 12px; }
  .fg-ctl-rango { flex-basis: 100%; }
  .fg-lect { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fg-l dd { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .fg-op, .fg-btn { transition: none; }
}