/* ══════════════════════════════════════════════════════════════════════════
   KORA · EL EDITOR SE VISTE DE DICIEMBRE — 22 sep 2026

   Vivi, cuarto comentario de la tanda: «que el libro se sienta más navideño
   en el editor».

   OJO CON LA CONTRADICCIÓN APARENTE: css/kora-navidad.css —la repisa, la
   página donde se COMPRA— dice, con todas sus letras, «sin rojo ni verde de
   Navidad, a propósito». Y sigue siendo verdad allá: una página de catálogo
   pintada de rojo se ve de plantilla y contradice al libro, que no cuenta una
   Navidad genérica. Aquí es al revés. El editor no vende nada: es el rato en
   que una familia se sienta a hacer SU libro de diciembre, y ese rato debe
   oler a diciembre. Son dos cuartos distintos de la misma casa.

   TRES REGLAS PARA NO PASARSE:
   · LA HOJA NO SE TOCA. Ni un color, ni un adorno, ni un margen del spread.
     Lo que se ve dentro del libro es lo que se imprime, y el editor no puede
     enseñar una cosa y mandar otra a la imprenta. Todo lo de aquí vive en el
     MARCO: el fondo del editor, el riel de capítulos y el panel lateral.
   · EL ADORNO ES SUYO. Nada de emojis ni de clip-art: los acebos son recortes
     de su propia lámina (`Navidad 08- Green decor`), la misma acuarela que
     está dentro del libro. Por eso pega.
   · SOLO EN LOS LIBROS DE DICIEMBRE. Cuelga de `body.nav-mode`, que el editor
     pone cuando el TÍTULO trae `coverEstilo:'navidad'` (js/app.js,
     `marcaCarton`). Un libro de primer año abre exactamente igual que ayer.

   Se carga al final, después de kora-esencial.css.
   ══════════════════════════════════════════════════════════════════════════ */

body.nav-mode{
  --nv-pino:#3F5B43;        /* el verde de las hojas de su acebo */
  --nv-guinda:#871400;      /* el mismo rojo que ya usa el botón de avanzar */
  --nv-mesa:#C5CEB8;        /* el fondo del editor: arena con pino encima */
}

/* ── EL FONDO DEL EDITOR ───────────────────────────────────────────────────
   El arena de siempre (#DAD3C4) con el verde encima: sigue siendo un tono
   apagado de acuarela —no un verde de plástico— pero ya no es neutral, y hace
   que las hojas color crema del libro se vean más blancas de lo que se veían.
   La sombra del spread se calienta para que no quede gris sobre verde. */
body.nav-mode #s2{ background:var(--nv-mesa); position:relative }

/* ── LA TINTA, SOBRE EL VERDE ──────────────────────────────── 23 sep 2026
   Vivi: «vamos a revisar los colores del texto en la versión navideña, pues
   con este fondo verde (que me gustó mucho) se pierde un poco y no está tan
   legible».

   Medido, no a ojo. Sobre el verde (#C5CEB8) los tonos de la casa daban:
     ✓ guardado en este dispositivo … 1.75   ← verde sobre verde
     FIJAR CAPÍTULO / opcional ……… 1.98
     los rótulos de sección ………… 2.08
     el lede del capítulo ………… 3.69
     Ver libro completo / ← Anterior  3.43 y 4.33
   El mínimo legible para texto chico es 4.5. Ninguno llegaba.

   NO SE ARREGLA SELECTOR POR SELECTOR: se vuelven a declarar los TONOS dentro
   del editor. Así lo hereda todo lo que ya los usa —y lo que se escriba
   mañana—, en vez de una lista de excepciones que se queda corta a la primera.
   Los nuevos dan 4.8 (texto) y 6.1 (etiquetas) sobre este verde; el sage pasa
   a pino, que además es el verde de su acebo y sube de 1.75 a 4.6.
   Y SOLO DENTRO DE #s2: fuera hay fondos blancos donde estos tonos serían
   innecesariamente oscuros. */
body.nav-mode #s2{
  --taupe:#5A5044;      /* texto secundario · 4.84 sobre el verde */
  --sand:#4A4136;       /* etiquetas y rótulos chiquitos · 6.13 */
  --clay:#5A5044;       /* los enlaces del encabezado · 4.84 */
  --sage:var(--nv-pino);/* el ✓ de guardado y de capítulo escrito · 4.63 */
}
/* Estos dos traen su color a mano, no por token, así que no se enteran de lo
   de arriba: el lede del capítulo (#6E6152 · 3.69) y «← Anterior» (#625749 ·
   4.33). Se les dice aquí, y con el mismo tono que a todo lo demás. */
body.nav-mode #s2 .pq-lede,
body.nav-mode #s2 .sn-corner{ color:var(--taupe) }
/* El contador de versiones se me quedó en taupe sobre blanco a 11.5 px —3.26—
   cuando lo mudé al panel. Ahí el verde no tiene nada que ver: es un descuido
   mío y se arregla para todos los libros, en styles.css. */

