/* ============================================================
   GN CORE — LA CAPA DEL MÓVIL
   ------------------------------------------------------------
   POR QUÉ EXISTE ESTE ARCHIVO

   El programa se ve bien en el ordenador y CASI bien en el
   móvil. El «casi» son cuatro cosas que no se arreglan pantalla
   a pantalla porque están repetidas en cien sitios:

   1. LA CABECERA QUE SE ESCONDE. En el móvil hay una barra negra
      FIJA arriba de 54px (barra.css). Cada pantalla tiene además
      su propia cabecera blanca —el botón de volver y el título—
      pegada con `position:sticky; top:0`. Al bajar, esa cabecera
      se pega arriba del TODO, es decir, DEBAJO de la barra negra:
      desaparece. Con el ratón no pasa nada de esto porque la
      barra negra no existe en el ordenador.

   2. EL MÓVIL ENCOGE LA PÁGINA ENTERA. Si UNA cosa es más ancha
      que la pantalla —una tabla de nueve columnas, una rejilla
      con las columnas puestas en píxeles— el navegador no la
      corta: aleja toda la página hasta que quepa. Un solo detalle
      de más deja el texto de TODA la pantalla diminuto. Por eso
      las tablas se desplazan de lado dentro de su caja y las
      rejillas de formulario se ponen en una sola columna.

   3. EL iPHONE HACE ZOOM AL TOCAR UN CAMPO. Safari lo hace SIEMPRE
      que la letra del campo mide menos de 16px, y luego no vuelve
      atrás: te deja la pantalla torcida hasta que la enderezas a
      mano. Casi todos los campos del programa están en 0.85rem.

   4. LOS BOTONES REDONDOS TAPAN EL CONTENIDO. En el ordenador
      sobra sitio a la derecha; en el móvil caen justo encima de
      la última fila de la tabla.

   CÓMO CONVIVE CON LO QUE YA HABÍA
   Se carga desde barraCss(), o sea ANTES del <style> de cada
   pantalla. Como la pantalla manda sobre lo suyo, aquí hace falta
   `!important`: no es dejadez, es que este archivo existe justo
   para corregir a la pantalla, y encima tiene que ganarle también
   al `style="…"` escrito en el propio HTML (que es donde viven
   las rejillas con columnas en píxeles). Todo va dentro de una
   media query: en el ordenador este archivo no pinta nada.
   ============================================================ */

/* Alto de la barra negra del móvil. Si cambia en barra.css,
   cambia aquí: es la misma medida contada dos veces. */
:root { --mov-barra: 54px; }
/* Cuando un administrador está «viendo como» otra persona hay ADEMÁS
   un cartel amarillo fijo de 42px encima de todo (includes/ver_como.php,
   que ya empuja el cuerpo a 96px). Redefinir aquí la medida hace que
   todas las reglas de abajo se corran solas: no hay que repetirlas. */
body.vc-on { --mov-barra: 96px; }

/* ============================================================
   1. LO QUE SE PEGA ARRIBA, DEBAJO DE LA BARRA NEGRA
   ------------------------------------------------------------
   Son los nombres que le han ido poniendo a la MISMA cosa: la
   cabecera blanca de la pantalla. `.header` está copiada en 28
   archivos; los `xx-header` son los de cada módulo.
   OJO: aquí NO entra ningún `th`. Las cabeceras de tabla también
   se pegan con top:0, pero se pegan a SU caja con scroll, no a la
   pantalla; moverlas 54px las dejaría flotando en el aire.
   ============================================================ */
@media (max-width: 991px) {
  .header, .cabecera,
  .ct-header, .fac-header, .gs-header, .fs-header, .rm-header,
  .cj-header, .mk-header, .mkt-header, .pl-header, .pf-header, .rf-header,
  .ui-head, .ecat-nav, .dropdown-nav, .top,
  /* El cartel del silencio de avisos: es lo que NUNCA puede perderse
     de vista (si se olvida puesto, el club cree que avisa y no avisa). */
  .aviso-tira {
    top: var(--mov-barra) !important;
  }
}

/* ============================================================
   2. QUE NADA SEA MÁS ANCHO QUE LA PANTALLA
   ============================================================ */
