/* ============================================================
   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.
   ============================================================ */

/* Al imprimir no hay caja que arrastrar: la tabla, entera. */
@media print {
  .mov-tw { overflow: visible !important; }
  .mov-tw-pista { display: none !important; }
}

/* 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 arrastran de lado, no estiran la página ---
     La caja la pone assets/js/tabla_movil.js, porque envolver un
     elemento en otro el CSS no lo sabe hacer. Aquí sólo se le da
     el aspecto.

     ⚠️ NO se pone `display:block` a la tabla. Se probó y sale peor:
     la tabla deja de ser tabla por fuera, ya no obliga a respetar el
     ancho mínimo de sus columnas, y en vez de desbordarse se APLASTA
     dentro de la pantalla. El resultado es una tabla estrujada, con
     el texto recortado y SIN NINGUNA MANERA de llegar a lo que se ha
     quedado fuera (pasó de verdad en Facturas: 45 tablas así). Una
     tabla de verdad nunca baja del ancho mínimo de su contenido, y
     por eso desborda la caja — que es justo lo que hace falta para
     que la caja tenga algo que desplazar. */
  .mov-tw {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* El cartel de «esto se arrastra». Sin él, una tabla cortada por la
     derecha parece una pantalla mal hecha; nadie prueba a deslizarla.
     Lo pone el JS sólo cuando de verdad sobra tabla, y se va solo en
     cuanto la mueves una vez. */
  .mov-tw-pista {
    display: flex; align-items: center; gap: 6px;
    margin: 6px 0 2px;
    font-size: .76rem; font-weight: 600;
    color: var(--gris-texto, #667085);
  }
  .mov-tw-pista span { font-size: .95rem; }

  /* Red de seguridad: si el JS no llegó a cargarse, al menos que UNA
     tabla ancha no deje diminuta la pantalla entera. Se aplasta, que
     es malo, pero es menos malo que alejar toda la página. En cuanto
     el JS entra pone la clase en <html> y esto se apaga. */
  html:not(.mov-tablas) table { display: block; max-width: 100%; overflow-x: auto; }

  /* --- Un desplegable enseña el nombre entero, o no sirve ---
     En el ordenador sobra sitio y a los desplegables se les pone un
     tope en píxeles («max-width:280px») para que no se estiren de
     lado a lado. En el móvil ese tope es justo lo que sobra: el
     empleado «Rodríguez Fernández de la Vega, María Inmaculada» se
     queda en «Rodríguez Fernández de la Veg» y no hay manera de leer
     de quién se trata — ni de saber a quién estás asignando.

     Aquí se le quita el tope (el `100%` no puede desbordar: como
     mucho llega al borde de su caja) y se le deja CRECER si está en
     una fila con hueco libre. Encoger no se toca: crecer nunca saca
     nada de la pantalla. */
  select {
    max-width: 100% !important;
    flex-grow: 1;
    text-overflow: ellipsis;
  }
  /* Un desplegable dentro de una TABLA es otro caso: el ancho se lo da su
     columna, y un `select` no tiene ancho mínimo propio, así que la columna
     lo estrujaba hasta 21px — un desplegable en el que no se lee NADA (el
     IVA de cada renglón de una factura). Se le da un mínimo. Ensanchar la
     tabla ya no es un problema: desde tabla_movil.js se arrastra de lado. */
  td select, th select { min-width: 9.5rem; }

  /* --- 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; }

  /* ⚠️ UN FORMULARIO DENTRO DE UNA FILA DE FILTROS TAMPOCO (2026-09-14).
     En Asociados de AFUTBAL, con 1.130 fichas, la página entera era más
     ancha que el móvil y el navegador la alejaba: el desplegable de
     actividades va dentro de un <form>, ese form es un hijo de una fila
     flex, y un hijo flex mide DE MÍNIMO lo que su contenido — la opción
     más larga, «Escuela AFUTBAL 26-27 … (143)». El `max-width:100%` del
     select no servía de nada, porque el 100% era de un form que ya se
     había ensanchado. Con los datos de prueba (nombres cortos) no salía:
     es el tipo de fallo que solo se ve con un club de verdad. */
  form, details, fieldset { max-width: 100%; min-width: 0; }
  /* Y lo mismo con cualquier caja que tenga un desplegable DENTRO (un
     `<div class="fg">` de una rejilla, un `<label>` de una fila flex): la
     caja mide de mínimo lo que su opción más larga, así que se le deja
     encoger y el desplegable, que ya no pasa del 100%, cabe. Medido con
     nombres de club de verdad: en Pagos, Cuotas, Banco, TPV, Cómo cobra el
     club y Automatizaciones la página se salía por ahí. */
  :where(div, label, span, p, li):has(> select) { min-width: 0; max-width: 100%; }
  /* Un piso más: el hueco de la derecha de una cabecera que lleva un
     <form> con el desplegable dentro («Cómo cobra el club»: el año). */
  :where(div, label, span, p, li):has(> form > select) { min-width: 0; max-width: 100%; }
  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, .cj-campos,
  .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;
  }

  /* ⚠️ Y ESTO, QUE PARECE DE ADORNO Y NO LO ES.
     Poner la rejilla en una columna NO basta: un hijo con
     `grid-column:span 2` PIDE dos columnas, y si no las hay el
     navegador se las INVENTA. La rejilla seguía saliendo a dos
     columnas —y con los desplegables cortados— por dos `<div>` con
     un `span 2` puesto a mano (pasaba en Nueva factura y en Caja).
     Con una sola columna, «ocupa dos» y «ocupa la fila» son lo
     mismo, así que se les quita a todos. La lista de arriba y esta
     tienen que ir SIEMPRE juntas. */
  .ct-grid > *, .gs-grid > *, .fac-grid > *, .fs-grid > *, .rm-grid > *,
  .cj-grid > *, .cj-campos > *, .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-column: auto !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;
  }
  .gs-cols > *, .pd-dos > *, .dl2 > *, .ficha-layout > *, .editor > * {
    grid-column: auto !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; }

  /* ⚠️ …PERO UNA CASILLA NO ENCOGE (2026-09-14). El `min-width:0` de arriba
     también le llega a una casilla, y dentro de una etiqueta flex con un
     texto largo al lado («Es administrador o consejero de la sociedad…») la
     casilla cedía su sitio al texto hasta quedarse en un PUNTITO que no se
     puede ni ver ni tocar. */
  input[type="checkbox"], input[type="radio"] { flex-shrink: 0; }
}

