/* ============================================================
   LA PANTALLA DE LOS PADRES

   El escritorio del estudioso: la misma habitación ilustrada que el resto del
   sitio, con el informe leyéndose sobre papel.

   ── HERMANA DE `account/` ──
   Usa los MISMOS nombres de color y los mismos gestos (el papel crema, el botón
   de oro con labio que se hunde, el redondel de volver arriba a la izquierda).
   No comparte hoja con ella —esa carpeta la toca otro trabajo y un CSS a medias
   es la forma más rápida de romperle la suya—, pero un padre salta de una a
   otra en el mismo minuto y tienen que ser el mismo sitio.
   ============================================================ */
:root {
  --crema:  #fdf4dc;   /* el papel */
  --oro:    #fbd973;
  --oro-b:  #e0bb4d;   /* el labio del botón */
  /* EL CIELO, y esta variable hace DOS trabajos que conviene no separar: es el
     relleno mientras carga el fondo y el color de la barra del navegador, y es
     además el cielo que se prolonga por encima del dibujo cuando la ventana es
     más alta que ancha (ver `body::before`). Está medido sobre el borde
     superior del propio JPEG (#f3d788, plano de lado a lado): si algún día se
     cambia el paisaje hay que volver a medirlo, o aparecerá una raya horizontal
     justo donde empieza la imagen.

     Fue el marrón de la mesa (#402c1b) mientras el fondo era el escritorio del
     estudioso. Ese escritorio se fue a `achievements/` con los trofeos. */
  --bg:     #f3d788;
  --text:   #3b2f16;
  --muted:  #8a7550;
  --linea:  #e6d5ab;
  --radio:  20px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* `hidden` TIENE QUE GANAR, Y HACE FALTA EL `!important` PARA QUE GANE.
   El `[hidden] { display: none }` del navegador es una regla suya, y CUALQUIER
   regla de esta hoja le pasa por encima: basta con que un selector cualquiera
   diga `display` para que el atributo deje de esconder nada.

   No es hipotético — así se descubrió: `#ir-cuenta-pronto` es un `.principal`,
   `.principal` dice `display: block`, y el botón «Entrar con mi correo» salía
   en «Todavía no» con su `hidden` puesto, invitando a entrar a un padre que ya
   estaba dentro. Toda la pantalla se enseña y se esconde con este atributo
   (`ver()`, los pasos, las preguntas, media docena de botones), así que el fallo
   no era de ese botón: era de que aquí faltaba esta línea. */
[hidden] { display: none !important; }

/* El fondo va TAMBIÉN en `html`: sin esto, al rodar más allá del final del
   documento (el rebote de iOS) asoma el blanco del lienzo por debajo. */
html { background: var(--bg); }

body {
  margin: 0;
  color: var(--text);
  font: 17px/1.55 Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* SIN fondo propio: el color va en `html` y el dibujo en `body::before`. Con
     un color opaco aquí, la capa de detrás (z-index -1) queda tapada por él y
     la habitación no se ve. Pasó, y el sintoma es una pantalla marron entera. */
  background: transparent;
  min-height: 100%;
  min-height: 100dvh;
}

/* ── EL CAMINO ───────────────────────────────────────────────
   El paisaje: Quijotín y su caballo a la izquierda, Dulcinea a la derecha, y
   entre los dos un camino que se va hacia el sol. Es literalmente lo que cuenta
   esta pantalla, y por eso el vocabulario de aquí (crónicas, etapas, «el camino
   de X») dejó de ser una metáfora y pasó a estar dibujado.

   Va en una capa fija propia y NO con `background-attachment: fixed` en el
   body. Se probó así primero, que es como lo hace `account/`, y allí está bien
   porque sus fichas caben en una pantalla. Aquí no: la bitácora se rueda, y en
   iOS Safari `fixed` + `cover` dimensiona la imagen al alto del DOCUMENTO en
   vez de al de la ventana — con una hoja larga, el paisaje sale ampliado al
   triple y no se reconoce. Una capa `position: fixed` mide siempre la ventana.

   ── DOS ENCUADRES, Y ES OBLIGATORIO ──
   Esta imagen es APAISADA (1672×941) y lo que cuenta está en las dos esquinas
   de abajo: Quijotín a la izquierda, Dulcinea a la derecha. `cover` recorta por
   los lados, así que en un móvil de pie —414 de ancho contra 860 de alto— se
   queda con la franja central: se pierden LOS DOS, que son justamente el
   dibujo. Se midió: sólo sobrevive el 27% del ancho.

   Así que por debajo de 3/2 se deja de recortar. La imagen se pone a lo ancho,
   pegada abajo, y el cielo se prolonga hacia arriba con `background-color` — el
   borde superior del JPEG es plano de lado a lado (#f3d788) y la unión no se
   ve. Queda el paisaje entero como una franja de horizonte y cielo despejado
   encima, que además es donde cae la ficha de papel.

   El corte en 3/2 (1.5) y no en 1/1: la imagen es 1.78, y a 1.5 `cover` todavía
   enseña del 8% al 92% del ancho — los dos personajes entran justos. Por debajo
   ya no. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--bg);
  /* EL PAISAJE LO PONE LA VERTICAL, no esta hoja. Hasta el 27 de agosto de 2026
     aquí ponía `url('../art/fondos/camino-fondo.jpg')`, que funcionaba porque
     esta hoja vivía dentro de Quijotín. Al subirla al motor esa ruta pasó a
     apuntar a `/game_engine/art/…`, que no existe — el mismo tropiezo que ya
     costó un día con `categorias.css`.
     Cada vertical declara `--fondo-informe` en su propia página, donde la ruta
     se resuelve contra el DOCUMENTO y no contra esta hoja: ahí un `../art/…`
     relativo significa lo que uno espera. Sin arte, `none` y se queda el color
     de `--bg`, que es lo que hace que una vertical recién nacida no se vea
     rota, sólo sobria. */
  background-image: var(--fondo-informe, none);
  background-size: cover;
  background-position: 50% 100%;
  background-repeat: no-repeat;
}
@media (max-aspect-ratio: 3/2) {
  body::before { background-size: 100% auto; }
}

