/* ═══════════════════════════════════════════════════════════════════════════
   css/teclado.css — LO QUE SE APARTA CUANDO EL TECLADO SE ABRE
   ───────────────────────────────────────────────────────────────────────────
   Pareja de `base/teclado.js`, que publica `--kb` (los píxeles que el teclado
   tapa por abajo) y la clase `teclado-abierto` en el `<body>`. El JavaScript
   MIDE; este fichero DECIDE. La razón completa —por qué en iOS el teclado no
   encoge el viewport de maquetación y por qué eso deja el campo de escribir
   debajo del teclado— está en la cabecera de ese módulo.

   ⚠️ POR QUÉ AQUÍ Y NO EN CADA COMPONENTE

   Son tres superficies distintas (las hojas, los modales y la barra de
   comentarios) con el MISMO problema y la misma solución. Repartir
   `bottom: var(--kb)` por tres bloques de `index.html` sería la trampa nº 2
   del proyecto: la próxima superficie con un campo de texto nacería rota y
   nadie sabría por qué las otras tres sí funcionan.

   ⚠️ Y POR QUÉ NO TOCA NADA CUANDO NO HAY TECLADO

   `var(--kb, 0px)` vale 0 mientras no haya teclado, y `base/teclado.js` sólo
   lo sube por encima de 0 cuando lo que tapa supera los 90 px. En un
   navegador sin `visualViewport` la variable no se escribe nunca y todo esto
   se comporta exactamente igual que antes de existir.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · LAS HOJAS (comentarios, descripción, ajustes de clan…) ──────────────
   `.sh` es `position: fixed; bottom: 0`. Con el teclado abierto, ese borde
   inferior —donde vive la barra de escribir— queda debajo del teclado.

   ═══════════════════════════════════════════════════════════════════════════
   ⚠️ S33 · `.sh.open` Y NO `.sh` · LA HOJA «DESCRIPCIÓN» QUE ASOMABA SOBRE EL
   TECLADO AL PULSAR EL BUSCADOR DE USUARIOS
   ───────────────────────────────────────────────────────────────────────────
   QUÉ SE REPORTÓ: se pulsa «Buscar usuarios», sale el teclado, y justo encima
   del teclado aparece una pestaña que pone **Descripción**. No se había pulsado
   nada que la abriera.

   QUÉ ERA: `#cap-sheet`, la hoja de la descripción completa de una
   publicación. **Estaba cerrada.** Una hoja cerrada se esconde con
   `transform: translateY(100%)`, es decir, se aparta HACIA ABAJO exactamente
   su propio alto — y estas dos reglas la subían `--kb` píxeles sin mirar si
   estaba abierta. La cuenta, con números reales:

       alto de #cap-sheet cerrada y vacía ...  ~95 px  (cabecera + relleno)
       translateY(100%) la baja .............  ~95 px
       bottom: var(--kb) la sube ............  ~300 px (teclado de iPhone)
       ────────────────────────────────────────────────
       borde superior visible a ............   ~205 px sobre el borde inferior

   O sea: justo encima del teclado, que es donde el dueño la vio. `#cs-sheet`
   (comentarios) no asomaba porque declara `78svh` y su propio alto es mayor
   que cualquier teclado, así que sigue quedando fuera. Por eso el síntoma
   nombraba SÓLO a «Descripción»: no era esa hoja, era la más baja.

   ⚠️ NO SE TAPA CON CSS: SE QUITA LA CAUSA. La causa es que se estaba
   recolocando una hoja que no está en pantalla. Apartar la interfaz del
   teclado sólo tiene sentido para la hoja que el usuario está viendo, y ésa es
   exactamente la que lleva `.open`. Una hoja cerrada vuelve a comportarse como
   antes de que existiera este fichero: `bottom: 0` y apartada por su
   `transform`, hasta que alguien la abra.

   No afecta a ningún otro campo de texto: el comportamiento con la hoja
   ABIERTA —que es el que arregló la sesión 27— es idéntico, y el resto del
   fichero (los modales, la barra de comentarios) no se toca.
   ═══════════════════════════════════════════════════════════════════════════ */