/* ── EL ACEBO EN LOS MÁRGENES DEL EDITOR ───────────────────────────────────
   UNA GUIRNALDA COLGADA ARRIBA NO CABE, y vale la pena escribir por qué para
   que nadie vuelva a intentarlo: entre el riel de capítulos y el canto del
   libro hay unos veinte pixeles. Colgarla ahí la pone encima del encabezado
   —y «guardado en este dispositivo · 15:50» deja de leerse— o encima del
   libro, que es exactamente lo que no se puede tocar. Se probó; se veía mal.

   Donde SÍ sobra sitio es en los márgenes: la esquina de arriba a la
   izquierda y la de abajo a la derecha del lienzo están vacías en cualquier
   ventana de escritorio. Son las dos esquinas de su propio marco de acebo
   —`Navidad 08- Green decor`, recortado—, así que el editor queda enmarcado
   igual que una de sus láminas. Van DETRÁS de todo: si la ventana se angosta
   y el libro les pasa encima, se esconden solas. */
body.nav-mode .editor-grid::before,
body.nav-mode .editor-grid::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  background-repeat:no-repeat; background-size:contain; opacity:.42;
}
body.nav-mode .editor-grid{ position:relative }
body.nav-mode .editor-grid::before{
  top:2px; left:0; width:132px; height:159px;
  background-image:url("/img/navidad-template/deco-esquina.webp");
  background-position:left top;
}
body.nav-mode .editor-grid::after{
  right:0; bottom:2px; width:126px; height:93px;
  background-image:url("/img/navidad-template/deco-ramita.webp");
  background-position:right bottom;
}
/* El acebo de las esquinas vive en los pseudos de la rejilla, así que sus
   hijos se levantan por encima. La ALETA del divisor se queda fuera: es
   `absolute` a propósito —cuelga de la celda del panel— y forzarla a
   `relative` la devolvía al flujo, donde ocupaba la columna del panel y
   empujaba el panel entero debajo del libro. Su `z-index:41` ya la pone
   delante del acebo, que es lo único que esta regla venía a resolver. */
body.nav-mode .editor-grid > *:not(.panel-show){ position:relative; z-index:1 }

/* La aleta del divisor, de pino: el mismo botón de siempre vestido de la
   temporada. En guinda competiría con «Siguiente capítulo», que es el único
   rojo del editor y tiene que seguir siéndolo. */
body.nav-mode .panel-show{ background:var(--nv-pino); color:#FFFDF9 }
body.nav-mode .panel-show:hover{ background:#2F462F }

/* ── EL RIEL DE CAPÍTULOS ──────────────────────────────────────────────────
   La raya que divide el encabezado de los capítulos se vuelve verde pino, y
   la bolita del capítulo abierto, roja: es lo más parecido a una guirnalda que
   se puede hacer sin quitarle sitio a nada. Las palomitas de los capítulos ya
   escritos se quedan en el sage de siempre — ésas dicen «hecho», no
   «Navidad», y teñirlas sería perder el dato. */
body.nav-mode .chtabs{ border-bottom-color:rgba(63,91,67,.55) }
body.nav-mode .chtab.on{ border-color:rgba(63,91,67,.4) }
body.nav-mode .chtab.on::before{ color:var(--nv-guinda) }
body.nav-mode .chtab:hover{ color:var(--nv-pino) }
body.nav-mode .ed-riel{ border-bottom-color:rgba(63,91,67,.45) }

/* El rótulo del capítulo abierto, en guinda: es el único texto del panel que
   nombra DÓNDE estás, y en diciembre se pinta de diciembre. */
body.nav-mode .pq-eyebrow{ color:var(--nv-guinda); opacity:.85 }

/* ── EL TELÉFONO ───────────────────────────────────────────────────────────
   El acebo de arriba estorbaría al libro —en un teléfono el spread ocupa el
   ancho entero y no hay margen donde esconderlo—, así que se queda solo la
   ramita de abajo. Y el fondo verde del editor, que en el celular es lo que
   más se ve mientras se pasa de capítulo en capítulo. */
@media (max-width:900px){
  body.nav-mode .editor-grid::before{ display:none }
  body.nav-mode .editor-grid::after{ width:88px; height:65px; opacity:.3 }
}

/* ── EL CELULAR ACOSTADO ───────────────────────────────────────────────────
   El modo inmersivo pinta el <body> por detrás del libro (kora-aire.css), y
   ahí seguía saliendo el arena por debajo del verde en el rebote del scroll.
   Se viste igual, o el truco se nota justo al arrastrar. Y los acebos se van:
   acostado el libro se lleva la pantalla entera y no hay margen que adornar. */
@media (orientation:landscape) and (max-height:560px){
  body.nav-mode.ed-inmersivo{ background:var(--nv-mesa) }
  body.nav-mode .editor-grid::before,
  body.nav-mode .editor-grid::after{ display:none }
}