/*
 * diario.css — El Diario. Se apoya en `observatorio.css` (paleta, tipografía, `.idiomas`, `.ir`,
 * `footer`) y sólo añade lo que un artículo largo necesita.
 *
 * Como en el resto de este sitio: cero peticiones a terceros y **ni una declaración de estilo en
 * línea** en el marcado, porque `style-src 'self'` la rechaza. Lo que hace `diario.js` con
 * `element.style` es CSSOM, que la CSP no bloquea.
 *
 * Todo se lee sin JavaScript: esta hoja es lo único que hace falta para que sea bonito.
 */

/* El cielo de verdad, detrás de todo (`fondo.js`). Fijo y sin interacción: no cuenta para el
   diseño ni desplaza nada. Si el script no corre, esto no existe y la página es idéntica. */
.cielo-fondo{position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none}
/* Una sombra del color del fondo, para que una luz que pase detrás de una letra no se coma su contraste. */
.articulo-pagina{text-shadow:0 0 12px rgba(8,8,12,.9), 0 0 3px rgba(8,8,12,.9)}
.articulo-pagina button, .articulo-pagina .demo svg text{text-shadow:none}
.cielo-nota{font-size:.82rem; color:var(--tenue); margin:44px 0 -30px; max-width:34rem}

.articulo-pagina{padding-top:30px}
.migas{font-size:.78rem; color:var(--tenue); margin:0 0 20px}
.migas a{color:var(--tenue)}

/* La barra de lectura. Vacía y sin efecto si no hay JavaScript. */
.progreso{position:fixed; top:0; left:0; right:0; height:3px; z-index:50; pointer-events:none}
.progreso i{display:block; height:100%; background:var(--violeta); transform-origin:0 50%; transform:scaleX(0)}

article header h1{font-size:1.95rem; font-weight:500; line-height:1.18; letter-spacing:-.015em; margin:0 0 16px; text-wrap:balance}
article header .entrada{font-size:1.1rem; line-height:1.6}
.meta{font-size:.8rem; color:var(--tenue); margin:0 0 6px}

