/* ══════════════════════════════════════════════════════════════════════════
   KORA · EL CELULAR ACOSTADO — 13 sep 2026
   Vivi: "cuando estás en el celular y volteas el celular hay que esconder el
   encabezado para que solo se vea el libro abierto .. quizá del lado derecho
   puede ir un botón o algo que abra el panel o el pop up de respuestas para
   quien quiera trabajar desde su celular hacerlo más práctico".

   Voltear el teléfono es un gesto con una sola intención: VER EL LIBRO. Un
   iPhone acostado tiene unos 390 px de alto, y hoy ahí viven, apilados encima
   del libro, el encabezado del sitio (70), la barra de avance, el título con
   "Comprar libro" y la fila de capítulos. Al spread le quedaban menos de 200.

   Esto no inventa un modo nuevo: enciende en el teléfono acostado el MISMO
   editor a pantalla completa que ya existe en escritorio desde agosto —el
   encabezado se retira y deja el riel con KORA, y vuelve al tocarlo—. Lo único
   nuevo es la manija: en escritorio las preguntas viven al lado, aquí no cabe
   una columna, así que el panel se pliega en una pestaña en la orilla derecha
   y abre la misma sábana de siempre.

   Esta hoja va DESPUÉS de kora-mobile.css a propósito: lo que corrige es de
   ahí, y corregirlo dentro sería editar a ciegas reglas que sirven en vertical.
   ══════════════════════════════════════════════════════════════════════════ */

@media (orientation:landscape) and (max-height:560px){

  /* 1 · El encabezado se retira, igual que en escritorio ────────────────── */
  body.ed-inmersivo .wf-head{
    position:fixed; left:0; right:0; top:0; z-index:100;
    transform:translateY(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
  }
  body.ed-inmersivo.ed-cabeza .wf-head{
    transform:none; box-shadow:0 12px 28px -22px rgba(60,48,34,.75);
  }
  /* El riel: la puerta de vuelta. Con el dedo no hay "acercar el cursor a la
     orilla", así que aquí es lo único que hay — y por eso se ve siempre. */
  body.ed-inmersivo .ed-riel{
    display:flex; position:fixed; top:0; left:0; right:0; height:var(--ed-riel);
    z-index:101; align-items:center; justify-content:center;
    padding:0 0 0 .28em; margin:0; border:0;
    border-bottom:1px solid rgba(122,102,82,.14);
    background:#FFFFFF; cursor:pointer;
    font-family:var(--font-display); font-size:12px; font-weight:500;
    letter-spacing:.3em; color:var(--taupe);
  }
  body.ed-inmersivo.ed-cabeza .ed-riel{ display:none }

  /* 2 · La pantalla del editor es el alto que hay, y nada más ───────────── */
  body.ed-inmersivo #s2{ margin-top:var(--ed-riel) }
  #s2{ height:calc(100dvh - var(--ed-riel)); overflow:hidden }
  #s2 .editor{ height:100%; display:flex; flex-direction:column; padding:0 10px }
  /* El título del libro y "Comprar libro" no son de aquí: el teléfono acostado
     es para leer y contestar. Los dos siguen a un toque, en el encabezado. */
  #s2 .editor-head{ display:none }
  #s2 .kvida.on{ margin-bottom:.35rem; padding:0 .3rem }
  #s2 #editorWrap{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column }
  #s2 .chtabs{ flex:0 0 auto; padding-bottom:.3rem; overscroll-behavior:contain }
  #s2 .editor-grid{ flex:1 1 auto; min-height:0; grid-template-columns:1fr; gap:0 }
  #s2 .ed-left{
    height:100%; min-height:0; overflow:hidden;
    display:flex; flex-direction:column; justify-content:flex-start;
    padding:.35rem 0 0;
  }
  #s2 .ed-left::after{ display:none }
  /* La hoja se mide contra el alto, que es lo escaso, y deja sitio para la
     fila de abajo. 74px = la barra de capítulos más su aire. */
  #s2 .spread{
    max-width:min(94vw, calc((100dvh - var(--ed-riel) - 74px) * var(--k-spread)));
    min-height:0; margin-inline:auto;
  }
  #s2 .spread.single .pg{ height:calc(100dvh - var(--ed-riel) - 86px) }
  #s2 .spread-nav{ margin-top:.35rem; max-width:none; padding:0 .4rem }
  /* Lo de abajo del libro se calla mientras el teléfono está acostado: son
     notas de trabajo y aquí cada renglón le quita alto a la hoja. */
  #s2 .ctrlbar, #s2 .ctrl-note, #s2 .ctrl-hint{ display:none }
  /* Y las dos pistas del celular. kora-mobile.js ya no las cuelga estando de
     lado, pero quien gira el teléfono con la pista puesta se la llevaría
     consigo: aquí se apaga la que ya estaba colgada. La de girar, sobre todo,
     que pide hacer justo lo que la persona acaba de hacer. */
  #s2 .km-swipe-hint, #s2 .km-girar{ display:none }

  /* 3 · El panel no ocupa sitio hasta que se abre ───────────────────────── */
  /* Se apoya en las clases que ya pone updatePanelWidth(): `panel-wide` cuando
     la sábana está abierta y `panel-en-linea` en portada y dedicatoria, donde
     las opciones viven debajo del libro a propósito. */
  #editorWrap:not(.panel-wide):not(.panel-en-linea) .panel{ display:none }
  #editorWrap.panel-wide .panel{
    max-height:calc(100dvh - var(--ed-riel));
    overscroll-behavior:contain;
  }

  /* 4 · La manija, en la orilla derecha ─────────────────────────────────── */
  /* Vertical porque lo escaso es el alto y lo que no se puede tocar es el
     ancho del libro: una pestaña acostada le comería 130 px a la hoja. */
  #editorWrap .km-open{
    display:flex; align-items:center; justify-content:center; gap:.4rem;
    position:fixed; right:0; top:50%; transform:translateY(-50%);
    z-index:70; writing-mode:vertical-rl; text-orientation:mixed;
    border:1px solid var(--sand-light); border-right:0;
    border-radius:11px 0 0 11px;
    background:var(--white); color:var(--clay); cursor:pointer;
    font-family:var(--font-body); font-size:11.5px; letter-spacing:.04em;
    padding:.95rem .5rem; margin:0; max-height:62dvh;
    box-shadow:0 6px 20px -10px rgba(60,48,34,.5);
  }
  /* Con la sábana abierta, la salida es el botón de arriba de la sábana. */
  #editorWrap.panel-wide .km-open,
  #editorWrap.panel-en-linea .km-open{ display:none }
}

/* En vertical no cambia nada: esta hoja no tiene reglas fuera del acostado. */