/* ─────────────────────────────────────────────────────────────────────────────
   Pizarra blanca y pizarrón: las mismas tres tintas del dibujo (azul, rojo,
   verde) más la birome azul de trazo fino.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --letra: "Playpen Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --papel: #faf9f5;
  --trama: rgba(52, 64, 110, 0.13);
  --sombra-borde: rgba(40, 44, 60, 0.05);

  --azul: #2a4ab2;
  --rojo: #d23b38;
  --verde: #1b8545;
  --fino: #1e2c74;

  --ui: #272c38;
  --ui-suave: #6b7182;
  --vidrio: rgba(252, 251, 248, 0.8);
  --borde: rgba(39, 44, 56, 0.11);
  --roce: rgba(39, 44, 56, 0.07);
  --sombra: 0 1px 1px rgba(30, 34, 52, 0.04), 0 10px 30px -12px rgba(30, 34, 52, 0.22);

  --suave: cubic-bezier(0.22, 1, 0.36, 1);
  --seg-a: env(safe-area-inset-top, 0px);
  --seg-d: env(safe-area-inset-right, 0px);
  --seg-b: env(safe-area-inset-bottom, 0px);
  --seg-i: env(safe-area-inset-left, 0px);

  color-scheme: light;
}

:root[data-tema="oscuro"] {
  --papel: #14171c;
  --trama: rgba(190, 205, 255, 0.075);
  --sombra-borde: rgba(0, 0, 0, 0.35);

  --azul: #8eacff;
  --rojo: #ff8a80;
  --verde: #70d49a;
  --fino: #b7c3ea;

  --ui: #e8eaf1;
  --ui-suave: #9ba2b4;
  --vidrio: rgba(26, 30, 37, 0.78);
  --borde: rgba(255, 255, 255, 0.09);
  --roce: rgba(255, 255, 255, 0.07);
  --sombra: 0 1px 1px rgba(0, 0, 0, 0.2), 0 12px 32px -12px rgba(0, 0, 0, 0.7);

  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none; /* el zoom es el del mapa, no el de la página */
}

body {
  background: var(--papel);
  color: var(--ui);
  font-family: var(--letra);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.5s ease;
}

[hidden] { display: none !important; }

/* ── Escena ─────────────────────────────────────────────────────────────────── */

#escena {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

#trama {
  position: absolute;
  inset: 0;
  background-color: var(--papel);
  background-image: radial-gradient(circle, var(--trama) 1px, transparent 1.35px);
  transition: background-color 0.5s ease;
}

/* un borde apenas más oscuro, como el marco de la pizarra, y un velo arriba
   para que el título se lea aunque el mapa pase por debajo */
#escena::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--papel) 0, color-mix(in srgb, var(--papel) 70%, transparent) calc(46px + var(--seg-a)), transparent calc(84px + var(--seg-a))),
    radial-gradient(ellipse 85% 80% at 50% 48%, transparent 62%, var(--sombra-borde));
  transition: background 0.5s ease;
}

#lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
#lienzo.sobre-nodo { cursor: pointer; }
#lienzo.arrastrando { cursor: grabbing; }

/* ── Tintas ─────────────────────────────────────────────────────────────────── */

.t-azul { color: var(--azul); }
.t-rojo { color: var(--rojo); }
.t-verde { color: var(--verde); }
.t-fino { color: var(--fino); --grosor: 1.2; }
.entrada { --grosor: 2.3; }

.linea,
.etiqueta {
  fill: currentColor;
  font-family: var(--letra);
  letter-spacing: 0.035em;
  text-rendering: geometricPrecision;
}

.trazo {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--grosor, 1.75);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.punto {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
}

.tinte {
  fill: currentColor;
  fill-opacity: 0.07;
}

.linea tspan,
.pieza { transition: opacity 0.4s ease, color 0.5s ease; }

/* ── Seguir un hilo ─────────────────────────────────────────────────────────── */