/* ⚠️ Y LA TABLET EN HORIZONTAL TAMBIÉN ES UN iPAD (2026-09-13).
   Todo lo de arriba corta en 991px, que es donde aparece el menú lateral,
   pero un iPad tumbado mide 1024 (y los grandes, 1180 o 1366): tiene menú
   lateral Y el zoom de Safari al tocar un campo. Medido: 124 pantallas con
   campos de menos de 16px a 1024. Aquí no se mira el ANCHO sino el DEDO
   (`pointer: coarse`): un ordenador con ratón no cambia nada, y un portátil
   con pantalla táctil tampoco, porque su puntero principal sigue siendo el
   ratón. */
@media (min-width: 992px) and (pointer: coarse) {
  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;
  }
  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; }
}

/* ⚠️ MIENTRAS SE ESCRIBE, LOS BOTONES REDONDOS SE APARTAN.
   El hueco de abajo solo sirve para el FINAL de la página: a media pantalla
   los dos botones caen encima de lo que haya, y en un formulario eso es un
   campo — el de «Competición» en Mis partidos, el ojo de la contraseña en
   Ajustes, «Apellidos» en Mis datos. Con el teclado abierto es peor, porque
   la pantalla útil se queda en la mitad. Mientras hay un campo con el cursor
   dentro no hacen falta (nadie abre el chat a mitad de escribir), así que se
   desvanecen y dejan de recibir toques; al salir del campo vuelven. Sin
   `:has()` (navegadores muy viejos) simplemente se quedan como estaban. */
