/* ============================================================
   lectura.css — una etapa: riel, cuerpo, contexto
   y la piel de Duna para los bloques de views/bloques.js

   Los bloques llevan el mismo HTML que en la versión clásica (b-def,
   b-thm, b-demo, b-estudio…); aquí solo cambia cómo se ven. La regla
   que no se toca: lo que no es del libro (b-estudio) va en AZUL.
   ============================================================ */

.le {
  display: grid;
  grid-template-columns: 236px minmax(0, var(--lectura)) 300px;
  gap: 34px;
  justify-content: center;
  padding: calc(var(--hud) + 26px) 26px 90px;
}

/* ------------------------------------------------------------ riel */

.le-riel {
  position: sticky; top: calc(var(--hud) + 20px);
  align-self: start;
  max-height: calc(100vh - var(--hud) - 40px);
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--noche-3) transparent;
  padding: 16px 14px 16px 16px;
  background: rgba(10, 7, 13, 0.66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--linea-suave);
}
.le-volver { display: inline-block; margin-bottom: 14px; color: var(--crema-2); }
.le-volver:hover { color: var(--arena-clara); }
.le-etapa { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.le-num {
  font-family: var(--f-display); font-weight: 700; font-size: 58px; line-height: 1;
  letter-spacing: 0.02em; color: var(--violeta);
  view-transition-name: etapa;
  text-shadow: 0 0 30px rgba(157, 108, 240, 0.35);
}
.le-etapa-sec { color: var(--arena-clara); line-height: 1.5; }

.riel { position: relative; padding-left: 20px; }
.riel-linea { position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--linea-suave); overflow: hidden; }
.riel-progreso {
  position: absolute; inset: 0;
  background: linear-gradient(var(--violeta), var(--lavanda));
  transform-origin: top; transform: scaleY(0);
}
.riel-lista { list-style: none; margin: 0; padding: 0; }
.riel-nodo { position: relative; display: flex; gap: 10px; padding: 7px 0; color: var(--crema-2); }
.riel-punto {
  position: absolute; left: -20px; top: 12px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--noche); border: 1.5px solid var(--crema-3);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--curva);
}
.riel-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.riel-txt .etq { font-size: 10px; letter-spacing: 0.16em; color: var(--crema-3); }
.riel-nombre { font-size: 13.5px; line-height: 1.35; }
.riel-nodo:hover { color: var(--crema); }
.riel-nodo.activo { color: var(--crema); }
.riel-nodo.activo .etq { color: var(--violeta); }
.riel-nodo.activo .riel-punto {
  background: var(--violeta); border-color: var(--violeta);
  box-shadow: 0 0 0 4px rgba(157, 108, 240, 0.22), 0 0 18px rgba(157, 108, 240, 0.6);
  transform: scale(1.1);
}

.le-vecinas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea-suave); }
.le-vecina { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--crema-2); }
.le-vecina.sig { text-align: right; }
.le-vecina .etq { color: var(--arena); }
.le-vecina:hover { color: var(--crema); }

/* ------------------------------------------------------------ cuerpo */

.le-cuerpo {
  min-width: 0;
  padding: 40px 46px 50px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--linea-suave);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4);
}
.le-cab { margin-bottom: 30px; }
.le-miga { color: var(--arena); }
.le-titulo { margin: 10px 0 10px; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; color: var(--crema); }
.le-resumen { margin: 0; font-size: 18px; color: var(--crema-2); }

.le-bloques { position: relative; }
.le-bloque + .le-bloque { margin-top: 22px; }

/* ------------------------------------------------------------ bloques (piel Duna) */

.b-p p, .b-cuerpo p, .b-estudio-cuerpo p, .b-demo-pasos p { margin: 0 0 0.7em; }
.b-p p:last-child, .b-cuerpo p:last-child, .b-estudio-cuerpo p:last-child, .b-demo-pasos p:last-child { margin-bottom: 0; }
.b-p strong, .b-cuerpo strong { color: var(--crema); font-weight: 600; }

.le-cuerpo ul, .cajon-cuerpo ul { list-style: none; padding: 0; margin: 0.5em 0 0.8em; }
.le-cuerpo ul li, .cajon-cuerpo ul li { position: relative; padding-left: 22px; margin: 0.35em 0; }
.le-cuerpo ul li::before, .cajon-cuerpo ul li::before {
  content: ''; position: absolute; left: 3px; top: 0.78em; width: 9px; height: 1.5px; background: var(--arena);
}
.le-cuerpo ol:not(.b-demo-pasos), .cajon-cuerpo ol:not(.b-demo-pasos) { padding-left: 1.4em; }

a.xref { color: var(--arena-clara); border-bottom: 1px dotted rgba(209, 144, 240, 0.55); }
a.xref:hover { color: var(--violeta); border-bottom-color: var(--violeta); }
a.xref-ej { color: var(--lavanda); }