/* El índice: abierto por defecto (sin JS, lo ves); diario.js lo pliega en pantallas pequeñas. */
.indice details{border:1px solid var(--linea); border-radius:14px; padding:12px 18px; margin:26px 0 8px; background:rgba(8,8,12,.62)}
.indice summary{cursor:pointer; font-size:.72rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--tenue)}
.indice summary:focus-visible{outline:2px solid var(--violeta); outline-offset:4px; border-radius:4px}
.indice ol{margin:.9em 0 .3em; padding-left:1.25em; font-size:.92rem}
.indice li{padding:2px 0}
.indice a{color:#B9B5C6; text-decoration:none}
.indice a:hover, .indice a.activo{color:var(--tinta)}
.indice a.activo{text-decoration:underline; text-underline-offset:3px}

/* El texto */
.texto{font-size:1.06rem; line-height:1.78; color:#D8D4E3; margin-top:8px}
.texto p{margin:0 0 1.2em}
.texto h2{
  margin:2.3em 0 .7em; font-size:1.22rem; font-weight:500; letter-spacing:-.005em;
  text-transform:none; color:var(--tinta); line-height:1.3; scroll-margin-top:22px; text-wrap:balance;
}
.texto h3{margin:1.8em 0 .5em; font-size:1.05rem; font-weight:500; color:var(--tinta)}
.texto a{color:#C9A0EE; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.texto a:hover{color:#DDB9F5}
.texto ul, .texto ol{padding-left:1.3em; margin:0 0 1.2em}
.texto li{margin-bottom:.55em}
.texto blockquote{margin:1.6em 0; padding:.1em 0 .1em 1.1em; border-left:2px solid rgba(157,78,221,.55); color:#B9B5C6}
.texto blockquote p{margin:0}
.texto blockquote p + p{margin-top:.75em}   /* una carta entera: sus párrafos, separados */
.texto strong{font-weight:600; color:var(--tinta)}

sup.ref{line-height:0; font-size:.7em}
sup.ref a{color:var(--violeta); text-decoration:none; padding:.25em .18em; border-radius:4px; font-variant-numeric:tabular-nums}
sup.ref a:hover, sup.ref a:focus-visible{background:rgba(157,78,221,.18); outline:none}

/* Las fuentes, al pie y con vuelta al texto */
.fuentes ol{font-size:.86rem; line-height:1.55; color:#B9B5C6; padding-left:1.4em; margin:0}
.fuentes li{margin-bottom:.8em; overflow-wrap:anywhere}
.fuentes a{color:#B9B5C6; text-underline-offset:3px}
.fuentes li:target{background:rgba(157,78,221,.12); border-radius:8px; outline:6px solid rgba(157,78,221,.12)}
.fuentes .volver{text-decoration:none; color:var(--violeta); margin-left:.3em}
.licencia{margin:28px 0 0; padding:14px 0 0; border-top:1px solid var(--linea); font-size:.8rem; line-height:1.55; color:var(--tenue)}
.licencia p{margin:0 0 .6em; overflow-wrap:anywhere}
.licencia a{color:#B9B5C6; text-underline-offset:3px}
.licencia-et{color:#B9B5C6}

/* La tarjeta de una fuente, junto a su número (la coloca diario.js) */
.nota-flotante{
  position:absolute; z-index:60; box-sizing:border-box; width:min(23rem, calc(100vw - 32px));
  background:#14131C; border:1px solid rgba(232,228,240,.18); border-radius:14px;
  padding:13px 16px; font-size:.84rem; line-height:1.5; color:#D8D4E3;
  box-shadow:0 14px 44px rgba(0,0,0,.55); overflow-wrap:anywhere;
}
.nota-flotante a{color:#C9A0EE}

/* El índice de artículos */
.lista-articulos{list-style:none; margin:32px 0 0; padding:0}
.lista-articulos li{border-top:1px solid var(--linea); padding:24px 0}
.lista-articulos h2{margin:0 0 8px; font-size:1.3rem; font-weight:500; letter-spacing:-.01em; text-transform:none; color:var(--tinta); line-height:1.25}
.lista-articulos h2 a{color:var(--tinta); text-decoration:none}
.lista-articulos h2 a:hover{text-decoration:underline; text-underline-offset:4px}
.lista-articulos p{color:#B9B5C6; margin:0 0 8px}
/* Por tramos: el <section> del sitio ya trae su raya y el <h2> pequeño en versalitas. */
.ruta-intro{font-size:.9rem; color:#B9B5C6; margin:6px 0 0}
.tramo h2{color:#C9A0EE; margin-bottom:4px}
.tramo .lista-articulos{margin-top:0}
.tramo .lista-articulos li:first-child{border-top:none; padding-top:12px}
.lista-articulos h3{margin:0 0 8px; font-size:1.3rem; font-weight:500; letter-spacing:-.01em; color:var(--tinta); line-height:1.25}
.lista-articulos h3 a{color:var(--tinta); text-decoration:none}
.lista-articulos h3 a:hover{text-decoration:underline; text-underline-offset:4px}
.lista-articulos .num{display:inline-block; min-width:1.15em; margin-right:.35em; color:var(--tenue); font-weight:400; font-variant-numeric:tabular-nums}

/* La ruta al final de cada artículo: dónde estás, el siguiente (con su resumen) y el anterior. */
.ruta{display:grid; gap:12px; margin:2.6em 0 0; padding-top:1.4em; border-top:1px solid var(--linea)}
.ruta-donde{margin:0; font-size:.78rem; color:var(--tenue)}
.ruta-donde a{color:var(--tenue)}
.ruta a.ruta-sig, .ruta a.ruta-ant{display:grid; gap:5px; text-decoration:none; color:var(--tinta);
  border:1px solid var(--linea); border-radius:16px; padding:14px 18px; background:rgba(14,13,20,.78)}
.ruta a.ruta-sig{border-color:rgba(157,78,221,.6)}
.ruta a.ruta-sig:hover, .ruta a.ruta-ant:hover{border-color:rgba(157,78,221,.95); background:rgba(157,78,221,.09)}
.ruta a.ruta-sig:focus-visible, .ruta a.ruta-ant:focus-visible{outline:2px solid var(--violeta); outline-offset:3px}
.ruta-et{font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:#C9A0EE}
.ruta-ant .ruta-et{color:var(--tenue)}
.ruta-tramo{font-size:.78rem; color:#FFB703}
.ruta-sig strong{font-weight:500; font-size:1.1rem; line-height:1.3}
.ruta-ant strong{font-weight:400; font-size:.95rem; line-height:1.35; color:#D8D4E3}
.ruta-res{font-size:.88rem; line-height:1.5; color:#B9B5C6}
.ruta-fin{margin:0; font-size:.92rem; color:#B9B5C6}
.ruta-fin a{color:#C9A0EE}

.cuidado{font-size:.8rem; color:var(--tenue); max-width:34rem}
.cuidado a{color:var(--tenue)}

/* La simulación. Todo su dibujo son atributos SVG; el color y el tamaño, esta hoja. */
.demo{margin:1.8em 0; padding:18px 18px 20px; border:1px solid var(--linea); border-radius:18px; background:rgba(14,13,20,.9)}
.demo-alt{margin:0; font-size:.92rem; color:#B9B5C6}
.demo h3{margin:0 0 4px; font-size:1rem}
.demo .aviso{margin:0 0 14px; font-size:.82rem; color:var(--tenue)}
.demo svg{display:block; width:100%; height:auto}
.demo .eje{font-size:.74rem; color:var(--tenue); margin:12px 0 4px}
.demo-controles{display:grid; gap:10px; margin:12px 0 4px}
.demo-controles label{display:grid; grid-template-columns:5.2rem 1fr 3.4rem; gap:10px; align-items:center; font-size:.82rem; color:#B9B5C6}
.demo-controles label.ancha{grid-template-columns:auto 1fr 4.6rem}
.demo-controles output{text-align:right; font-variant-numeric:tabular-nums; color:var(--tinta)}
.demo input[type=range]{width:100%; accent-color:var(--violeta); margin:0}
.demo-lectura{margin:14px 0 4px; padding:12px 14px; border-radius:12px; border:1px solid var(--linea); font-size:.9rem; line-height:1.5}
.demo-lectura b{font-weight:500}
.demo-lectura.sig{border-color:rgba(255,183,3,.55); background:rgba(255,183,3,.06)}
.demo-lectura .msg{display:block; margin-top:6px; color:#B9B5C6; font-size:.84rem}
.demo-botones{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.demo button{
  font:inherit; font-size:.82rem; color:var(--tinta); background:transparent; cursor:pointer;
  border:1px solid rgba(232,228,240,.26); border-radius:999px; padding:9px 16px; min-height:40px;
}
.demo button:hover{border-color:rgba(232,228,240,.5)}
.demo button:focus-visible{outline:2px solid var(--violeta); outline-offset:3px}
.demo button.primario{border-color:rgba(157,78,221,.7); background:rgba(157,78,221,.14)}
.demo-sim{margin-top:16px; padding-top:14px; border-top:1px solid var(--linea)}
.demo-sim h4{margin:0 0 10px; font-size:.86rem; font-weight:500; color:var(--tinta)}
.demo-sim .pie{margin:10px 0 0}
/* Los resultados: la lista de barras del Observatorio, pero con la etiqueta ARRIBA. Las etiquetas
   de la simulación son frases, y en una columna del 26 % de un móvil quedaban en cinco palabras por
   línea. Y hay que deshacer la sangría y el margen que el texto del artículo le pone a toda lista. */
.demo .barras{padding-left:0; margin:0; gap:18px}
.demo .barras li{grid-template-columns:1fr auto; grid-template-areas:"etq etq" "barra val"; gap:7px 14px; margin:0}
.demo .barras .etq{grid-area:etq; font-size:.86rem; line-height:1.4}
.demo .barras .barra{grid-area:barra; height:8px}
.demo .barras .val{grid-area:val; min-width:3.2ch}

/* Las proporciones del alma del mundo (escala.js): las barras se pintan aquí, no con `style=`. */
.demo .seg{opacity:.62; transition:opacity .12s}
.demo .seg.tono{fill:#9D4EDD}
.demo .seg.resto{fill:#FFB703}
.demo .seg.activo{opacity:1}
.demo .leyenda{margin:10px 0 0; font-size:.78rem; color:var(--tenue); line-height:1.7; display:flex; flex-wrap:wrap; gap:0 18px}
.demo .leyenda .ley{white-space:nowrap}
.demo .leyenda .sw{display:inline-block; width:.7em; height:.7em; border-radius:2px; margin-right:.45em}
.demo .leyenda .sw.tono{background:#9D4EDD}
.demo .leyenda .sw.resto{background:#FFB703}
.demo .cuenta{margin:8px 0 0; font-size:.88rem; color:#D8D4E3}
.demo .notas{display:flex; flex-wrap:wrap; gap:8px}
.demo button.nota{min-width:4.6rem; padding:9px 12px; font-variant-numeric:tabular-nums}
.demo button.nota.activo{border-color:rgba(157,78,221,.9); background:rgba(157,78,221,.22)}

/* El cuadrado de Durero (cuadrado.js): cuatro por cuatro, y debajo la lista de lo que suma. */
.demo .cuad{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; max-width:22rem; margin:14px auto 0}
.demo button.cel{
  aspect-ratio:1; min-height:0; padding:0; border-radius:12px; font-size:1.25rem; font-variant-numeric:tabular-nums;
  border:1px solid rgba(232,228,240,.22); background:rgba(232,228,240,.04);
}
.demo button.cel.en{border-color:rgba(157,78,221,.95); background:rgba(157,78,221,.26)}
.demo button.cel.sel{border-color:var(--ambar, #FFB703); box-shadow:0 0 0 2px rgba(255,183,3,.45)}
.demo .tipos{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 4px}
.demo .tipos button[aria-pressed="true"]{border-color:rgba(157,78,221,.9); background:rgba(157,78,221,.22)}
.demo .miembros{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px}
.demo .miembros li{margin:0}
.demo button.miembro{
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"quien marca" "cuenta marca"; gap:2px 12px;
  width:100%; text-align:left; border-radius:12px; padding:9px 14px; border-color:rgba(232,228,240,.16);
}
.demo button.miembro[aria-pressed="true"]{border-color:rgba(157,78,221,.9); background:rgba(157,78,221,.14)}
.demo button.miembro .quien{grid-area:quien; font-size:.78rem; color:var(--tenue)}
.demo button.miembro .cuenta{grid-area:cuenta; font-variant-numeric:tabular-nums; font-size:.9rem}
.demo button.miembro .marca{grid-area:marca; align-self:center; font-size:1rem; color:#9D4EDD}
.demo button.miembro.mal{border-color:rgba(255,183,3,.55)}
.demo button.miembro.mal .marca{color:#FFB703}

/* La aritmética de una cita (cita.js): una barra gris por hora con las visitas repartidas y una violeta con la hora del mundo. */
.demo .fondo-grafico{fill:#0C0B12}
.demo .rejilla{stroke:rgba(232,228,240,.10); stroke-width:1}
.demo .eje-t{fill:#8C88A0; font-size:10px}
.demo .b-rep{fill:#6C6A78}
.demo .b-hora{fill:#9D4EDD}
.demo .b-hora.pico{fill:#FFB703}
.demo .leyenda .sw.rep{background:#6C6A78}
.demo .leyenda .sw.hora{background:#9D4EDD}
.demo .leyenda.larga .ley{white-space:normal}   /* leyendas con frases largas: que se partan, no que desborden */

/* ¿Qué existe ya? (linea.js): una línea del tiempo con seis hitos que se encienden al pasar el cursor. */
.demo .eje-l{stroke:rgba(232,228,240,.28); stroke-width:1.5}
.demo .hito{fill:#1B1926; stroke:#6C6A78; stroke-width:2; transition:fill .12s}
.demo .hito.ya{fill:#9D4EDD; stroke:#9D4EDD}
.demo .hito.kyb.ya{fill:#FFB703; stroke:#FFB703}
.demo .cursor{stroke:#E8E4F0; stroke-width:2; stroke-linecap:round}
.demo .hitos{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:6px}
.demo .hitos li{display:grid; grid-template-columns:6.2rem 1fr; gap:10px; margin:0; padding:9px 12px; border:1px solid rgba(232,228,240,.12); border-radius:12px; opacity:.45}
.demo .hitos li.ya{opacity:1; border-color:rgba(157,78,221,.55)}
.demo .hitos li:last-child.ya{border-color:rgba(255,183,3,.7)}
.demo .hitos .cuando{font-size:.78rem; color:var(--tenue); font-variant-numeric:tabular-nums}
.demo .hitos .que{font-size:.88rem; line-height:1.45}

/* El cinabrio, en cuentas (cinabrio.js): una barra con la composición del cinabrio, mercurio y azufre. */
.demo .compo.hg{fill:#9D4EDD}
.demo .compo.azufre{fill:#FFB703}
.demo .leyenda .sw.hg{background:#9D4EDD}
.demo .leyenda .sw.azufre{background:#FFB703}

/* Un verso, tres épocas (tabla.js): tres columnas —árabe, latín, inglés— con lo que cambia en amarillo. */
.demo .cols{display:grid; gap:10px; margin-top:12px}
.demo .col{border:1px solid rgba(232,228,240,.16); border-radius:12px; padding:12px 14px}
.demo .col h4{margin:0 0 6px; font-size:.8rem; font-weight:500; letter-spacing:.03em; color:var(--tenue)}
.demo .orig{margin:0 0 6px; font-size:.95rem; line-height:1.6}
.demo .orig.ar, .demo .orig.fa{font-size:1.3rem; line-height:2; text-align:right}
.demo .orig[dir="rtl"]{font-size:1.3rem; line-height:2; text-align:right}
.demo .trad{margin:6px 0 0; font-size:.86rem; line-height:1.5; color:#B9B5C6; font-style:italic}
.demo mark.dif{background:rgba(255,183,3,.26); color:inherit; border-radius:4px; padding:0 .12em}
@media (min-width:760px){ .demo .cols{grid-template-columns:repeat(3,1fr)} }
@media (min-width:760px){ .demo .cols.dos{grid-template-columns:repeat(2,1fr)} }   /* kimiya.js: dos columnas, la de los metales y la del alma */

/* Los dieciocho pasos del mercurio (rasa.js): una rejilla de seis por tres y, debajo, el paso elegido. */
.demo .pasos{display:grid; grid-template-columns:repeat(6,1fr); gap:6px; max-width:24rem; margin:14px 0 0}
.demo button.paso{
  aspect-ratio:1; min-height:0; padding:0; border-radius:12px; font-size:1rem; font-variant-numeric:tabular-nums;
  border:1px solid rgba(232,228,240,.26); background:rgba(232,228,240,.04);
}
.demo button.paso.solo-lista{border-style:dashed; color:#B9B5C6}
.demo button.paso[aria-pressed="true"]{border-color:rgba(157,78,221,.95); background:rgba(157,78,221,.26); color:var(--tinta)}
.demo .rasa-panel .sanscrito{margin:6px 0 0; font-size:1.7rem; line-height:1.5}
.demo .rasa-panel .iast{margin:0 0 6px; font-size:.86rem; font-style:italic; color:var(--tenue)}

/* Mercurio y azufre: qué metal sale (maden.js): tres grupos de botones y las seis reglas del Marifetname. */
.demo .grupo{margin:12px 0 0}
.demo .grupo .etq{display:block; font-size:.8rem; color:var(--tenue); margin-bottom:6px}
.demo .grupo .tipos{margin:0}
.demo .orig.tr{font-size:.95rem; line-height:1.6; margin:8px 0 4px}
.demo .reglas-t{margin:18px 0 6px; font-size:.86rem; font-weight:500; color:var(--tinta)}
.demo .hitos.reglas li{opacity:.75; grid-template-columns:1fr; gap:4px}
.demo .hitos.reglas li.ya{opacity:1; border-color:rgba(255,183,3,.7)}
.demo .hitos.reglas .que{font-size:.82rem; color:#B9B5C6}

/* La noche, en palabras (noche.js): dos barras por palabra, poema y glosa, y debajo sus líneas y una frase. */
.demo .bp.b-poema{fill:#9D4EDD}
.demo .bp.b-glosa{fill:#FFB703}
.demo .leyenda .sw.poema{background:#9D4EDD}
.demo .leyenda .sw.glosa{background:#FFB703}
.demo .tipos + svg{margin-top:12px}
.demo .noche-detalle{margin-top:6px}
.demo .noche-detalle h4{margin:12px 0 4px; font-size:.8rem; font-weight:500; color:var(--tenue)}
.demo .orig.verso{font-style:italic}

/* La flauta, dístico a dístico (ney.js): reutiliza la rejilla de números de rasa.js y el persa de kimiya.js. */
.demo .ney-panel h4{margin:12px 0 4px; font-size:.78rem; font-weight:500; color:var(--tenue)}
.demo .ney-panel .ney-fa{font-size:1.35rem; line-height:2.1; margin:8px 0 2px}
.demo .ney-panel .ney-mia{margin:0; font-size:1rem; line-height:1.55; color:var(--tinta)}

/* Siete valles, medidos (valles.js): la rejilla de pasos de rasa.js en cuatro columnas y una barra con el poema entero. */
.demo .pasos.ocho{grid-template-columns:repeat(4,1fr); max-width:15rem}
.demo .bv{fill:#3A3850}
.demo .bv-ini{fill:#3A3850}
.demo .bv-exc{fill:#6C6A78}
.demo .bv-val{fill:#FFB703}
.demo .bv-trn{fill:#3DDC97}
.demo .bv-fin{fill:#4B4966}
.demo .bv-marca{fill:#9D4EDD; stroke:#E8E4F0; stroke-width:1.5}
.demo .leyenda .sw.bv-ini{background:#3A3850}
.demo .leyenda .sw.bv-exc{background:#6C6A78}
.demo .leyenda .sw.bv-val{background:#FFB703}
.demo .leyenda .sw.bv-trn{background:#3DDC97}
.demo .leyenda .sw.bv-fin{background:#4B4966}
.demo .msg.suma{margin-top:8px}
.demo .valles-panel h4.valles-nombre{margin:6px 0 0; font-size:1rem; font-weight:500; color:var(--tinta)}
.demo .valles-panel h4.valles-nombre .orig.fa{font-size:1.15rem; line-height:1.4}
.demo .valles-panel h4:not(.valles-nombre){margin:12px 0 4px; font-size:.78rem; font-weight:500; color:var(--tenue)}
.demo .valles-panel .ney-fa{font-size:1.35rem; line-height:2.1; margin:4px 0 2px}
.demo .valles-panel .ney-mia{margin:0; font-size:1rem; line-height:1.55; color:var(--tinta)}

/* Los catorce días del Bardo (bardo.js): un chip de color siempre junto al nombre del color escrito. */
.demo .lz-fila{margin:8px 0 0; font-size:.9rem; line-height:1.5; display:flex; align-items:baseline; gap:.5em}
.demo .lz-fila b{font-weight:500}
.demo .lz{display:inline-block; flex:none; width:.9em; height:.9em; border-radius:50%; border:1px solid rgba(232,228,240,.5)}
.demo .lz-azul{background:#4C7DFF}
.demo .lz-blanca{background:#F2F0FA}
.demo .lz-amarilla{background:#FFD23F}
.demo .lz-roja{background:#FF5D5D}
.demo .lz-verde{background:#3DDC97}
.demo .lz-humo{background:#8D8A9B}
.demo .lz-azulada{background:linear-gradient(135deg,#4C7DFF 50%,#FFD23F 50%)}
.demo .lz-todas{background:conic-gradient(#4C7DFF,#F2F0FA,#FFD23F,#FF5D5D,#3DDC97,#4C7DFF)}

/* Tres cuentas sobre coincidencias (coincidencia.js): pestañas y barras SVG, pintadas aquí y no con `style=`. */
.demo .pestanas{margin:12px 0 14px}
.demo .pestanas button[aria-pressed="true"]{border-color:rgba(157,78,221,.9); background:rgba(157,78,221,.22)}
.demo .vista[hidden]{display:none}
.demo .lotes{margin:0 0 10px}
.demo .lotes button{padding:7px 12px; min-height:36px; font-size:.78rem}
.demo .co-etq{fill:#D8D4E3; font-size:14px}
.demo .co-val{fill:#E8E4F0; font-size:14px; font-variant-numeric:tabular-nums}
.demo .co-barra{fill:#9D4EDD}
.demo .co-barra.media{fill:#FFB703}
.demo .co-base{stroke:rgba(232,228,240,.55); stroke-width:1.5; stroke-dasharray:4 4}
.demo .co-baset{fill:#B9B5C6; font-size:12.5px}

/* Una forma, diez significados (uroboros.js): el anillo que se cierra al avanzar, pintado aquí y no con `style=`. */
.demo svg.uro-anillo{max-width:15rem; margin:14px auto 0}
.demo .uro-base{fill:none; stroke:rgba(232,228,240,.16); stroke-width:6}
.demo .uro-hecho{fill:none; stroke:rgba(157,78,221,.85); stroke-width:6; stroke-linecap:round}
.demo .uro-hecho.oculto{display:none}
.demo .uro-est circle{fill:#0b0b12; stroke:rgba(232,228,240,.32); stroke-width:1.5}
.demo .uro-est text{fill:#B9B5C6; font-size:12px; font-variant-numeric:tabular-nums}
.demo .uro-est.hecha circle{stroke:rgba(157,78,221,.85)}
.demo .uro-est.activa circle{fill:rgba(157,78,221,.9); stroke:var(--tinta)}
.demo .uro-est.activa text{fill:var(--tinta)}
.demo .uro-fecha{fill:var(--tenue); font-size:11px}
.demo .pasos.uro-pasos{grid-template-columns:repeat(5,1fr); max-width:20rem; margin-left:auto; margin-right:auto}

/* Lo que se dijo y lo que se midió (oro.js): la regla logarítmica de masas, pintada aquí y no con `style=`. */
.demo svg.oro-regla{margin:14px 0 0}
.demo .oro-eje{stroke:rgba(232,228,240,.4); stroke-width:2}
.demo .oro-tick{stroke:rgba(232,228,240,.4); stroke-width:1.5}
.demo .oro-etq{fill:var(--tenue); font-size:12px}
.demo .oro-marca text{fill:#B9B5C6; font-size:13px; font-variant-numeric:tabular-nums}
.demo .oro-marca.medido circle{fill:rgba(232,190,90,.85); stroke:rgba(232,190,90,1); stroke-width:1.5}
.demo .oro-marca.afirmado polygon{fill:#0b0b12; stroke:rgba(232,190,90,.9); stroke-width:2; stroke-dasharray:3 2}
.demo .oro-marca.ref line{stroke:rgba(232,228,240,.7); stroke-width:2.5}
.demo .oro-marca.activa circle, .demo .oro-marca.activa polygon{stroke:var(--tinta); stroke-width:3}
.demo .oro-marca.activa line{stroke:var(--tinta); stroke-width:4}
.demo .oro-marca.activa text{fill:var(--tinta); font-weight:600}
.demo .pasos.oro-pasos{grid-template-columns:repeat(7,1fr); max-width:24rem}
.demo .oro-masa{font-variant-numeric:tabular-nums}

/* Los símbolos de Newton (simbolos.js): botones con el glifo grande y el glifo, más grande, en el panel. */
.demo .pasos.simbolos{grid-template-columns:repeat(7,1fr); max-width:26rem}
.demo button.paso.simbolo{font-size:1.45rem; line-height:1; font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols","Noto Sans Symbols 2",serif}
.demo .simbolo-grande{margin:4px 0 0; font-size:3rem; line-height:1.1; color:var(--tinta); font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols","Noto Sans Symbols 2",serif}

/* Dos listas, con y sin palacio (palacio.js): las listas, la casa y los campos para escribir. */
.demo .palacio-lista{margin:8px 0 12px; padding-left:1.6em; line-height:1.9; color:var(--tinta)}
.demo .palacio-lista.casa{padding-left:1.8em}
.demo .palacio-lugar{color:#B9B5C6}
.demo .palacio-campos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:10px 0 4px}
.demo .palacio-etq{display:grid; gap:4px; font-size:.78rem; color:var(--tenue)}
.demo input.palacio-campo{font:inherit; font-size:1rem; color:var(--tinta); background:rgba(232,228,240,.05); border:1px solid rgba(232,228,240,.26); border-radius:10px; padding:9px 10px; min-width:0}
.demo input.palacio-campo:focus{outline:2px solid var(--violeta); outline-offset:1px}
.demo .palacio-resultado{font-size:1.1rem}

/* La curva del olvido (curva.js): Ebbinghaus en violeta con círculos, Dros en ámbar con rombos huecos, la
   fórmula discontinua en gris. Los dos colores pasan la validación de paleta sobre el fondo #08080C. */
.demo svg.curva-graf{margin:14px 0 0; overflow:visible}
.demo .curva-rejilla{stroke:rgba(232,228,240,.10); stroke-width:1}
.demo .curva-base{stroke:rgba(232,228,240,.4); stroke-width:1.5}
.demo .curva-etq{fill:var(--tenue); font-size:15px; font-variant-numeric:tabular-nums}
.demo .curva-guia{stroke:rgba(232,228,240,.35); stroke-width:1; stroke-dasharray:2 3}
.demo .curva-formula{fill:none; stroke:#E8E4F0; stroke-opacity:.7; stroke-width:1.5; stroke-dasharray:5 5}
.demo .curva-linea-ebb{fill:none; stroke:#9D4EDD; stroke-width:2}
.demo .curva-punto{fill:#9D4EDD; stroke:#08080C; stroke-width:2}
.demo .curva-punto.activo{stroke:var(--tinta); stroke-width:2.5}
.demo .curva-dros[hidden]{display:none}
.demo .curva-linea-dros{fill:none; stroke:#B88200; stroke-width:2}
.demo .curva-rombo{fill:#08080C; stroke:#B88200; stroke-width:2}
.demo .curva-rombo.activo{stroke:var(--tinta)}
.demo .curva-diana{fill:transparent; cursor:pointer}
.demo .leyenda .sw.cv-ebb{background:#9D4EDD; border-radius:50%}
.demo .leyenda .sw.cv-form{background:transparent; border-top:2px dashed #B9B5C6; border-radius:0; height:0; vertical-align:middle}
.demo .leyenda .sw.cv-dros{background:transparent; border:2px solid #B88200; transform:rotate(45deg); border-radius:0}
.demo .pasos.curva-pasos{grid-template-columns:repeat(7,1fr); max-width:26rem}
.demo .curva-pasos button.paso{white-space:nowrap; padding-left:2px; padding-right:2px; font-size:.78rem}

@media (max-width:480px){
  article header h1{font-size:1.6rem}
  .texto{font-size:1.02rem}
  .demo{padding:14px}
  .demo-controles label{grid-template-columns:4.3rem 1fr 3rem}
}
@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto !important} }