/* ══════════════════════════════════════════════════════════════
   KORA · capa móvil — v2 (21 ago 2026)
   El panel de preguntas deja de vivir dentro de la página y pasa a ser una
   SÁBANA que cubre la pantalla. Dos momentos:
     · hay preguntas por contestar → la sábana se abre sola;
     · le picas a "Contar este capítulo" → la sábana se va y aparece tu libro.
   Para volver a abrirla, el botón que queda debajo del libro.
   Va hasta 900px para que no quede un hueco entre esta capa y el editor de
   escritorio (que arranca en 901px).
   OJO iOS: la sábana usa scroll interno y el botón NO es fijo — así el teclado
   no lo esconde. Nada de position:fixed en el CTA.
   Revertible: quita las 2 líneas de kora-mobile.* en index.html.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* ── 1 · la ventana de preguntas ──────────────────────────────
     Era una sábana a pantalla completa: al abrirla desaparecía el libro y se
     perdía el hilo de qué se estaba contestando. Ahora es una ventana SOBRE el
     editor, con el libro asomándose detrás. */
  #editorWrap .editor-grid > .panel{ display:none; }
  #editorWrap.panel-wide::before{           /* el fondo que atenúa el editor */
    content:""; position:fixed; inset:0; z-index:118;
    background:rgba(50,42,34,.34); backdrop-filter:blur(2px);
    animation:km-fondo .2s ease;
  }
  #editorWrap.panel-wide .editor-grid > .panel{
    display:block;
    position:fixed; z-index:120;            /* por encima del header del sitio (z-100) */
    left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(560px, calc(100vw - 1.6rem));
    max-height:min(84vh, 720px);
    /* 9 sep · La ventana iba en #F8F6F2, casi blanca, y flotaba encima de un
       editor color arena como si fuera de otra página. En computadora el panel
       es transparente y toma el tono de #s2 — el mismo de toda la página. Aquí
       se hace igual, con un punto más de luz para que se separe del fondo. */
    background:#E9E4DC; border:none; border-radius:18px;
    margin:0; padding:0 1.15rem 1.6rem;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    box-shadow:0 30px 70px -28px rgba(40,32,22,.7);
    animation:km-sheet .24s cubic-bezier(.4,0,.2,1);
  }
  @keyframes km-fondo{ from{opacity:0} to{opacity:1} }
  @keyframes km-sheet{
    from{ opacity:0; transform:translate(-50%,calc(-50% + 14px)) }
    to  { opacity:1; transform:translate(-50%,-50%) }
  }

  /* ── 1b · portada y dedicatoria: sin ventana, las opciones debajo del libro ──
     Ahí no hay preguntas que contestar, solo ajustes. Un botón para destaparlos
     era un paso de más. */
  #editorWrap.panel-en-linea .editor-grid{ display:block; }
  #editorWrap.panel-en-linea .editor-grid > .panel{
    display:block; position:static; transform:none;
    width:auto; max-height:none; margin:1.4rem 0 0; padding:0;
    background:transparent; box-shadow:none; border-radius:0; animation:none;
  }
  #editorWrap.panel-en-linea .panel-hide,
  #editorWrap.panel-en-linea .km-open{ display:none !important; }

  /* la barra de arriba de la sábana: cerrar y volver al libro */
  #editorWrap .panel-hide{ display:none; }
  /* La cabecera de la ventana: el nombre a la izquierda, la ✕ a la derecha, y
     un tono apenas distinto del cuerpo para que se lea como barra y no como
     una línea suelta de texto. */
  #editorWrap.panel-wide .panel-hide{
    display:flex; align-items:center; justify-content:space-between; gap:.8em;
    position:sticky; top:0; z-index:2;
    width:calc(100% + 2.3rem); margin:0 -1.15rem 1.15rem;
    padding:.9rem 1.15rem;
    border:0; border-bottom:1px solid rgba(122,102,82,.16);
    border-radius:18px 18px 0 0;
    background:#DFD9CF; text-align:left;
    font-size:var(--ed-dato); color:#5A5044;
  }
  #editorWrap.panel-wide .panel-hide .ph-x{
    flex:none; font-size:1.15em; line-height:1; color:var(--taupe);
    padding:0 .1em;
  }
  #editorWrap.panel-wide .panel-hide:active .ph-x{ color:#3a3026 }
  #editorWrap .panel-show{ display:none !important; }

  /* ── 2 · el botón que la vuelve a abrir, debajo del libro ────── */
  .km-open{
    display:block; width:100%; max-width:520px; margin:1.2rem auto .2rem;
    background:var(--white,#FFFDF9);
    border:1px solid var(--sand-light,#D8D1C4); border-radius:12px;
    padding:.95rem 1rem; min-height:48px; cursor:pointer;
    font-family:var(--font-body,sans-serif); font-weight:300;
    font-size:var(--ed-texto); color:#534A40;
    box-shadow:0 5px 16px -12px rgba(60,48,34,.5);
  }
  .km-open:active{ transform:scale(.99); }
  #editorWrap.panel-wide .km-open{ display:none; }

  /* Si al capítulo todavía le faltan preguntas (o es portada/dedicatoria), el
     botón va ARRIBA del libro: si no, hay que bajar toda la hoja para hallarlo.
     Ya contado, va abajo — ahí el libro es lo que importa. */
  #editorWrap{ display:flex; flex-direction:column; }
  #editorWrap .chtabs{ order:0; }
  #editorWrap .editor-grid{ order:2; }
  #editorWrap .km-open{ order:3; }
  #editorWrap .panel-show{ order:4; }
  #editorWrap.km-top .km-open{ order:1; margin:.9rem auto .2rem; }

  /* ── 3 · el libro ───────────────────────────────────────────── */
  #s2 .spread-nav{ flex-wrap:wrap; row-gap:.55rem; }
  #s2 .sn-page{ order:-1; width:100%; text-align:center; }

  /* ── 4 · tipografía cómoda dentro de la sábana ─────────────────
     Aquí NO se listan tamaños uno por uno: se sube un escalón la MISMA escala
     de cinco pasos que usa el editor (css/styles.css). En una sábana a pantalla
     completa cabe un poco más, y así el celular sigue respetando el "Texto
     más grande" del sistema en vez de quedarse clavado en píxeles fijos. */
  #s2 #editorWrap, #s2 .editor-head{
    --ed-titulo:   max(25px,   1.62em);
    --ed-accion:   max(15.5px, .95em);
    --ed-texto:    max(14px,   .88em);
    --ed-dato:     max(13px,   .84em);
    --ed-etiqueta: max(11px,   .7em);
  }
  #panelSlots .pq-title{ line-height:1.16 }
  #panelSlots .pq-lede{ line-height:1.6 }
  #panelSlots .pill{ padding:.62rem .85rem }
  /* En la sábana el CTA NO va pegado abajo: tapaba las ideas de arriba y en
     Safari iOS un botón fijo se pelea con el teclado. Va al final, en flujo. */
  #panelSlots.pqv2 .pq-next,
  #panelSlots .pq-next{ position:static !important; bottom:auto !important;
    width:100%; padding:1rem; box-shadow:0 7px 18px -10px rgba(44,37,32,.5); }
  #s2 .panel-vault{ margin-top:1.6rem; }

  /* ── 5 · pista de swipe bajo la navegación del spread ────────── */
  .km-swipe-hint{
    text-align:center; font-size:var(--ed-etiqueta); color:var(--taupe,#948A7C);
    margin:.55rem 0 .1rem; letter-spacing:.02em;
  }

  /* ── 6 · encabezado del editor: que quepa en un renglón ────────
     11 sep 2026 · Vivi, desde el iPhone: "hay demasiado texto arriba y le roba
     espacio al libro".
     Contado: antes del libro venían el nombre del libro en serif de 25, el
     «Todo se guarda solo», dos botones, la barra de avance y la tira de
     capítulos. En un iPhone eso es media pantalla de cromo antes de ver una
     sola página — y el libro es lo único que la familia vino a ver.
     Nada se quita: todo se vuelve UN renglón. El nombre en el tamaño del resto
     del cromo y cortado si no cabe (ya está arriba de la pantalla, en el
     encabezado del sitio), el estado de guardado a su lado como dato, y los
     dos botones chicos a la derecha. De ~130 px a ~44. */
  #s2 .editor-head{
    flex-wrap:nowrap; align-items:center; gap:.6rem;
    margin-bottom:.5rem; padding-right:0;
  }
  #s2 .eh-title{
    display:flex; align-items:baseline; gap:.5rem; min-width:0; flex:1 1 auto;
  }
  #s2 .editor-head h2{
    font-size:var(--ed-accion); font-weight:500; margin:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
  }
  #s2 .eh-save{ flex:none; font-size:var(--ed-etiqueta); white-space:nowrap }
  #s2 .eh-actions{ margin-left:auto; gap:.55rem; flex:none; }
  #s2 .eh-link{ font-size:var(--ed-etiqueta); white-space:nowrap }
  #s2 .btn-buy{ padding:.45rem .8rem; font-size:var(--ed-etiqueta); white-space:nowrap }
  /* "Todo se guarda solo" vive dentro de la sábana, donde se lee al contestar.
     Debajo del libro no lo lee nadie y ahí sí ocupa. */
  #editorWrap.panel-en-linea .panel-vault{ display:none }

  /* ── 7 · el corte de las pestañas, que se vea intencional ────── */
  #s2 .chtabs{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  }

  /* ── 8 · "editar esta página" del libro completo (el estilo vive en styles.css) */
  #fullWrap .full-spread{ position:relative; }

  /* ── 9 · LA PISTA DE GIRAR ────────────────────────────────────
     Vivi: "de lado se lee mejor, pero desperdicia el espacio de los lados —
     ahí muévele el panel; y avísale al usuario que gire el teléfono".
     La pista aparece UNA vez por sesión, en vertical, y solo en el editor. */
  .km-girar{
    display:flex; align-items:center; gap:.55rem; justify-content:center;
    margin:.5rem auto .2rem; max-width:520px;
    font-family:var(--font-body); font-weight:300; font-size:var(--ed-etiqueta);
    letter-spacing:.02em; color:var(--taupe,#948A7C);
  }
  .km-girar svg{ flex:none; animation:km-gira 3.4s ease-in-out infinite }
  @keyframes km-gira{
    0%,62%,100%{ transform:rotate(0) }
    76%,92%    { transform:rotate(90deg) }
  }
  @media (prefers-reduced-motion:reduce){ .km-girar svg{ animation:none } }
}