@media (max-width: 991px), (pointer: coarse) {
  .gb-fab { transition: opacity .15s, transform .15s, box-shadow .15s; }
  body:has(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):focus,
           textarea:focus, select:focus, [contenteditable="true"]:focus) .gb-fab,
  /* Y mientras se BAJA leyendo (lo pone assets/js/fab_movil.js, que solo
     actúa por debajo de 992px): a media lista tapaban los nombres. Al
     subir un poco, arriba del todo o al final de la página, vuelven. */
  body.fab-oculto .gb-fab {
    opacity: 0; pointer-events: none; transform: scale(.85);
  }
}

/* ============================================================
   6. LOS FILTROS DE UN LISTADO, PLEGADOS EN EL MÓVIL
   ------------------------------------------------------------
   En el ordenador los filtros son una fila; en el móvil cada campo
   baja a su renglón y un listado con seis filtros (el banco, los
   gastos, las facturas) enseñaba una pantalla entera de desplegables
   ANTES del primer apunte. Se deja a la vista la caja de buscar —lo
   que más se usa— y el resto se pliega detrás de un botón que dice
   cuántos filtros hay puestos, para que un filtro olvidado no
   esconda nada sin avisar. Lo hace assets/js/filtros_movil.js (hay
   que añadir el botón, y eso es del DOM); sin él, todo a la vista.
   ============================================================ */
.fm-toggle { display: none; }
@media (max-width: 720px) {
  form.fm-plegable > .fm-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    flex: 1 1 100%; width: 100%; box-sizing: border-box;
    padding: 11px 14px; min-height: 44px;
    border: 1.5px solid var(--borde, #e4e7ec); border-radius: 10px;
    background: #fff; color: var(--negro, #1a1a1a);
    font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  }
  form.fm-plegable > .fm-toggle b {
    background: var(--brand, #7c3aed); color: var(--on-brand, #fff);
    border-radius: 999px; padding: 1px 8px; font-size: .75rem; margin-left: 6px;
  }
  form.fm-plegable > .fm-toggle .fm-flecha { transition: transform .15s; }
  form.fm-plegable:not(.fm-cerrado) > .fm-toggle .fm-flecha { transform: rotate(180deg); }
  form.fm-plegable.fm-cerrado > :not(.fm-toggle):not(.fm-fija) { display: none !important; }
  form.fm-plegable > .fm-fija { flex: 1 1 100%; width: 100%; }
  form.fm-plegable > .fm-fija input { width: 100%; box-sizing: border-box; }
}

/* ============================================================
   7. LO QUE SE TOCA CON EL DEDO, DE UN TAMAÑO QUE SE ACIERTE
   ------------------------------------------------------------
   Medido a 390px: en unas 85 pantallas había algo que se pulsa y
   mide menos de 24px de alto (lo mínimo de las pautas de accesibilidad,
   WCAG 2.2), y se repetían siempre las mismas piezas: el enlace de
   volver de las pantallas viejas, las cabeceras de tabla que ordenan y
   la casilla de marcar una fila. Un texto con un enlace DENTRO de un
   párrafo no entra: ahí el tamaño lo pone la línea, y así lo admiten
   las propias pautas.
   ============================================================ */
@media (max-width: 991px) {
  /* «‹ Actividades», «Volver a configuración» */
  .wrap > a.back, .wrap > a.volver {
    display: inline-flex; align-items: center; min-height: 40px;
  }
  /* Ordenar por una columna: el enlace es la palabra de la cabecera. */
  th > a { display: inline-block; padding: 10px 0; }
  /* La casilla de una fila de tabla (marcar para una acción en bloque). */
  td > input[type="checkbox"], th > input[type="checkbox"] {
    width: 20px !important; height: 20px !important;
  }
}