.resalte {
  fill: currentColor;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nodo.foco .resalte { opacity: 0.09; }
.nodo:focus { outline: none; }
.nodo:focus-visible .resalte {
  opacity: 1;
  fill-opacity: 0.08;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-dasharray: 3.5 3;
}

.con-hilo .pieza:not(.en-hilo) { opacity: 0.14; }

/* ── Palabras con definición ────────────────────────────────────────────────── */

.subrayado-def {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 0.01 3.9;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.subrayado-def.vivo { stroke-dasharray: none; opacity: 1; }
.resalte-termino {
  fill: currentColor;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.resalte-termino.vivo { opacity: 0.13; }
.con-ficha .nodo.foco .resalte { opacity: 0; }

#ficha {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  width: min(380px, calc(100vw - 28px));
  outline: none;
  pointer-events: none;
}
#ficha .ficha-caja {
  position: relative;
  background: color-mix(in srgb, var(--papel) 94%, transparent);
  padding: 14px 16px 16px 18px;
  border-radius: 16px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transform-origin: 50% 100%;
  transition: opacity 0.2s ease, transform 0.28s var(--suave);
}
#ficha[data-lado="abajo"] .ficha-caja { transform-origin: 50% 0; transform: translateY(-6px) scale(0.97); }
#ficha[data-lado="derecha"] .ficha-caja { transform-origin: 0 50%; transform: translateX(-6px) scale(0.97); }
#ficha[data-lado="izquierda"] .ficha-caja { transform-origin: 100% 50%; transform: translateX(6px) scale(0.97); }
#ficha.abierta .ficha-caja { opacity: 1; transform: none; }
#ficha:focus-visible .ficha-caja { outline: 2px solid var(--tinta-ficha, var(--azul)); outline-offset: 2px; }

.ficha-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
#ficha h2 {
  margin: 4px 0 0;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--tinta-ficha, var(--azul));
}
#ficha-cerrar { width: 34px; height: 34px; margin: -4px -6px 0 0; color: var(--ui-suave); }
#ficha-cerrar svg { width: 18px; height: 18px; }
#ficha-cuerpo p {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ui);
  text-wrap: pretty;
}
#ficha-cuerpo .ficha-relevancia {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--borde);
}
.ficha-relevancia span {
  display: block;
  margin-bottom: 3px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-ficha, var(--azul));
}

/* el piquito que señala la palabra */
#ficha-pico {
  position: absolute;
  bottom: -6px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: color-mix(in srgb, var(--papel) 94%, transparent);
  border-right: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}
#ficha[data-lado="abajo"] #ficha-pico { bottom: auto; top: -6px; transform: rotate(225deg); }
#ficha[data-lado="derecha"] #ficha-pico { bottom: auto; left: -6px; margin: -6px 0 0; transform: rotate(135deg); }
#ficha[data-lado="izquierda"] #ficha-pico { bottom: auto; left: auto; right: -6px; margin: -6px 0 0; transform: rotate(-45deg); }
#ficha.abierta #ficha-pico { opacity: 1; }
#ficha-pico[hidden] { display: none; }

/* en pantallas chicas: una hoja abajo, sobre los controles */
#ficha.hoja {
  left: calc(10px + var(--seg-i));
  right: calc(10px + var(--seg-d));
  top: auto;
  bottom: calc(76px + var(--seg-b));
  width: auto;
  transform: none;
}
#ficha.hoja .ficha-caja {
  max-height: 46vh;
  overflow-y: auto;
  transform: translateY(14px);
}
#ficha.hoja.abierta .ficha-caja { transform: none; }
#ficha.hoja #ficha-pico { display: none; }

.brillo {
  fill: none;
  stroke: var(--papel);
  stroke-width: calc(var(--grosor, 1.75) * 0.5);
  stroke-linecap: round;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.con-hilo .flecha.en-hilo .brillo {
  opacity: 0.85;
  animation-name: fluir;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes fluir {
  from { stroke-dashoffset: var(--l); }
  to { stroke-dashoffset: 0; }
}

/* ── Paso a paso ────────────────────────────────────────────────────────────── */

.por-pasos .pieza:not(.actual) { opacity: 0.3; }
#mapa .pieza.oculto { opacity: 0; pointer-events: none; }

/* ── El dibujo original ─────────────────────────────────────────────────────── */

#original {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s var(--suave);
}
:root[data-tema="claro"] #original { mix-blend-mode: multiply; }
:root[data-tema="oscuro"] #original { clip-path: inset(0 round 12px); }
#mapa { transition: opacity 0.7s var(--suave); }
.ve-original #original { opacity: 1; }
.ve-original #mapa { opacity: 0; pointer-events: none; }

/* ── Interfaz ───────────────────────────────────────────────────────────────── */

.cromo,
#mini { z-index: 2; }

.cromo {
  opacity: 0;
  transition: opacity 0.8s ease 0.3s, transform 0.8s var(--suave) 0.3s;
}
.listo .cromo { opacity: 1; }

.vidrio {
  background: var(--vidrio);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  touch-action: manipulation;
}
button:disabled { cursor: default; opacity: 0.32; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.boton {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: var(--ui);
  transition: background-color 0.2s ease, transform 0.2s var(--suave), color 0.3s ease;
}
.boton:not(:disabled):hover { background: var(--roce); }
.boton:not(:disabled):active { transform: scale(0.92); }
.boton svg,
.pildora svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.boton.con-texto {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px 0 11px;
  font-size: 14px;
  font-weight: 450;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.boton[aria-pressed="true"] { background: var(--roce); }

#titulo {
  position: fixed;
  top: calc(17px + var(--seg-a));
  left: calc(22px + var(--seg-i));
  pointer-events: none;
  line-height: 1.25;
}
#titulo h1 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
#titulo p {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ui-suave);
  letter-spacing: 0.02em;
}
#autor {
  pointer-events: auto;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
#autor:hover {
  color: var(--ui);
  text-decoration-color: currentColor;
}

/* ES / EN: el idioma que se está leyendo, marcado */
#idioma {
  gap: 3px;
  padding: 0 12px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