/* ── VOLVER AL MENÚ ──────────────────────────────────────────
   El mismo sitio y el mismo tamaño que en `account/` y que el botón de casa de
   los juegos: es el mismo gesto en todo el sitio. */
.volver {
  position: fixed;
  top:  max(18px, calc(env(safe-area-inset-top)  + 8px));
  left: max(18px, calc(env(safe-area-inset-left) + 8px));
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--crema); color: var(--muted);
  font-size: 22px; line-height: 1; text-decoration: none;
  box-shadow: 0 3px 10px rgba(90, 68, 22, .22);
  transition: transform .15s ease, color .15s ease;
  z-index: 10;
}
.volver:hover  { color: var(--text); }
.volver:active { transform: scale(.92); }

/* ── UN SOLO ANCHO ──────────────────────────────────────
   La hoja mide LO MISMO en todos los pasos.

   Antes no: las fichas de un mensaje corto iban a 30rem y la bitácora a 44rem,
   con un `:has()` en el `main` que cambiaba la medida según el paso visible. El
   razonamiento era bueno por dentro —cada cosa con su medida— y malo por fuera:
   pulsar una entrada cerrada y ver la hoja ENCOGERSE se lee como haber cambiado
   de sitio, no como haber cambiado de paso. Y en escritorio dejaba media
   pantalla sin usar en la mitad de las pantallas.

   La medida de lectura no se ha perdido, se ha bajado un nivel: la manda ahora
   el TEXTO dentro de la ficha (ver debajo), no la ficha dentro de la ventana.

   44rem y no más: fue 56 cuando la bitácora era una rejilla de tres columnas, y
   con la línea de tiempo —una sola columna— los renglones salían tan largos que
   costaba volver al principio del siguiente. */
main {
  width: 100%; max-width: 44rem; margin: 0 auto;
  padding: max(88px, calc(env(safe-area-inset-top) + 76px)) 18px
           max(28px, calc(env(safe-area-inset-bottom) + 22px));
}

/* ── EL PAPEL ────────────────────────────────────────────────
   Sombra larga y cálida: lo que despega la hoja del tablero. Sin ella el papel
   parece pintado sobre la mesa en vez de puesto encima. */
.ficha {
  background: var(--crema);
  border-radius: var(--radio);
  box-shadow: 0 14px 40px rgba(60, 34, 10, .42);
  padding: 30px 24px 26px;
  text-align: center;
}
.ficha.ancha { text-align: left; padding: 30px 26px 26px; }