mjx-container[display="true"] { min-width: 0 !important; display: block; overflow-x: auto; overflow-y: hidden; margin: 0.7em 0 !important; padding: 2px 0; max-width: 100%; }
mjx-container { max-width: 100%; }

.b-h2 {
  display: flex; align-items: center; gap: 12px;
  margin: 46px 0 4px;
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--arena-clara);
}
.b-h2-destello { color: var(--violeta); }

.b-cita {
  margin: 0; padding: 4px 0 4px 22px;
  border-left: 2px solid var(--violeta);
  font-size: 19px; font-style: italic; color: var(--crema-2);
}
.b-cita p { margin: 0 0 8px; }
.b-cita cite { display: block; font-style: normal; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--violeta); }

.b-cab { margin-bottom: 10px; }
.b-tag { display: inline-block; }
.b-nombre { margin: 4px 0 0; font-size: 20px; line-height: 1.25; }

/* Definición: panel violeta, como los paneles macizos del póster. */
.b-def {
  position: relative;
  padding: 20px 24px 22px;
  color: var(--tinta);
  background: linear-gradient(135deg, #9336e3 0%, var(--violeta) 45%, var(--violeta-hondo) 100%);
}
.b-def::after {                         /* un velo de arena sobre el violeta */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.12; mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(170deg, rgba(0, 0, 0, 0.5) 0 1px, transparent 1px 7px);
}
.b-def .b-tag { color: var(--tinta); opacity: 0.72; }
.b-def .b-nombre { color: var(--tinta); }
.b-def .b-cuerpo strong { color: var(--tinta); }
.b-def a.xref { color: var(--tinta); border-bottom-color: rgba(15, 8, 20, 0.5); font-weight: 600; }
.b-def ul li::before { background: var(--tinta); }

/* Resultado: fondo de noche, filete de arena, esquinas en «L». */
.b-thm {
  position: relative;
  padding: 20px 24px 20px;
  background: rgba(15, 9, 20, 0.92);
  border: 1px solid var(--linea-arena);
}
.b-thm .b-tag { color: var(--violeta); }
.b-thm .b-nombre { color: var(--crema); }
.b-thm.k-teorema { border-color: var(--linea); box-shadow: inset 0 0 0 1px rgba(157, 108, 240, 0.12), 0 0 40px rgba(157, 108, 240, 0.08); }
.b-thm.k-observacion .b-tag { color: var(--lavanda); }
.esquinas::before, .esquinas::after { content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none; }
.esquinas::before { top: -1px; left: -1px; border-top: var(--filete) solid var(--violeta); border-left: var(--filete) solid var(--violeta); }
.esquinas::after { bottom: -1px; right: -1px; border-bottom: var(--filete) solid var(--violeta); border-right: var(--filete) solid var(--violeta); }

/* La demostración, paso a paso. */
.b-demo { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linea-suave); }
.b-demo summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; color: var(--crema); }
.b-demo summary::-webkit-details-marker { display: none; }
.b-demo summary .etq { color: var(--crema); }
.b-demo summary:hover .etq { color: var(--violeta); }
.b-demo-flecha { font-size: 12px; color: var(--violeta); display: inline-block; transition: transform 0.25s var(--curva); }
details[open] > summary .b-demo-flecha { transform: rotate(90deg); }
.b-demo-n { font-family: var(--f-mono); font-size: 11px; color: var(--crema-3); }
.b-demo-pasos { list-style: none; counter-reset: paso; margin: 14px 0 0; padding: 0; }
.b-demo-pasos > li { counter-increment: paso; position: relative; padding: 0 0 14px 46px; }
.b-demo-pasos > li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-family: var(--f-mono); font-size: 12px; color: var(--violeta);
  border: 1px solid var(--linea); padding: 0 5px;
}
.b-demo-pasos > li.oculto { display: none; }
.b-demo-pasos > li.recien { animation: pasoSale 0.7s var(--curva); }
@keyframes pasoSale { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }

.demo-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.demo-sig, .demo-todos {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 12px; cursor: pointer; border: 1px solid var(--linea); background: transparent; color: var(--crema);
}
.demo-sig { background: rgba(157, 108, 240, 0.14); }
.demo-sig:hover:not(:disabled), .demo-todos:hover { background: var(--violeta); color: var(--tinta); }
.demo-sig:disabled { opacity: 0.35; cursor: default; }
.demo-cuenta { color: var(--arena); }
.demo-barra.completa .demo-todos { display: none; }

/* Ejemplo: trazo discontinuo de arena. */
.b-ejemplo { padding: 18px 22px 20px; border: 1px dashed var(--linea-arena); background: rgba(10, 7, 13, 0.4); }
.b-ejemplo .b-tag { color: var(--arena); }