#idioma span { color: var(--ui-suave); transition: color 0.2s ease; }
#idioma .barra { opacity: 0.55; }
:root[lang="es"] #idioma .es,
:root[lang="en"] #idioma .en { color: var(--ui); font-weight: 560; }

#arriba {
  position: fixed;
  top: calc(14px + var(--seg-a));
  right: calc(16px + var(--seg-d));
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
}

#tema .sol { display: none; }
:root[data-tema="oscuro"] #tema .sol { display: block; }
:root[data-tema="oscuro"] #tema .luna { display: none; }

#zoom {
  position: fixed;
  right: calc(16px + var(--seg-d));
  bottom: calc(18px + var(--seg-b));
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px;
  border-radius: 999px;
}

#pasos {
  position: fixed;
  left: 50%;
  bottom: calc(18px + var(--seg-b));
  transform: translateX(-50%);
}

.pildora {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 21px 0 16px;
  border-radius: 999px;
  background: var(--azul);
  color: var(--papel);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.015em;
  box-shadow: 0 1px 1px rgba(20, 30, 80, 0.1), 0 10px 24px -10px color-mix(in srgb, var(--azul) 70%, transparent);
  transition: transform 0.25s var(--suave), box-shadow 0.25s ease, background-color 0.5s ease, color 0.5s ease;
}
.pildora svg { width: 17px; height: 17px; fill: currentColor; stroke-width: 1.4; }
.pildora:hover { transform: translateY(-1px); }
.pildora:active { transform: scale(0.97); }

#andador {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 46px;
  padding: 0 3px;
  border-radius: 999px;
  overflow: hidden;
  animation: asomar 0.45s var(--suave);
}
#andador::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--azul);
  transform-origin: left;
  transform: scaleX(var(--avance, 0));
  transition: transform 0.6s var(--suave);
}
#cuenta {
  min-width: 70px;
  text-align: center;
  font-size: 14px;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
#siguiente {
  background: var(--azul);
  color: var(--papel);
}
#siguiente:not(:disabled):hover { background: color-mix(in srgb, var(--azul) 88%, var(--ui)); }
#siguiente .listo,
#siguiente.final .sigue { display: none; }
#siguiente.final .listo { display: block; }
#salir { color: var(--ui-suave); }

@keyframes asomar {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
}

#pista {
  position: fixed;
  left: 50%;
  bottom: calc(76px + var(--seg-b));
  margin: 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  transform: translate(-50%, 6px);
  padding: 6px 14px;
  border-radius: 16px;
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
  font-size: 13.5px;
  color: var(--ui-suave);
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s var(--suave);
}
.listo #pista.visible { opacity: 1; transform: translate(-50%, 0); }

#mini {
  position: fixed;
  left: calc(16px + var(--seg-i));
  bottom: calc(18px + var(--seg-b));
  width: 184px;
  padding: 5px;
  border-radius: 13px;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transform-origin: bottom left;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.45s var(--suave);
}
#mini.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
#mini-svg {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
  cursor: pointer;
}
.mini-trazo {
  fill: none;
  stroke: currentColor;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  opacity: 0.75;
}
.mini-texto { fill: currentColor; opacity: 0.5; }
#mini-mapa g { transition: opacity 0.4s ease; }
#mini-mapa g.futuro { opacity: 0.18; }
#visor {
  fill: color-mix(in srgb, var(--ui) 6%, transparent);
  stroke: var(--ui);
  stroke-opacity: 0.55;
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
}

.sin-js {
  display: block;
  max-width: 100%;
  margin: 80px auto;
}

/* ── Pantallas chicas ───────────────────────────────────────────────────────── */

@media (max-width: 640px), (max-height: 520px) {
  #titulo { top: calc(15px + var(--seg-a)); left: calc(16px + var(--seg-i)); }
  #titulo h1 { font-size: 14.5px; }
  #titulo p { font-size: 12px; }
  #arriba { top: calc(11px + var(--seg-a)); right: calc(10px + var(--seg-d)); }
  #acercar,
  #alejar { display: none; }
  #zoom { right: calc(10px + var(--seg-d)); bottom: calc(16px + var(--seg-b)); }
  #pasos { bottom: calc(16px + var(--seg-b)); }
  #mini { width: 86px; padding: 4px; border-radius: 11px; left: calc(10px + var(--seg-i)); bottom: calc(16px + var(--seg-b)); }
  .en-pasos #mini { opacity: 0; pointer-events: none; }
  #pista { bottom: calc(74px + var(--seg-b)); font-size: 13px; }
  .en-pasos #pista { display: none; }
}

@media (max-width: 640px) {
  #ver-original { width: 40px; padding: 0; justify-content: center; }
  #ver-original span { display: none; }
  #idioma { padding: 0 9px; }
  /* el título se parte en dos renglones antes de meterse debajo de los botones */
  #titulo { right: calc(182px + var(--seg-d)); }
  #titulo h1 { text-wrap: balance; }
}

@media (max-width: 380px) {
  #cuenta { min-width: 58px; }
  .pildora { padding: 0 18px 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .con-hilo .flecha.en-hilo .brillo { opacity: 0; animation: none; }
}