.sh.open {
  bottom: var(--kb, 0px);
}

/* Al subir la hoja, su alto tiene que caber en lo que queda de pantalla; si no,
   se sale por arriba y el encabezado (con el botón de cerrar) deja de verse.
   Sólo actúa cuando el teclado lo hace necesario. Misma condición que arriba
   y por el mismo motivo. (S151 · `.cs-sheet` ya no declara alto: se ancla por
   arriba con `--alto-sin-teclado` y su borde de abajo es éste, así que con
   teclado se acorta su lista y su cabecera no se mueve.)
   S168 · y descuenta la zona de ARRIBA. Con `contentInset: "always"` `100svh`
   ya era la ventana SIN la muesca; con "never" es la pantalla entera, y una
   hoja alta (la descripción larga, `#cap-sheet`) llegaría hasta y=0 con su
   cabecera bajo el reloj. */
.sh.open {
  max-height: calc(100svh - var(--kb, 0px) - var(--zona-arriba));
}

/* ── 2 · LOS MODALES (publicar un hábito) ────────────────────────────────────
   `.modal-overlay` es `position: fixed; inset: 0` y alinea su contenido abajo
   (`align-items: flex-end`), así que el modal se pega al borde inferior de la
   pantalla completa: exactamente el mismo caso. Se recorta el contenedor y el
   modal se recoloca solo, sin tocar el modal. */
.modal-overlay {
  bottom: var(--kb, 0px);
}

/* El sheet declara `max-height: 90vh` contra la pantalla ENTERA. Con el
   teclado abierto eso es más alto que el hueco que queda, y el resultado es un
   modal cuyo pie —donde están «Cancelar» y «Publicar»— no se alcanza. */
.modal-overlay > .modal-sheet {
  max-height: calc(90svh - var(--kb, 0px));
}

/* ═══════════════════════════════════════════════════════════════════════════
   S64 · EL COMPOSITOR DE COMUNIDAD SE QUEDA ABAJO · DECISIÓN DEL TITULAR
   ───────────────────────────────────────────────────────────────────────────
   Es una EXCEPCIÓN a la regla de arriba, y va escrita como tal para que nadie
   la lea como un olvido y la «arregle» dentro de seis meses.

   Lo reportado: al escribir en Comunidad, «Elige una categoría» sube. Se midió
   con el CSS real antes de tocar nada, y el pie sube EXACTAMENTE lo que mide
   el teclado —no hay doble desplazamiento—: es esta regla haciendo su trabajo,
   que era dejar las categorías y «Publicar» por encima del teclado.

       --kb    etiqueta.top    sube
         0        638,8          —
       150        488,8        150
       300        338,8        300
       430        208,8        430

   El titular lo ha visto medido y con las dos capturas delante, y ha elegido
   que se quede abajo igualmente. LA CONTRAPARTIDA, avisada y aceptada: con el
   teclado abierto el pie queda DETRÁS del teclado, así que ni las categorías
   ni «Publicar» se alcanzan hasta cerrarlo.

   ⚠️ SÓLO ESTA SUPERFICIE. La regla general no se toca: el modal de publicar
   un hábito, las hojas y la barra de comentarios siguen apartándose, que es lo
   que arregló la sesión 27. Cambiar `.modal-overlay` entero por esto habría
   dejado cuatro superficies bajo el teclado para arreglar una.

   ⚠️ S168 · LA CONTRAPARTIDA TENÍA UNA TRAMPA: «hasta cerrarlo» suponía que
   el teclado SE PODÍA CERRAR, y en la app de iOS no se podía (punto 27; el
   porqué entero en `base/teclado.js`, «CERRAR EL TECLADO COMO EN iOS»). La
   decisión de S64 se mantiene —el pie sigue detrás— y lo que se añade es la
   salida: `#social-composer` declara `data-cierra-teclado` en el marcado, y
   tocar fuera del campo o arrastrar hacia abajo baja el teclado y deja el pie
   con las categorías a la vista.
   ═══════════════════════════════════════════════════════════════════════════ */