/* NOTA DE ESTUDIO — el azul: lo que no es del libro. */
.b-estudio { padding: 12px 18px 14px; border-left: 3px solid var(--azul); background: rgba(58, 126, 168, 0.14); color: var(--crema); }
.b-thm .b-estudio { margin-top: 14px; }
.b-estudio.tono-trampa { border-left-style: dashed; }
.b-estudio-cab .etq { color: var(--azul-claro); }
.b-estudio-tit { margin: 4px 0 6px; font-weight: 600; font-size: 17px; }
.b-estudio-cuerpo { margin-top: 6px; font-size: 16px; }
.b-estudio a.xref { color: var(--azul-claro); border-bottom-color: rgba(147, 204, 240, 0.45); }

.b-usa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linea-suave); }
.b-usa .etq { margin-right: 4px; }

.b-tabla-wrap { overflow-x: auto; margin-top: 10px; }
.b-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.b-tabla th { text-align: left; font-weight: 400; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--crema-2); padding: 8px 10px; border-bottom: var(--filete) solid var(--linea); }
.b-tabla td { padding: 10px; border-bottom: 1px solid var(--linea-suave); vertical-align: top; }

/* Al llegar por un ancla (views/comun.js → resaltar). */
.destello { animation: destello 2.2s ease-out; }
@keyframes destello { 0%, 25% { box-shadow: 0 0 0 3px var(--lavanda), 0 0 60px rgba(190, 150, 250, 0.45); } 100% { box-shadow: 0 0 0 3px transparent; } }
[id] { scroll-margin-top: calc(var(--hud) + 26px); }

/* ------------------------------------------------------------ fin de etapa */

.le-fin { margin-top: 52px; display: grid; gap: 22px; }
.le-fin-ejs { padding-top: 18px; border-top: 1px solid var(--linea-suave); }
.le-fin-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.le-siguiente {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 18px;
  padding: 22px 24px;
  border: var(--filete) solid var(--violeta);
  background: linear-gradient(100deg, rgba(157, 108, 240, 0.16), rgba(169, 138, 222, 0.05));
  color: var(--crema);
}
.le-siguiente .etq { grid-column: 1; color: var(--violeta); }
.le-siguiente-tit { grid-column: 1; font-size: 22px; font-weight: 600; }
.le-siguiente-flecha { grid-column: 2; grid-row: 1 / span 2; font-size: 30px; color: var(--violeta); transition: transform 0.35s var(--curva); }
.le-siguiente:hover { color: var(--crema); background: linear-gradient(100deg, rgba(157, 108, 240, 0.3), rgba(169, 138, 222, 0.1)); }
.le-siguiente:hover .le-siguiente-flecha { transform: translateX(8px); }

/* ------------------------------------------------------------ contexto */

.le-contexto {
  position: sticky; top: calc(var(--hud) + 20px);
  align-self: start;
  max-height: calc(100vh - var(--hud) - 40px);
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--noche-3) transparent;
}
.ctx {
  padding: 16px 16px 18px;
  background: var(--panel-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-left: 2px solid var(--violeta);
  opacity: 0.35; transform: translateX(10px);
  transition: opacity 0.35s ease, transform 0.45s var(--curva);
}
.ctx.entra { opacity: 1; transform: none; }
.ctx-etq { color: var(--crema-3); margin-bottom: 6px; }
.ctx-actual { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.ctx-actual .etq { color: var(--violeta); }
.ctx-nombre { font-weight: 600; font-size: 16px; line-height: 1.3; }
.ctx-seccion + .ctx-seccion { margin-top: 16px; }
.ctx-ficha {
  display: block; padding: 10px 12px; margin-top: 8px; cursor: pointer;
  border: 1px solid var(--linea-suave); background: rgba(10, 7, 13, 0.5);
  transition: border-color 0.2s, transform 0.25s var(--curva);
}
.ctx-ficha-cuerpo { pointer-events: none; }   /* el clic es de la ficha entera */
.ctx-ficha:hover, .ctx-ficha:focus-visible { border-color: var(--violeta); transform: translateX(-3px); }
.ctx-nada { font-size: 13px; color: var(--crema-3); margin: 0; }
.ctx-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------ pantallas medianas y estrechas */

@media (max-width: 1340px) {
  .le { grid-template-columns: 220px minmax(0, var(--lectura)); }
  .le-contexto { display: none; }
}

@media (max-width: 960px) {
  .le { grid-template-columns: minmax(0, 1fr); padding: calc(var(--hud) + 14px) 14px 70px; }
  .le-riel { display: none; }
  .le-cuerpo { padding: 26px 18px 32px; }
  /* El riel se vuelve una barra de progreso bajo el HUD. */
  .le::before {
    content: ''; position: fixed; left: 0; top: var(--hud); z-index: 40;
    height: 2px; width: calc(var(--progreso, 0) * 100%);
    background: linear-gradient(90deg, var(--violeta), var(--lavanda));
  }
  .b-def, .b-thm, .b-ejemplo { padding: 16px 16px 18px; }
  .b-demo-pasos > li { padding-left: 0; padding-top: 26px; }
}