/* ══════════════════════════════════════════════════════════════════════════
   KORA · LA TERCERA MEDIDA — 13 sep 2026
   Vivi: "también tenemos que mejorar la interface de iPad .. ya muchísima gente
   tiene y creo que sería la manera más fácil de hacer un libro Kora .. es el
   punto medio de un celular y computadora".

   Hasta hoy la casa tenía DOS medidas y un solo número para partirlas: 901 px.
   Ese número se dibujó cuando el mundo era teléfono o computadora, y nadie lo
   revisó cuando llegó la tableta. Los anchos reales de un iPad de pie son 744,
   820 y 834 — tres de los cuatro caen del lado del teléfono.

   Aquí entra la tercera, y la decide el ancho Y EL DEDO. No es un adorno: una
   ventana chica de laptop mide los mismos 834 px que un iPad de pie y quiere
   lo contrario, porque se apunta con un cursor. `pointer:coarse` los separa.

   Dos medias, no una:
     · TÁCTIL — cualquier tableta, en cualquier orientación. Afinación: lo que
       se toca mide lo que debe medir.
     · DE PIE — solo vertical. Es el cambio de acomodo: el libro arriba y las
       preguntas abajo, las dos cosas a la vista.

   `min-height:600px` deja fuera a un teléfono acostado, que mide 390 de alto y
   ya tiene lo suyo en kora-aire.css. Esta hoja va después de las dos.
   ══════════════════════════════════════════════════════════════════════════ */


/* ═══════════ 1 · TÁCTIL · cualquier tableta, cualquier orientación ═══════════ */
@media (min-width:700px) and (min-height:600px) and (pointer:coarse){

  /* Los blancos del editor. 44 px es el mínimo cómodo con el dedo; las pestañas
     de capítulo medían 26 y son la navegación principal del editor. */
  #s2 .chtab{
    min-height:44px; display:inline-flex; align-items:center;
    padding:.5rem .85rem;
  }
  #s2 .chtabs{ padding-bottom:.65rem; scroll-padding-inline:20px }
  #s2 .sn-corner, #s2 .sn-next{ min-height:44px; padding-block:.7rem }
  #s2 .pill, .k2new .k2-field .pill{ min-height:38px; display:inline-flex; align-items:center }
  #s2 .btn-mini, #s2 .lock-toggle, #s2 .kprint-op, #s2 .tela-op, #s2 .est-try{ min-height:44px }
  .km-open, .panel-hide, .panel-show{ min-height:44px }

  /* Lo que solo pasa al pasar el cursor no pasa nunca. Se apagan los cambios de
     color al hover para que no se queden pegados después de un toque — el dedo
     deja el `:hover` puesto hasta que tocas en otro lado. */
  #s2 .chtab:hover, #s2 .sn-corner:hover, #s2 .eh-link:hover{ color:inherit }
  #s2 .chtab.on:hover{ color:#3a3026 }

  /* El riel de KORA es la única puerta de vuelta al encabezado cuando no hay
     cursor. Ya funciona al tocarlo; aquí se le da el tamaño de un blanco. */
  body.ed-inmersivo .ed-riel{ height:38px; font-size:13px }
}