#social-composer.modal-overlay { bottom: 0; }

/* ── S122 · LA BARRA INFERIOR NO SE PONE ENCIMA DEL TECLADO ─────────────────
   La isla de Tienda · Clan · Feed · Duelos · Perfil se ancla al borde inferior
   de `#app`: con la caja de escribir apartándose del teclado (el WebView que
   encoge en Android, `--kb` en la app de iOS desde S165) quedaría entre la caja
   y el teclado. Mientras hay teclado se retira, como la de cualquier app
   nativa; antes el teclado la tapaba, así que en el resto de pantallas se ve lo
   mismo que se veía. Vuelve al cerrarlo. */
body.teclado-abierto .app-bottomnav {
  display: none;
}

/* ── S131 · …Y EL HUECO QUE RESERVA SE VA CON ELLA ───────────────────
   La isla flota, así que los nueve paneles le reservan sitio con
   `padding-bottom: var(--isla-hueco)` (ver `css/layout-app.css`). Con la isla
   retirada ese relleno sería un hueco vacío entre la caja de escribir y el
   teclado —exactamente el 2º intento fallido de S67, otra vez y en otro sitio—.
   Se apaga la VARIABLE y no cada regla que la usa: así el próximo panel que
   reserve hueco con ella nace ya correcto, que es la razón de ser de esta hoja.
   (Es lo que vale donde el teclado encoge la ventana —Android— o donde lo
   gestiona el navegador —Safari—. En la app de iOS, ver S165 justo debajo.) */
body.teclado-abierto {
  --isla-hueco: 0px;
}

/* ── S168 · …Y LA ZONA DEL GESTO TAMPOCO SE RESERVA ──────────────────────
   Con el teclado arriba la barra del gesto (el indicador de inicio de iOS, la
   de navegación de Android) está TAPADA por el teclado: reservarla no protege
   nada y deja un hueco entre la caja de escribir y el teclado. Se apaga la
   VARIABLE (`css/tokens.css`) y no cada regla que la usa, como `--isla-hueco`
   justo arriba: `#app`, las pantallas hijas, la barra de comentarios, los
   avisos… la leen, y todos quedan pegados al teclado en el mismo recálculo en
   que se va la isla. UNA señal —esta clase—, ningún temporizador.

   Hace falta desde que la ventana llega al borde (`ios.contentInset:
   "never"`): con "always" la resta la hacía `base/teclado.js` en `--kb` (la
   «franja»), y el sitio correcto es éste. En las TRES plataformas y sin `if`:
   en Android Capacitor ya pone a 0 la variable con el teclado visible
   (`SystemBars.java:168-174`) y esto lo confirma aunque `env()` no lo hiciera;
   en Safari el indicador también está tapado.

   Sustituye a `--zona-del-gesto` (S165), que hacía esto mismo sólo para la
   barra de comentarios y sólo en la app de iOS: una variable para un hecho. */