h1 {
  font: 400 1.65rem/1.25 'Bree Serif', Georgia, serif;
  margin: 0 0 12px; letter-spacing: .01em;
}
h2 { font: 400 1.25rem/1.3 'Bree Serif', Georgia, serif; margin: 14px 0 6px; }
p  { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
.destacado { font-size: 1.06rem; font-weight: 700; }
.pie { color: var(--muted); font-size: .93rem; }

/* ── BOTONES ─────────────────────────────────────────────────
   Con labio sólido debajo, no con sombra difusa: es un botón de juguete y al
   pulsarlo se hunde. El mismo de `account/`. */
.principal {
  display: block; width: 100%;
  margin: 18px 0 12px;
  padding: 15px 22px;
  border: 0; border-radius: 999px; cursor: pointer;
  font: 700 1.06rem/1 Nunito, sans-serif;
  text-decoration: none; text-align: center;
  background: var(--oro); color: var(--text);
  box-shadow: 0 4px 0 var(--oro-b);
}
.principal:active { transform: translateY(2px); box-shadow: none; }
.principal[disabled] { opacity: .55; cursor: default; }
.enlace { color: var(--text); font-weight: 700; }

/* LA MEDIDA DE LECTURA, DENTRO DE LA FICHA.
   La hoja mide lo mismo en todos los pasos (ver `main` arriba), pero un párrafo
   de setecientos píxeles se pierde al volver a la izquierda. Así que lo que se
   estrecha es el TEXTO, centrado dentro de una hoja que no se mueve.

   Va sobre los hijos y no sobre la ficha porque estrechar la ficha sería volver
   a lo de antes. Y no toca a `.ancha` —la bitácora y las preguntas—, que son
   listas: ahí el ancho se aprovecha, no se sufre.

   `margin-left/right` sueltos y no un `margin` entero: cada hijo tiene el suyo
   vertical (`p`, `h1`, `.principal`) y un atajo se lo llevaría por delante. */
.ficha:not(.ancha) > * {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

/* La rueda gira despacio: una rápida transmite prisa, y aquí se está esperando
   a un modelo de lenguaje que tarda lo que tarda. */
.spinner {
  width: 46px; height: 46px; margin: 4px auto 18px;
  border: 4px solid var(--linea); border-top-color: var(--oro-b);
  border-radius: 50%; animation: vuelta 1.1s linear infinite;
}
@keyframes vuelta { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

/* ── EL INFORME ──────────────────────────────────────────────
   Un epígrafe con filete, como los apartados de un cuaderno. */
.cronica h3 {
  font: 400 .95rem/1.3 'Bree Serif', Georgia, serif;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
  margin: 26px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--linea);
}
.cronica h3:first-child { margin-top: 6px; }
.cronica p  { margin: 0 0 12px; }
.cronica ul { margin: 0; padding-left: 0; list-style: none; counter-reset: consejo; }
.cronica li {
  position: relative;
  padding: 13px 15px 13px 46px; margin-bottom: 10px;
  background: rgba(224, 187, 77, .13);
  border-radius: 14px;
}
/* El número del consejo, no una viñeta: son cosas que hacer, y en orden. */
.cronica li::before {
  counter-increment: consejo; content: counter(consejo);
  position: absolute; left: 13px; top: 12px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--oro); color: var(--text);
  font: 700 .82rem/24px Nunito, sans-serif; text-align: center;
  box-shadow: 0 2px 0 var(--oro-b);
}

/* ── LA BITÁCORA ─────────────────────────────────────────────
   Cada entrada es una etapa: cuándo se escribió, cuánta práctica abarca y de
   qué fue. Con eso se reconoce una de hace tres meses sin abrirla, que es todo
   lo que tiene que hacer una lista. */
/* UNA LÍNEA DE TIEMPO, no una rejilla. Estuvo en `grid` con dos o tres columnas
   en escritorio y era cómoda de mirar pero mentía sobre lo que es: unas crónicas
   son un camino, y en una rejilla «la siguiente» está a la derecha unas veces y
   abajo otras. En vertical, bajar es retroceder en el tiempo y no hay que
   explicarlo — lo más reciente arriba, lo más antiguo abajo, y la línea que las
   une dice que son la misma historia.

   Se paga en aprovechamiento de pantalla en escritorio, y se paga a gusto: son
   tres o cuatro entradas, no un listado. */
.bitacora {
  position: relative;
  list-style: none;
  margin: 22px 0 44px;   /* el hueco de abajo lo ocupa la cola de la línea */
  padding: 0 0 0 52px;   /* sitio para la línea y los nodos */
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}

/* La línea. Arranca en el centro del primer nodo y no en el borde de la lista:
   si sale de más arriba parece que viene de la nada. */
.bitacora::before {
  content: '';
  position: absolute;
  left: 17px; top: 26px; bottom: 0;
  width: 3px; border-radius: 3px;
  background: var(--oro-b);
}

/* La cola: la línea se deshace en puntos y acaba en una flecha. Dice «esto
   sigue» — que es verdad, van a llegar más crónicas— sin escribirlo. */
.bitacora::after {
  content: '';
  position: absolute;
  left: 12px; bottom: -40px;
  width: 13px; height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 44'%3E%3Cpath d='M6 0 V30' stroke='%23e0bb4d' stroke-width='3' stroke-dasharray='5 6' stroke-linecap='round'/%3E%3Cpolygon points='6,44 0.5,32 11.5,32' fill='%23e0bb4d'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* HIJOS DIRECTOS, y no es un detalle de estilo: desde que la crónica se
   despliega dentro de la entrada, hay más `<li>` ahí abajo —los consejos de
   «qué hacer esta semana»—. Sin el `>`, cada consejo se llevaba el disco del
   timeline colgando a -52px, recortado a media luna por el `overflow: hidden`
   de la tarjeta. */
.bitacora > li { margin: 0; position: relative; }

/* El nodo: disco oscuro con la MISMA estrella que las tarjetas del menú y los
   trofeos, dentro de un aro de oro. Es un dibujo de CSS y no una imagen — pesa
   cero y escala sin pixelarse. */
.bitacora > li::before {
  content: '';
  position: absolute;
  left: -52px; top: 14px;
  width: 35px; height: 35px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 64.1,30.6 97.6,34.5 72.8,57.4 79.4,90.5 50,74 20.6,90.5 27.2,57.4 2.4,34.5 35.9,30.6' fill='%23fdf4dc'/%3E%3C/svg%3E") center / 46% 46% no-repeat,
    radial-gradient(circle at 50% 34%, #6d4c1f, #402a0e);
  box-shadow: 0 0 0 3px var(--oro), 0 0 0 4px rgba(120, 84, 24, .55),
              0 3px 8px rgba(40, 22, 8, .45);
}
.bitacora button { height: 100%; }

/* EL NODO DE UNA ETAPA CERRADA: candado en vez de estrella.
   Se conserva el aro de oro y no se apaga: el aro es la línea del camino y el
   camino no se interrumpe porque una etapa esté cerrada — lo que está cerrado es
   la etapa, no el viaje. Lo que cambia es el disco, más apagado, y el dibujo.
   Probado al revés (aro gris) y el efecto era el contrario: parecía que ahí se
   acababa todo. */
/* Sólo las entradas ESCRITAS pueden estar cerradas. Había aquí un `li.sellada`
   —la etapa que venía, cerrada y sin escribir— y se fue con ella: desde que las
   crónicas se escriben pague quien pague, lo que hay arriba está escribiéndose,
   no esperando a que alguien pase por caja. */
.bitacora > li.cerrada::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M34 46V30a16 16 0 0 1 32 0v16' fill='none' stroke='%23f0e2bd' stroke-width='11'/%3E%3Crect x='21' y='40' width='58' height='42' rx='9' fill='%23f0e2bd'/%3E%3C/svg%3E") center / 40% 40% no-repeat,
    radial-gradient(circle at 50% 34%, #5b4426, #33240f);
}

/* En un móvil estrecho la sangría de la línea se come el ancho de la tarjeta:
   a 354px dejaba 214 para el texto, unos veinticinco caracteres por línea. El
   nodo encoge y la sangría con él — la línea de tiempo se sigue leyendo igual y
   la tarjeta recupera catorce píxeles, que ahí se notan. */
@media (max-width: 26rem) {
  .bitacora { padding-left: 38px; }
  .bitacora::before { left: 12px; }
  .bitacora::after  { left: 7px; }
  .bitacora > li::before {
    left: -38px; top: 15px;
    width: 27px; height: 27px;
    box-shadow: 0 0 0 2px var(--oro), 0 0 0 3px rgba(120, 84, 24, .55),
                0 2px 6px rgba(40, 22, 8, .45);
  }
}
/* La caja con borde es la TARJETA, no el botón: así la crónica desplegada cae
   dentro de la misma tarjeta y no como un cajón pegado debajo. */
/* El bloque suelto, en las pantallas que no son la bitácora. La lista es la
   MISMA (`.bitacora`), así que hereda la línea de tiempo y los nodos; lo único
   que cambia es que aquí va dentro de una ficha y necesita menos aire. */
.hitos { margin-top: 22px; text-align: left; }
/* Aquí vivía `.rotulo-hitos`, el «Y esto ya lo ha conseguido:» de encima de la
   lista. Se retiró el 29 de agosto de 2026 con su nodo: los medallones ya
   dicen eso, y su margen inferior de 4px es lo que ahora se lo queda la lista
   con el `margin-top` de abajo. */
.bitacora.solo-hitos { margin: 14px 0 2px; }
/* Sin la cola de la línea. En la bitácora, esa punta dice «el camino sigue» y
   tiene 44px de aire debajo para ella; aquí la lista acaba donde acaba la
   ficha, así que la punta se salía por el borde de abajo y parecía un fallo de
   maquetación. Lo que sigue el camino allí, aquí lo dice el botón de entrar. */
.bitacora.solo-hitos::after { display: none; }

/* ── LOS HITOS DE SUBIDA DE PELDAÑO ──────────────────────────────────────
   Comparten la línea de tiempo con las crónicas y NO se parecen a ellas, que
   es todo el diseño: la crónica es una tarjeta con borde que se abre; esto es
   una línea suelta sobre el papel, sin caja y sin nada que pulsar. La forma
   dice qué se puede hacer con cada cosa antes de leer una palabra.

   El nodo de la línea es una FLECHA y no la estrella de las crónicas. Podría
   llevar la cifra del peldaño —`content: attr(data-n)` lo permite— y se
   descartó: un día con dos juegos subidos tiene dos cifras y el nodo sólo puede
   enseñar una, así que estaría diciendo a medias algo que las líneas de dentro
   dicen entero. */
.bitacora > li.hito::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 16 L82 54 H62 V86 H38 V54 H18 Z' fill='%23fdf4dc'/%3E%3C/svg%3E") center / 44% 44% no-repeat,
    radial-gradient(circle at 50% 34%, #6d4c1f, #402a0e);
}
.bitacora > li.hito { padding: 8px 0 10px; }
/* La fecha del hito es la MISMA píldora que la de una crónica, pero apagada:
   el mismo dibujo dice «esto es una fecha de la misma línea», y el tono más
   bajo dice «pero esto no es una crónica». Hereda `display:inline-block` de
   `.bitacora .cuando` y ahí está la gracia — puesta en `block` se estiraba de
   lado a lado y parecía la cabecera de una tarjeta vacía. */
.bitacora > li.hito .cuando {
  background: rgba(224, 187, 77, .20);
  font-size: .92rem;
  color: var(--muted);
  margin-bottom: 9px;
}
.bitacora .saltos {
  list-style: none; margin: 0;
  /* Los 12 px que el recuadro del parte vuelve a sacar con su margen negativo.
     Puestos AQUÍ y no en la fila que se abre: si sólo se metiera la que tiene
     parte, las líneas de un mismo día quedarían desalineadas entre ellas, que
     se ve mucho más que el paso de doce píxeles. */
  padding: 0 12px;
  display: grid; gap: 9px;
}
.bitacora .saltos > li { display: flex; align-items: center; gap: 11px; }

/* El medallón: el MISMO que la tarjeta del menú y el de la pantalla de fin —
   disco oscuro y la cifra en oro—, en pequeño. Que sea el mismo dibujo es lo
   que hace que el padre y la niña estén hablando de lo mismo cuando ella dice
   «voy por el nueve». Aquí no lleva aro de progreso: el aro cuenta cuánto falta
   del juego, y esta línea habla de un momento, no de un estado. */
.bitacora .medalla {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center; place-content: center;
  border-radius: 50%;
  background: #241505;
  color: var(--oro);
  font-size: 1.05rem; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px rgba(120, 84, 24, .55), 0 2px 6px rgba(40, 22, 8, .35);
}
.bitacora .saltos .que { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bitacora .saltos b { font-weight: 700; }
/* El emoji del juego, el mismo que lleva su tarjeta en el menú: es como se
   reconoce un juego aquí dentro sin leer su nombre entero. */
.bitacora .saltos .emoji { margin-right: 6px; font-style: normal; }
.bitacora .saltos .salto { color: var(--muted); font-size: .86rem; }

.bitacora .tarjeta {
  background: rgba(224, 187, 77, .12);
  border: 1px solid var(--linea); border-radius: 16px;
  transition: background .15s ease, border-color .15s ease;
  overflow: hidden;
}
.bitacora .tarjeta:hover { background: rgba(224, 187, 77, .22); border-color: var(--oro-b); }
.bitacora .tarjeta.abierta {
  background: rgba(224, 187, 77, .20);
  border-color: var(--oro-b);
}
.bitacora button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: var(--text);
  background: none; border: 0; border-radius: 16px;
  padding: 16px 18px;
}
.bitacora button:active { transform: translateY(1px); }

/* Abierta, el resumen recortado sobra: lo primero de la crónica es «En corto»,
   que dice lo mismo entero dos centímetros más abajo. */
.tarjeta.abierta .resumen { display: none; }

/* EL PANEL. Separado de la cabecera por un filete, no por un hueco: tiene que
   leerse como la continuación de esa entrada y no como otra cosa debajo. */
.cronica {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--linea);
  margin-top: 2px;
  animation: despliega .18s ease-out;
}
@keyframes despliega { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .cronica { animation: none; } }
.cargando-cronica { color: var(--muted); font-size: .93rem; margin: 14px 0 4px; }

/* La fecha manda: es por lo que se busca una entrada. En píldora para que se
   lea como la marca de la etapa y no como la primera línea del texto. */
.bitacora .cuando {
  display: inline-block;
  background: rgba(224, 187, 77, .38);
  border-radius: 999px;
  padding: 3px 13px;
  font: 400 1.02rem/1.3 'Bree Serif', Georgia, serif;
  margin-bottom: 7px;
}
/* Cuánta práctica hay detrás. Va en pequeño porque es contexto, no titular —
   pero tiene que estar: sin esto, dos entradas seguidas parecen lo mismo. */
.bitacora .cuanto {
  display: block; color: var(--muted); font-size: .88rem; margin-bottom: 9px;
}
.bitacora .titulo { display: block; font-weight: 700; margin-bottom: 4px; }
.bitacora .resumen {
  color: var(--muted); font-size: .93rem; line-height: 1.45;
  /* Dos líneas: aquí sólo sirve para reconocer la entrada. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* La más reciente. En rejilla hacía falta un filo a la izquierda porque «la
   primera» no era «la de arriba»; en la línea de tiempo sí lo es, así que basta
   con que su tarjeta pese un poco más. */
.bitacora .tarjeta.ultima {
  border-color: var(--oro-b);
  background: rgba(224, 187, 77, .22);
}

/* ── LA ETAPA QUE VIENE ──────────────────────────────────────
   La primera de la línea, y la única que todavía no está escrita. Antes era un
   recuadro suelto encima de la lista (`#eco-nuevo`); vive dentro desde que puede
   estar cerrada, porque un candado fuera de la línea de tiempo no se lee como
   «lo que viene después». Pesa más que las demás —fondo de oro y borde vivo—
   porque es lo único con lo que el padre puede hacer algo ahora. */
.bitacora .tarjeta.nueva {
  background: rgba(224, 187, 77, .22);
  border-color: var(--oro-b);
}
/* NO se ilumina al pasar por encima. La tarjeta de arriba no es pulsable —se
   está escribiendo sola— y sin esto se encendía prometiendo un clic que no
   existe. (Cuando llevaba botón, lo pulsable era el botón, no la tarjeta; el
   efecto era el mismo error.) */
.bitacora .tarjeta.nueva:hover {
  background: rgba(224, 187, 77, .22);
  border-color: var(--oro-b);
}

/* LA RUEDA, dentro del titular y no encima: la tarjeta es estrecha y una rueda
   centrada arriba la partiría en dos. Al lado del texto se lee como una sola
   frase que está pasando ahora. Reusa el `@keyframes vuelta` de la rueda grande
   de los pasos, que gira despacio a propósito — aquí se espera a un modelo de
   lenguaje que tarda lo que tarda, y una rueda rápida transmite prisa. */
.bitacora .escribiendo .cuerpo h2 {
  display: flex; align-items: center; gap: 10px;
}
.bitacora .escribiendo .cuerpo h2::before {
  content: '';
  width: 17px; height: 17px; flex: 0 0 auto;
  border: 3px solid var(--linea); border-top-color: var(--oro-b);
  border-radius: 50%;
  animation: vuelta 1.1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bitacora .escribiendo .cuerpo h2::before { animation-duration: 3s; }
}

/* Rota. El oro se apaga: es la única tarjeta de la lista que no promete nada, y
   dejarla dorada la haría competir con las que sí se pueden leer. */
.bitacora .fallida .tarjeta.nueva,
.bitacora .fallida .tarjeta.nueva:hover {
  background: rgba(168, 68, 43, .09);
  border-color: rgba(168, 68, 43, .30);
}
.bitacora .tarjeta.nueva .cuerpo { padding: 16px 18px; }
.bitacora .tarjeta.nueva h2 { font: 400 1.2rem/1.3 'Bree Serif', Georgia, serif; margin: 0 0 6px; }
.bitacora .tarjeta.nueva p  { margin: 0 0 4px; font-size: .96rem; }
.bitacora .tarjeta.nueva .principal { width: auto; display: inline-block; margin: 12px 0 0; }

/* ── UNA ETAPA CERRADA ───────────────────────────────────────
   Se enseña ENTERA salvo el cuerpo: fecha, título y las dos líneas del resumen.
   Esconderla del todo sería esconder lo que se vende.

   El borde a rayas es lo que la distingue, y no un candado grande ni un fondo
   gris: a rayas se lee «esto todavía no está cerrado del todo» —falta poco, se
   puede— mientras que apagarla la haría parecer estropeada. El fondo baja un
   punto y los textos pasan a tinta suave; el titular NO, que es lo que tiene que
   dar ganas de abrirla. */
.bitacora .tarjeta.cerrada {
  background: rgba(224, 187, 77, .07);
  border-style: dashed;
}
.bitacora .tarjeta.cerrada:hover {
  background: rgba(224, 187, 77, .17);
  border-color: var(--oro-b);
}
.bitacora .tarjeta.cerrada .cuando {
  background: rgba(138, 117, 80, .18);
  color: var(--muted);
}
.bitacora .tarjeta.cerrada .cuanto,
.bitacora .tarjeta.cerrada .resumen { color: var(--muted); }

/* Y se DICE por qué está cerrada. Un candado a secas obliga a adivinar, y lo
   que se adivina en una pantalla donde se paga suele ser lo peor: «esto ya no
   es gratis», «me han cortado el juego». Con la frase, el padre sabe qué pasa
   si pulsa antes de pulsar — que es lo mínimo antes de llevarle a una pasarela. */
.bitacora .candado {
  display: block; margin-top: 11px; padding-left: 19px; position: relative;
  color: var(--muted); font-size: .84rem; font-weight: 700;
}
.bitacora .candado::before {
  content: '';
  position: absolute; left: 0; top: 1px;
  width: 13px; height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M34 46V30a16 16 0 0 1 32 0v16' fill='none' stroke='%238a7550' stroke-width='11'/%3E%3Crect x='21' y='40' width='58' height='42' rx='9' fill='%238a7550'/%3E%3C/svg%3E") center / contain no-repeat;
}

.volver-lista { margin: 0 0 6px; }
.volver-lista.arriba { margin-bottom: 14px; }
.volver-lista button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--text); text-decoration: underline;
}

/* Leyendo uno viejo, el papel se avisa a sí mismo. Sin esto se confunde con el
   de hoy y el padre saca conclusiones de hace un mes. */
.viejo {
  background: rgba(168, 68, 43, .10);
  border: 1px solid rgba(168, 68, 43, .28);
  border-radius: 12px; padding: 11px 14px; margin: 0 0 18px;
  font-size: .93rem;
}

/* ── EL ACUSE DEL PAGO ───────────────────────────────────
   Una nota pegada encima de lo que toque enseñar, no un paso propio: el padre
   que acaba de pagar quiere ver SU CAMINO, no una pantalla intermedia dándole
   las gracias. Se lee de refilón y se sigue.

   Verde y no oro: el oro es el color de «esto se puede pulsar» en todo el
   sitio, y esto no se pulsa. */
.pagado {
  max-width: 44rem;
  margin: 0 auto 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #dff0d3;
  border: 2px solid #b6d8a4;
  color: #2f5a25;
  font-weight: 700;
  text-align: center;
}
.pagado[hidden] { display: none; }

/* ── EL PIE: SOBRE Y AVISO LEGAL ─────────────────────────────
   Aquí vivían la vitrina entera y las estrellas talladas. Se han MOVIDO a
   `achievements/logros.css` — no copiado: de esta hoja han desaparecido, y con ellas
   el `translateX` que sacaba la rejilla fuera de la columna del texto (allí es
   la página entera y no hace falta). Luego quedó la puerta a `achievements/` ocupando
   el hueco, y también se ha ido: a la vitrina se entra por la chapa del menú.

   Lo que hay ahora es el pie. Hereda la pastilla de aquella puerta, y por el
   mismo motivo: el fondo de aquí es un paisaje claro con degradado, y un texto
   sobre el cielo se lee en el móvil pero se pierde en escritorio, donde cae
   encima de las colinas. De paso saca a `sobre/` y a `legal/` del renglón de
   letra pequeña en el que un padre no pulsa. */
.pies {
  display: flex;
  flex-wrap: wrap;   /* en el móvil caen una debajo de otra, no se aprietan */
  justify-content: center;
  gap: 10px;
  max-width: 46rem;
  margin: 22px auto 32px;
}
.pies a {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--crema);
  box-shadow: 0 3px 10px rgba(90, 68, 22, .28);
  color: var(--text);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}