@media (max-width: 991px) {

  /* --- Tablas: se desplazan de lado, no estiran la página ---
     Una tabla puesta en `block` sigue pintándose como tabla por
     dentro (las filas y las celdas no cambian), pero por fuera ya
     es una caja normal: lo que no cabe se arrastra con el dedo en
     vez de ensanchar la página. Si la tabla ya venía dentro de una
     caja con scroll (.gs-tw, .ct-tw, .tabla-scroll…), esto no
     estorba: la de dentro simplemente no llega a desplazarse. */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Una tabla de una sola columna (las de «no hay nada todavía»)
     no tiene nada que desplazar y en `block` perdería el 100%. */
  table > thead, table > tbody, table > tfoot { display: table-row-group; }
  table > thead { display: table-header-group; }

  /* --- Campos de fecha y hora ---
     Traen un ancho mínimo de fábrica (~153px en Chrome) que no se
     puede negociar: tres de ellos en fila ya sacan la página de la
     pantalla. En el móvil van a lo ancho de su hueco. */
  input[type="date"], input[type="time"], input[type="datetime-local"],
  input[type="month"], input[type="week"] {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* --- Ir a un sitio de la página no deja el sitio tapado ---
     Al guardar, varias pantallas vuelven con «#g12» para señalar la fila
     que acabas de tocar. El navegador la deja pegada arriba del todo…
     que en el móvil es DEBAJO de la barra negra: la fila señalada es
     justo la única que no se ve. */
  :target { scroll-margin-top: calc(var(--mov-barra) + 12px); }

  /* --- Nada se sale de su caja --- */
  img, video, canvas, svg:not([width]) { max-width: 100%; height: auto; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* ============================================================
   3. LAS REJILLAS DE FORMULARIO, EN UNA SOLA COLUMNA
   ------------------------------------------------------------
   Debajo de 720px no hay sitio para dos campos uno al lado del
   otro, y menos para columnas escritas en píxeles («150px 1.6fr
   150px 1fr 1fr»). Muchas están puestas con `style="…"` en el
   propio HTML, así que la única manera de ganarles es `!important`.

   NO entran aquí los calendarios ni el planificador de horarios:
   una semana de siete columnas puesta en una sola columna deja de
   ser un calendario. Esos se desplazan de lado (más abajo).
   ============================================================ */
@media (max-width: 720px) {
  .ct-grid, .gs-grid, .fac-grid, .fs-grid, .rm-grid, .cj-grid,
  .mt-grid, .form-grid, .grid2, .g2, .g3, .dos, .cols, .fila, .fila3,
  .form-row, .fm-row, .pf-grid, .mk-grid, .ej-grid, .subtipo-grid,
  .grid-cols, .rejilla, .rej {
    grid-template-columns: 1fr !important;
  }
  /* Las de dos bloques (formulario a la izquierda, resumen a la
     derecha) que aún no bajaban de dos columnas. */
  .gs-cols, .pd-dos, .dl2, .ficha-layout, .editor {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   4. EL iPHONE Y EL ZOOM AL TOCAR UN CAMPO
   ------------------------------------------------------------
   Safari hace zoom en cuanto la letra del campo baja de 16px, y
   al salir del campo NO deshace el zoom. El resultado es el que
   se ve: escribes en un buscador y la pantalla se queda torcida.
   16px exactos es el mínimo que lo evita.
   ============================================================ */
@media (max-width: 991px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]),
  select, textarea {
    font-size: 16px !important;
  }

  /* «Elegir archivo» es la excepción: no se escribe en él, así que
     el iPhone no le hace zoom, y en cambio su ancho SÍ crece con la
     letra —lleva dentro el botón y el nombre del archivo— hasta
     sacar la página de la pantalla. Se queda como estaba y, además,
     se le prohíbe pasarse de ancho. */
  input[type="file"] { max-width: 100% !important; }

  /* Un campo no puede empujar a su caja: sin esto, un `input` suelto
     dentro de una celda de tabla se planta en su ancho de fábrica
     (unos 20 caracteres) y ensancha la tabla entera.

     Y `min-width:0` por lo mismo pero al revés: un `select` mide de
     mínimo lo que mida su opción MÁS LARGA, y ese mínimo se lo pasa a
     la columna que lo contiene. Dos filtros uno al lado del otro en una
     rejilla «1fr 1fr» —«Todas las sedes» y «Todas las líneas»— sacaban
     la página de la pantalla por culpa del texto de un desplegable que
     ni siquiera está abierto. */
  input, select, textarea { max-width: 100%; min-width: 0; }
}

/* ============================================================
   5. LOS BOTONES REDONDOS NO TAPAN LA ÚLTIMA FILA
   ------------------------------------------------------------
   En el móvil el contenido llega hasta el borde, así que el botón
   del asistente se sienta encima de lo último de la página. Se
   hacen un poco más pequeños, se arriman a la esquina y se le deja
   sitio a la página por abajo.
   ============================================================ */
@media (max-width: 991px) {
  .gb-fab { right: 12px !important; bottom: 12px !important; width: 50px !important; height: 50px !important; }
  .gb-fab.com { bottom: 72px !important; width: 42px !important; height: 42px !important; }
  /* El hueco de abajo va con `!important` porque casi todas las pantallas de
     módulo declaran su propio `padding-bottom:60px`, que se queda corto: el
     botón redondo empieza a 12px del borde y mide 50, o sea 62. */
  body { padding-bottom: 78px !important; }
}