body.teclado-abierto {
  --zona-abajo: 0px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   S165 · EN LA APP DE iOS LA PÁGINA RESERVA EL TECLADO · `body.teclado-fijo`
   ───────────────────────────────────────────────────────────────────────────
   El WebView de iOS ya no encoge con el teclado (`Keyboard.resize: "none"`,
   la causa entera en `base/teclado.js`, «UNA SEÑAL Y UN INSTANTE»): lo que
   antes apartaba el marco nativo 0,45 s tarde lo aparta ahora ESTA hoja, en el
   mismo instante en que el plugin avisa. `teclado-fijo` la pone
   `base/teclado.js` SÓLO cuando el adaptador de iOS declara que el WebView no
   encoge. NO es «es un iPhone»: en Safari (web) el navegador ya desplaza el
   viewport visual, y un relleno por `--kb` podría realimentarse; en Android
   encoge el sistema. Allí nada de esto aplica y se comportan como antes.

   Las reglas de arriba (`.sh.open`, `.modal-overlay`, S27) ya consumían `--kb`
   y siguen igual: se escribieron justo para un WebView que no encoge.

   ⚠️ SE ENCOGE LA CAJA (alto o `bottom`), NO SE RELLENA: `padding-bottom` no
   encoge la ventana de desplazamiento de un contenedor, y el revelado del
   cursor de WebCore podría dejar el cursor justo detrás del teclado.

   1 · LOS PANELES reservan el teclado DONDE reservaban la isla: el mismo
       `--isla-hueco`, que al retirarse la isla pasa a valer lo que tapa el
       teclado. La caja de escribir del chat del clan (última de una columna
       flexible) sube por ahí en el mismo recálculo en que se va la isla: UN
       movimiento, en vez de bajar 76 px en t=0 y subir 302 a los 0,45 s. */
body.teclado-fijo.teclado-abierto {
  --isla-hueco: var(--kb, 0px);
}

/* 2 · LAS PANTALLAS QUE ANTES SUBÍAN SOLAS con el marco y no están en un
       panel, una hoja o un modal. Censo hecho con la app en ejecución (S165):
       · `#auth-screen` — acceso, registro, recuperar la contraseña. Mide
         `100dvh` y se desplaza por dentro: se acorta su alto.
       · `.soc-screen` — el buscador de seguidores/seguidos (`absolute; inset:0`).
         S168 · por CLASE: las listas que se apilan encima de la primera son
         copias con otro id (`soc3-screen`), y su buscador sube igual.
       · `#toast-root` — los avisos: un error al enviar un comentario o un
         mensaje tiene que verse mientras se escribe.
       · `.capa-dialogo` — `appPrompt`/`appConfirm` (`features/feed/feed-core.js`):
         editar la bio, la contraseña, unirse a un clan, el hábito
         personalizado, denunciar… Sin esto «Guardar» quedaba medio tapado. */
body.teclado-fijo #auth-screen {
  height: calc(100dvh - var(--kb, 0px));
}
body.teclado-fijo .soc-screen {
  bottom: var(--kb, 0px);
}
body.teclado-fijo #toast-root {
  bottom: calc(24px + var(--zona-abajo) + var(--kb, 0px));
}
body.teclado-fijo .capa-dialogo {
  bottom: var(--kb, 0px);
}

/* 3 · [S168 · RETIRADO] `--zona-del-gesto: 0px`. Apagaba la zona del gesto
       de la barra de comentarios con el teclado abierto; ahora esa zona es
       `--zona-abajo`, la de TODA la página, y se apaga para todos en
       `body.teclado-abierto` (arriba, junto a `--isla-hueco`). */

/* ── 3 · MIENTRAS SE ESCRIBE, NADA DE ANIMACIONES DE FONDO ───────────────────
   No es estética: con el teclado abierto la mitad de la pantalla es teclado, y
   lo que queda es una lista y un campo de texto. Cualquier animación infinita
   que siga corriendo detrás compite por el compositor justo en el momento en
   que el usuario espera que cada pulsación aparezca al instante — y es la
   misma factura que esta sesión está quitando en el feed y en la cámara.

   Se para SÓLO lo decorativo e infinito. Los indicadores de carga y las
   transiciones de estado no entran: son información. */
body.teclado-abierto .flame-outer,
body.teclado-abierto .flame-inner,
body.teclado-abierto .rc-orbs::before,
body.teclado-abierto .rc-orbs::after {
  animation-play-state: paused;
}