/* ══════════════════════════════════════════════════════════════════════════
   ERGONOMÍA: LO MISMO EN EL ORDENADOR Y EN LA TABLETA
   ══════════════════════════════════════════════════════════════════════════
   La ficha se diseñó mirando un monitor, y en la mesa se usa con el dedo.
   No son la misma cosa: el ratón acierta un cuadro de 16 px y el dedo no,
   y el teclado de la tableta tapa media pantalla justo cuando escribes.

   Casi todo va dentro de `@media (pointer: coarse)` a propósito: en el PC
   no se toca NADA. Lo que sí es general va con `:where(…)`, que no pesa
   nada en la cascada, así que cualquier regla que ya exista le gana. Eso
   importa: el visor de mapas y el cofre declaran `touch-action:none` para
   poder arrastrar, y una regla general con más peso se lo quitaría. */


/* ── 1. La espera de los 300 ms ─────────────────────────────────────────────
   Al tocar, el navegador espera por si viene un segundo toque —doble toque
   es zoom— y hasta entonces no dispara nada. Se nota como que la ficha «va
   lenta» aunque no lo esté. `manipulation` dice que aquí no hay doble toque
   que valga, y de paso evita el zoom accidental al pulsar dos veces seguidas
   en el mismo botón, que pasa mucho subiendo vida. */
:where(button, a, label, summary, input, select, textarea,
       .term, .rasgoIco, .masNota, .pico, .btn, [data-rasgo], [data-tip],
       [data-ficha], [onclick]){
  touch-action: manipulation;
}


/* ── 2. Que no dé el salto al escribir ──────────────────────────────────────
   Safari del iPad hace zoom él solo en cuanto tocas un campo de menos de
   16 px —y al salir NO lo deshace: te deja la ficha torcida y a medio ver,
   y hay que pellizcar para volver—. Con 16 px no hay salto. `max()` para no
   encoger nada que ya fuera más grande. */
@media (pointer: coarse){
  input, textarea, select, [contenteditable]{
    /* Con `!important` y no de otra forma: los campos llevan su tamano
       puesto desde reglas mas concretas (`.campo input`, `.tablaCaja input`)
       y una regla general pierde siempre. Aqui el diseno tiene que ceder,
       porque no es una preferencia de tamano: por debajo de 16 px el
       navegador de la tableta HACE ZOOM SOLO y no lo deshace. Solo pasa con
       el dedo; en el ordenador esta regla ni existe. */
    font-size: max(16px, 1em) !important;
  }
}


/* ── Dos consultas y no una, a proposito ───────────────────────────────────
   `pointer: coarse` describe el mando PRINCIPAL. En un equipo hibrido —una
   tableta con teclado y raton, o un portatil con pantalla tactil— sale
   `fine` aunque la pantalla se toque, y las reglas no se activarian nunca.
   Medido en este equipo: `pointer: fine` y a la vez 20 puntos de contacto.

   Asi que se reparten segun POR QUE existe cada una:

     · acertar con el dedo  → `any-pointer: coarse`, o sea «esto se puede
       tocar». Da igual que haya raton: si hay dedo, el blanco tiene que
       poder acertarse. Con raton no se pierde nada, solo queda mas holgado.

     · los 16 px de los campos → `pointer: coarse`, o sea «el dedo manda».
       Eso arregla el zoom que hace el navegador al escribir con el teclado
       DE LA PANTALLA; con un teclado de verdad no pasa, y ahi no hay por
       que agrandar la letra de las tablas del estudio. */

/* ── 3. Blancos que se puedan acertar ───────────────────────────────────────
   Medido en la ficha: hay cosas pulsables de 16 y 18 px de alto. El dedo
   cubre unos 45. Pero agrandar los cuadros rompería el diseño —el árbol del
   cuaderno quedaría gigante—, así que se agranda LA ZONA QUE ESCUCHA y no
   el dibujo: un rectángulo invisible que sobresale por los cuatro lados.
   Se ve igual de compacto y se acierta a la primera. */
@media (any-pointer: coarse){
  :where(.masNota, .pico, .btn.peq, .cerrar, .quitar, .rasgoIco){
    position: relative;
  }
  :where(.masNota, .pico, .btn.peq, .cerrar, .quitar, .rasgoIco)::after{
    content: "";
    position: absolute;
    inset: -10px;
    /* Sin fondo y por debajo de nada: solo recoge el toque. */
  }
  /* Los de siempre —los que no son un icono suelto— sí crecen de verdad. */
  :where(#tabs button, .btn:not(.peq), .filaLibro, .fichaFila, .nodoMapa){
    min-height: 44px;
  }
  /* Los campos no pueden usar el truco del rectángulo invisible: un `input`
     no admite `::after` —no tiene dentro donde ponerlo—, así que aquí el
     cuadro sí crece. 40 y no 44 a posta: la fila de vida, maná y CA lleva
     seis seguidos, y a 44 el resumen se estiraba de más. */
  :where(input:not([type=checkbox]):not([type=radio]), select, textarea){
    min-height: 40px;
  }
}


/* ── 4. El rebote de las listas ─────────────────────────────────────────────
   Sin esto, al llegar al final de una lista con el dedo el tirón sigue y
   arrastra la página entera por debajo: pierdes de vista lo que estabas
   leyendo. `contain` corta el tirón donde acaba la lista. */
:where(.cuerpo, .listaNotas, .arbolNotas, .arbolMapas, .listaDiario,
       .tablaCaja, .cofreCuerpo, .capaRasgo, .capaTermino, .capaTermino2){
  overscroll-behavior: contain;
}


/* ── 5. El foco, para quien va con teclado ──────────────────────────────────
   Ya había `:focus-visible` en varias hojas; aquí solo se asegura de que
   NADA se quede sin marca visible, y de que la marca se vea sobre el
   pergamino oscuro. Con `:where` no pisa las que ya estaban afinadas. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--oro, var(--ink, #e8c07a));
  outline-offset: 2px;
  border-radius: 4px;
}


/* ── 6. Sitio para escribir ─────────────────────────────────────────────────
   Las áreas de texto crecen solas con lo escrito (lo hace `tacto.js`), pero
   necesitan un suelo decente: empezar en tres renglones y no en uno, que es
   lo que invita a escribir más de una frase en el diario. */
:where(textarea){
  min-height: 4.5em;
  line-height: 1.5;
  resize: vertical;
}
textarea.creciendo{ resize: none; overflow: hidden; }


/* ── 7. Que el teclado no tape lo que escribes ──────────────────────────────
   Cuando sube el teclado de la tableta, el hueco visible se queda en la
   mitad de alto. `tacto.js` apunta ahí abajo cuánto ocupa, y esto deja ese
   hueco libre al final de la página para poder subir el campo por encima. */
body{ padding-bottom: var(--teclado, 0px); }
@supports (padding: env(safe-area-inset-bottom)){
  body{ padding-bottom: calc(var(--teclado, 0px) + env(safe-area-inset-bottom)); }
}


/* ── 8. Menos accidentes al arrastrar ───────────────────────────────────────
   Dejar el dedo encima de un icono o de una fila del libro seleccionaba el
   texto y salía el globo azul de «copiar», que se come el arrastre. Los
   textos de verdad —descripciones, diario, cuaderno— se dejan en paz para
   poder copiarlos. */
@media (any-pointer: coarse){
  :where(.rasgoIco, .filaLibro, .pico, .masNota, #tabs, .barraAcciones,
         .nodoMapa, .cofreCab){
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}