.pies a:active { transform: translateY(1px); }

/* Un enlace que es un `<button>`: la salida sin pagar de la puerta de pagar. No
   puede ser un `<a>` porque no navega a ningún sitio — repinta la bitácora que
   ya está en memoria—, y un `href="#"` dejaría una almohadilla en la barra que
   al recargar no lleva a donde estaba. */
button.enlace {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700;
  color: var(--text); text-decoration: underline;
  -webkit-tap-highlight-color: transparent;
}

/* ── LAS PREGUNTAS ───────────────────────────────────────────
   Salen SÓLO debajo de la puerta de pagar (`ver()` las engancha a ese paso).
   `<details>` del navegador: se abren con el teclado, las lee un lector de
   pantalla y no cuestan una línea de JavaScript. */
.preguntas { margin-top: 18px; }
.preguntas h2 {
  margin: 0 0 6px;
  font: 400 1.35rem/1.3 'Bree Serif', Georgia, serif;
}
.preguntas details {
  border-bottom: 1px solid var(--linea);
}
.preguntas details:last-of-type { border-bottom: 0; }
.preguntas summary {
  cursor: pointer;
  list-style: none;              /* fuera el triangulito del navegador */
  padding: 14px 34px 14px 0;
  position: relative;
  font-weight: 700;
}
.preguntas summary::-webkit-details-marker { display: none; }
/* Un signo propio: una crucecita que gira a menos al abrirse. Dos rayas hechas
   con un degradado, sin imagen y sin otro elemento. */