/* ══ EL TELÉFONO DE LADO ══════════════════════════════════════════
   11 sep 2026 · Vivi, desde el iPhone: "de lado se lee mejor, pero
   desperdicia mucho espacio de los lados; ahí muévele el panel — que las
   preguntas salgan primero en un pop-up y luego se hagan a un lado".
   Un spread es apaisado: de lado llena el ancho y sobran dos franjas a los
   costados donde no hay nada. Ese es exactamente el sitio del panel, y es lo
   que hace la computadora desde siempre.
   Y el orden que ella pide es el correcto: la pregunta primero MANDA —ventana
   al centro, el libro detrás— y después se hace a un lado para contestar
   mirando la hoja. Por eso solo se acuesta el panel cuando el capítulo ya no
   está pendiente: mientras haya preguntas nuevas, la ventana sigue al centro.
   Se pide altura mínima para no agarrar tablets en vertical ni teléfonos
   diminutos donde dos columnas no caben. */
@media (max-width:900px) and (orientation:landscape) and (min-width:640px){
  /* la pista de girar ya no aplica: ya está de lado */
  .km-girar{ display:none !important }

  /* el cromo de arriba, todavía más plano: aquí el alto es lo escaso */
  #s2 .editor-head{ margin-bottom:.35rem }
  #s2 .chtabs{ margin-bottom:.4rem }

  /* EL PANEL, ACOSTADO A LA DERECHA. Deja de ser ventana flotante: vuelve a
     ser columna, como en la computadora, en el espacio que de todos modos
     estaba vacío. */
  #editorWrap.panel-wide::before{ display:none }
  #editorWrap.panel-wide .editor-grid{
    display:grid; grid-template-columns:1fr clamp(280px,38vw,420px); gap:1rem;
    align-items:start;
  }
  #editorWrap.panel-wide .editor-grid > .panel{
    position:static; transform:none; left:auto; top:auto;
    width:auto; max-height:calc(100dvh - 120px); overflow-y:auto;
    border-radius:14px; margin:0; padding:0 .9rem 1.1rem;
    animation:none; box-shadow:0 14px 34px -22px rgba(40,32,22,.55);
  }
  #editorWrap.panel-wide .panel-hide{
    width:calc(100% + 1.8rem); margin:0 -.9rem .9rem; border-radius:14px 14px 0 0;
  }
  /* …salvo cuando el capítulo está PENDIENTE: ahí la pregunta manda y vuelve
     a ser ventana al centro, que es lo que Vivi pidió en ese orden. */
  #editorWrap.panel-wide.km-top .editor-grid{ display:block }
  #editorWrap.panel-wide.km-top::before{ display:block }
  #editorWrap.panel-wide.km-top .editor-grid > .panel{
    position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(640px, calc(100vw - 1.6rem)); max-height:92dvh;
    border-radius:18px; padding:0 1.15rem 1.6rem;
    box-shadow:0 30px 70px -28px rgba(40,32,22,.7);
  }
  #editorWrap.panel-wide.km-top .panel-hide{
    width:calc(100% + 2.3rem); margin:0 -1.15rem 1.15rem; border-radius:18px 18px 0 0;
  }
}