/* ═══════════ 2 · DE PIE · la tableta en vertical ═══════════ */
@media (min-width:700px) and (max-width:1024px) and (orientation:portrait) and (pointer:coarse){

  /* ── El encabezado se retira al riel, como en escritorio ───────────────── */
  /* Son 84 px que se le devuelven al libro, y la maquinaria ya existe: la clase
     `ed-inmersivo` la pone app.js sin mirar el ancho. Aquí solo se enciende. */
  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);
  }
  body.ed-inmersivo .ed-riel{
    display:flex; position:fixed; top:0; left:0; right:0; height:38px;
    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:13px; font-weight:500;
    letter-spacing:.3em; color:var(--taupe);
  }
  body.ed-inmersivo.ed-cabeza .ed-riel{ display:none }
  body.ed-inmersivo #s2{ margin-top:38px }

  /* ── La pantalla del editor es el alto que hay ──────────────────────────── */
  #s2{ height:calc(100dvh - 38px); overflow:hidden }
  #s2 .editor{
    height:100%; display:flex; flex-direction:column; padding:.9rem 22px 0;
  }
  /* El título y «Comprar libro» se quedan: aquí sí caben, y el botón de comprar
     no se esconde por acomodo. Solo pierden aire. */
  #s2 .editor-head{ margin-bottom:.5rem; gap:.6rem; padding-right:0 }
  #s2 .kvida.on{ margin-bottom:.7rem }
  #s2 #editorWrap{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column }
  #s2 .chtabs{ flex:0 0 auto; overscroll-behavior:contain }
  #s2 .editor-grid{
    flex:1 1 auto; min-height:0;
    display:flex; flex-direction:column; gap:1rem;   /* el libro y, debajo, las preguntas */
  }
  #s2 .ed-left{
    flex:0 0 auto; position:static; height:auto; min-height:0;
    overflow:visible; padding:.6rem 0 0;
  }
  #s2 .ed-left::after{ display:none }
  /* La hoja se mide contra el ANCHO, que aquí es lo que manda: un spread
     apaisado a todo lo ancho ocupa poco más de un tercio del alto. */
  #s2 .spread{
    max-width:100%; width:100%; min-height:0; margin-inline:auto;
  }
  #s2 .spread.single .pg{ height:auto; aspect-ratio:var(--k-pagina); max-height:52dvh }
  #s2 .spread-nav{ max-width:100%; margin-top:.6rem }

  /* ── Las preguntas, debajo del libro y a la vista ───────────────────────── */
  /* `panel-en-linea` la pone updatePanelWidth() y en esta medida vale para
     TODAS las hojas (ver panelEnLinea() en app.js). No hay sábana que abrir. */
  #s2 .panel{
    flex:1 1 auto; min-height:0; height:auto;
    overflow-y:auto; overscroll-behavior:contain;
    padding:0 0 1.6rem; border-top:1px solid rgba(90,75,57,.22); padding-top:1rem;
  }
  /* La salida de la sábana y el botón que la abría no tienen oficio aquí. */
  #editorWrap.panel-en-linea .panel-hide,
  #editorWrap .km-open,
  .km-swipe-hint, .km-girar{ display:none }

  /* Dos columnas, sin tocar el HTML. Todo lo que cuelga del panel ocupa el
     ancho completo —el encabezado del capítulo, la pregunta grande, el botón de
     contar, la foto— y solo los CAMPOS se reparten en dos. Se declara al revés
     a propósito: así una pieza nueva que nadie previó nace a lo ancho, que es
     el estado seguro, en vez de partirse a la mitad. */
  #panelSlots{
    display:grid; grid-template-columns:1fr 1fr;
    gap:0 2.2rem; align-content:start; align-items:start;
  }
  #panelSlots > *{ grid-column:1 / -1 }
  #panelSlots > .pq-field{ grid-column:auto; min-width:0 }
  /* Una caja de escribir con la mitad del ancho necesita un poco más de alto
     para que quepa lo mismo. */
  #s2 .panel .pq-input.pq-area{ min-height:78px }
}


/* ═══════════ 3 · LA SEMILLA · de tableta para arriba ═══════════ */
/* Aquí no se pregunta por el dedo: lo que decide es si CABEN dos columnas, y
   eso es ancho. Una laptop chica gana lo mismo.
   La columna del formulario NO se ensancha —560 px es su medida y una columna
   de campos más ancha se llena peor, no mejor—. Lo que entra en el espacio que
   sobraba es la portada, que es lo que esta pantalla ya prometía:
   «con eso hacemos la portada y la dedicatoria, al instante». */
@media (min-width:900px){
  .k2new.k2-conTapa .k2-form{
    display:grid; grid-template-columns:minmax(0,560px) minmax(260px,1fr);
    gap:0 clamp(32px,5vw,72px); max-width:1000px; align-items:start;
  }
  .k2new.k2-conTapa .k2-form > *{ grid-column:1 }
  .k2new.k2-conTapa .k2-tapa-viva{
    grid-column:2; grid-row:1 / span 40;
    position:sticky; top:96px; align-self:start;
  }
  .k2new.k2-conTapa .k2-tapa-viva .cover-sheet{
    width:100%; aspect-ratio:var(--k-pagina); height:auto;
    border-radius:2px; box-shadow:0 30px 60px -28px rgba(44,37,32,.6);
  }
  .k2new .k2-tapa-pie{
    font-family:var(--font-display); font-style:italic; font-size:13px;
    color:var(--taupe); text-align:center; margin-top:.8rem;
  }
}
/* Debajo de 900 la portada no cabe al lado y no se enseña a medias: la semilla
   vuelve a ser una sola columna, igual que hoy. */
@media (max-width:899px){
  .k2new .k2-tapa-viva{ display:none }
}