.preguntas summary::after {
  content: '';
  position: absolute; right: 4px; top: 50%;
  width: 15px; height: 15px; margin-top: -7px;
  background:
    linear-gradient(var(--oro-b), var(--oro-b)) center / 15px 3px no-repeat,
    linear-gradient(var(--oro-b), var(--oro-b)) center / 3px 15px no-repeat;
  transition: transform .18s ease-out;
}
/* Abierta, el signo pasa de «+» a «−» girando. Se conserva la capa VERTICAL y
   no la horizontal: al girar 90° la vertical es la que acaba tumbada. Con la
   otra el signo se quedaba de pie, como una barra. */
.preguntas details[open] summary::after {
  transform: rotate(90deg);
  background-size: 0 0, 3px 15px;
}
.preguntas summary:hover { color: #6b4a1d; }
.preguntas details p {
  margin: 0 0 14px; padding-right: 34px;
  color: var(--muted); line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) { .preguntas summary::after { transition: none; } }


/* ── LO QUE HAY ESPERANDO, EN LA PANTALLA DE ENTRAR ──────────────────────
   Una línea por crónica escrita, con su candado. No es la bitácora de verdad
   —ésa es `#paso-bitacora`, con su texto y sus paneles— sino su silueta: lo
   justo para que se vea CUÁNTAS hay y desde cuándo.

   Deliberadamente sosa. Si esto se pareciera demasiado a la bitácora abierta,
   el padre creería que ya la está viendo y se iría. Tiene que leerse como una
   puerta cerrada, no como una lista. */
#cerradas { margin: 1.4rem 0 .2rem; text-align: left; }

.rotulo-cerradas {
  margin: 0 0 .5rem;
  font-weight: 700;
  font-size: .95rem;
}

#lista-cerradas { list-style: none; margin: 0; padding: 0; }

#lista-cerradas li { margin-bottom: .35rem; }

/* La fila entera es el enlace, no un trocito de ella: el objetivo de un dedo
   en una tableta tiene que ser la caja, no las tres palabras del medio. */
#lista-cerradas .cerrada {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .5rem .7rem;
  border-radius: 10px;
  /* El fondo apagado es el mensaje: esto está cerrado. Va con `color-mix` sobre
     el color del texto para que siga funcionando si cambia la paleta. */
  background: color-mix(in srgb, currentColor 6%, transparent);
  font-size: .9rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
}

#lista-cerradas .cerrada:hover,
#lista-cerradas .cerrada:focus-visible {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

#lista-cerradas .candado { flex: 0 0 auto; opacity: .55; }
#lista-cerradas .cuando  { flex: 1 1 auto; font-weight: 700; }
#lista-cerradas .cuanto  { flex: 0 0 auto; opacity: .7; font-size: .85em; }

/* ── EL RESUMEN DE LA PRIMERA PARTIDA ────────────────────────────────────
   Tres cifras grandes y una lista de juegos, en la pantalla de «todavía no».

   Las cifras van GRANDES a propósito y sin caja: son lo único de esta
   pantalla que es un hecho sobre su hija, y compiten con un titular que dice
   «todavía no». Metidas en letra de párrafo se leen como una disculpa.

   El `grid` con `auto-fit` y no tres columnas fijas: en japonés los rótulos
   son más anchos («練習した日数») y en un móvil estrecho tres columnas dejaban
   la cifra partida en dos líneas. */
.resumen { margin-top: 20px; text-align: left; }
.resumen .rotulo-resumen {
  margin: 0 0 10px; color: var(--muted); font-size: .92rem; text-align: center;
}
.resumen .cifras {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px;
}
.resumen .cifras li {
  text-align: center; padding: 10px 6px;
  border: 2px solid var(--linea); border-radius: 14px; background: rgba(255,255,255,.45);
}
.resumen .cifras b {
  display: block; font-family: "Bree Serif", Georgia, serif; font-weight: 400;
  font-size: 1.55rem; line-height: 1.1; color: var(--text);
}
.resumen .cifras span { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
/* Aquí vivía `.resumen .juegos`: «Ha jugado a X (nivel 4 de 15), Y…», en una
   línea corrida. Se retiró el 29 de agosto de 2026 — lo decían mejor los
   medallones de los hitos, tres centímetros más abajo, y la lista iba cortada a
   cuatro sin avisar de que estaba cortada. Ver `pintaResumen()`. */
.resumen .crece { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.5; }

/* ── EL PARTE, DENTRO DE SU SUBIDA ────────────────────────────────────────
   El parte se escribe cuando el niño sube de peldaño y se lee en el iPad, en
   la pantalla del trofeo. Aquí es la segunda vez: el padre que quiere volver a
   leerlo lo encuentra donde ocurrió, dentro de la línea de esa subida, y no en
   una entrada aparte que tendría que casar con la vista.

   POR ESO NO ES UNA TARJETA. Las tarjetas de esta pantalla son las crónicas —
   lo que se compra— y ya se distinguen de los hitos por su forma. Un tercer
   objeto con borde competiría con ellas justo en lo que hay que leer de un
   vistazo. Esto es un pliegue de la propia línea: mismo papel, un poco más
   claro, y a la izquierda una raya que lo ata a su subida. */
/* La línea que se abre. Es un BOTÓN que ocupa la fila entera y no se parece a
   uno: el gesto es el mismo que el de una crónica —se pulsa la entrada y se
   despliega—, así que no hace falta enseñar un objeto nuevo. Hay que apagarle a
   mano lo que le llega de `.bitacora button`, que está escrito para los botones
   de verdad de esta pantalla. */
.bitacora .saltos .linea {
  display: flex; align-items: center; gap: 11px;
  width: 100%; height: auto;
  /* El hueco va SIEMPRE, aunque en reposo no se vea nada: sin él, el relleno
     del hover aparecía pegado al texto y cortando el medallón por la mitad —un
     rectángulo suelto detrás de la línea, que es justo lo que no se quería. */
  /* Sale los MISMOS 12 px que `.saltos` se ha metido, así que su borde cae
     exactamente donde cae el de una tarjeta de crónica. Sobresalir aunque sean
     doce píxeles se nota: la línea parecía más ancha que las crónicas de
     arriba y de abajo, y una lista donde un elemento se sale del margen se lee
     como un fallo de maquetación aunque sea a propósito. */
  margin: 0 -12px; padding: 7px 12px; width: calc(100% + 24px);
  /* Transparente y CON borde del mismo color: así al encenderse no se mueve ni
     un píxel. Un borde que aparece de la nada empuja el texto un punto, y en una
     lista de líneas iguales ese salto se ve muchísimo. */
  border: 1px solid transparent; border-radius: 14px;
  background: none; box-shadow: none;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
/* Los mismos dos valores que `.bitacora .tarjeta`, y a propósito: una crónica y
   un parte son las dos cosas que se abren en esta pantalla, así que tienen que
   encenderse igual. En reposo se siguen distinguiendo —la crónica es una
   tarjeta siempre, esto es una línea— y al tocarlas se parecen, que es cuando
   hacen lo mismo. */
.bitacora .saltos .linea:hover {
  background: rgba(224, 187, 77, .22);
  border-color: var(--oro-b);
}
.bitacora .saltos .linea[aria-expanded="true"] {
  background: rgba(224, 187, 77, .20);
  border-color: var(--oro-b);
}
.bitacora .saltos .linea:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.bitacora .saltos .linea:active { transform: none; }
/* La flecha, al final de la línea y separada por el `auto`: es lo único que
   dice que esto se despliega, y hace falta porque los hitos de al lado —los que
   no tienen parte— no se abren. */
.bitacora .saltos .linea::after {
  content: "▾";
  margin-left: auto;
  flex: none;
  color: var(--muted);
  transition: transform .18s ease;
}
.bitacora .saltos .linea[aria-expanded="true"]::after { transform: rotate(180deg); }
.bitacora .saltos li.con-parte { display: block; }

.bitacora .parte {
  margin: 9px 0 2px;
  padding: 12px 14px 14px;
  border-left: 3px solid var(--oro-b);
  border-radius: 4px 12px 12px 4px;
  background: rgba(253, 244, 220, .75);
}
/* Del navegador, y NO es redundante: cualquier selector de clase le gana a
   `[hidden]`, y este bloque declara `padding` y `background`. Es la misma
   trampa que ya mordió a `.principal` aquí y a `.gate-veil` en `gate.js`; en
   esta hoja hay un `[hidden]{display:none !important}` global desde entonces,
   y esto lo deja dicho también en su sitio para quien lea sólo este bloque. */
.bitacora .parte[hidden] { display: none; }

.bitacora .parte h3 {
  margin: 0 0 10px;
  font-size: 1.02rem; line-height: 1.3; font-weight: 800;
  color: var(--text);
}
.bitacora .parte dl { margin: 0; }
.bitacora .parte dt {
  margin-top: 11px;
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 800; color: var(--muted);
}
.bitacora .parte dt:first-of-type { margin-top: 0; }
.bitacora .parte dd {
  margin: 2px 0 0;
  font-size: .93rem; line-height: 1.5;
}

/* El medallón ya no se va al centro del bloque abierto, y no ha hecho falta un
   `:has()`: con la fila en `display:block` el medallón vive DENTRO del botón,
   así que se centra con su propia línea y no con el parte desplegado debajo. */