/* ==========================================================================
   ft-movil-flotantes.css — FlexigoTech
   Los elementos flotantes cuando el menu movil esta abierto, y cuando sale el
   teclado del telefono.                                            11-09-2026

   QUE ARREGLA (medido, no supuesto, en 390x844 y 320x568)

   Con el menu movil ABIERTO seguian pintandose TRES cosas por encima del panel,
   porque el panel de navegacion va a z-index 1001 y ellas por encima:

       #ft-cc       (aviso de cookies)  z 2147483000 — solapaba 390x214 px
       #cwBtn / #ft-fab (boton unico)   z 9990       — solapaba 56x56 px
       #ssb-launch  (lanzador del chat) z 99998      — solapaba 62x62 px

   En un movil estrecho (320x568) eso tapaba SIETE enlaces del menu, «Contactar»
   incluido, que es justo el destino que mas se busca. Las tres estan ademas
   marcadas `inert` mientras el menu esta abierto (lo hace main.js para que el
   tabulador no se escape por debajo del panel), asi que se veian pero NO se
   podian pulsar: un boton muerto encima del menu.

   LA REGLA: mientras el panel de navegacion tapa la pagina, no flota nada mas.
   Al cerrarlo vuelve todo tal cual estaba.

   Se apoya en dos cosas a la vez, a proposito:
     · html.ft-menu-abierto — la pone y la quita main.js al abrir/cerrar.
     · html:has(#nav.open)  — la misma regla sin depender de main.js, por si un
                              navegador sirve una version cacheada del script.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MENU MOVIL ABIERTO -> nada flotando encima del panel.

   Los botones se quitan del todo (display:none): no hacen falta, el menu ya
   lleva «Contactar» dentro.
   -------------------------------------------------------------------------- */
html.ft-menu-abierto #cwBtn,
html.ft-menu-abierto .cw-btn,
html.ft-menu-abierto #cwPopup,
html.ft-menu-abierto .cw-popup,
html.ft-menu-abierto #ft-fab,
html.ft-menu-abierto #ft-fab-menu,
html.ft-menu-abierto #ssb-launch,
html.ft-menu-abierto #ssb-panel,
html:has(#nav.open) #cwBtn,
html:has(#nav.open) .cw-btn,
html:has(#nav.open) #cwPopup,
html:has(#nav.open) .cw-popup,
html:has(#nav.open) #ft-fab,
html:has(#nav.open) #ft-fab-menu,
html:has(#nav.open) #ssb-launch,
html:has(#nav.open) #ssb-panel {
  display: none !important;
}

/* El aviso de cookies NO se quita con display:none a proposito: se mide su alto
   con un ResizeObserver para publicar --ft-cc-alto, y una caja sin alto dejaria
   esa medida a cero. Con visibility se conserva la caja, deja de verse y deja de
   recibir pulsaciones; al cerrar el menu reaparece intacto y sin recalcular. */
html.ft-menu-abierto #ft-cc,
html:has(#nav.open) #ft-cc {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   2. TECLADO DEL TELEFONO -> los botones flotantes se apartan del formulario.

   Al tocar un campo, el teclado sube desde abajo y el navegador encoge el
   viewport visual: todo lo que esta en position:fixed abajo se queda pegado
   justo encima del teclado, o sea, ENCIMA del campo que se esta escribiendo y
   de la fila de botones del formulario. Mientras hay un campo de texto con el
   foco, nuestro boton y el lanzador del chat desaparecen.

   Solo campos donde se ESCRIBE: las casillas del aviso de cookies, los radios y
   los botones quedan fuera, que si no bastaba con marcar una casilla para que
   se fuera el boton.

   Solo por debajo de 980px, que es donde hay teclado en pantalla; en escritorio
   no se toca nada.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  body:has(textarea:focus) #cwBtn,
  body:has(textarea:focus) .cw-btn,
  body:has(textarea:focus) #ft-fab,
  body:has(textarea:focus) #ssb-launch,
  body:has(select:focus) #cwBtn,
  body:has(select:focus) .cw-btn,
  body:has(select:focus) #ft-fab,
  body:has(select:focus) #ssb-launch,
  body:has([contenteditable="true"]:focus) #cwBtn,
  body:has([contenteditable="true"]:focus) .cw-btn,
  body:has([contenteditable="true"]:focus) #ft-fab,
  body:has([contenteditable="true"]:focus) #ssb-launch,
  body:has(input:focus:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="range"])) #cwBtn,
  body:has(input:focus:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="range"])) .cw-btn,
  body:has(input:focus:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="range"])) #ft-fab,
  body:has(input:focus:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="range"])) #ssb-launch {
    display: none !important;
  }

  /* Si el menu del boton flotante estuviera abierto cuando aparece el teclado,
     se cierra a la vista igual que el boton: si no, quedaria un panel colgando
     sin boton del que salir. */
  body:has(textarea:focus) #ft-fab-menu,
  body:has(textarea:focus) .cw-popup,
  body:has([contenteditable="true"]:focus) #ft-fab-menu,
  body:has([contenteditable="true"]:focus) .cw-popup {
    display: none !important;
  }
}

/* En una impresion no pinta nada de esto. */
@media print {
  #cwBtn, .cw-btn, #cwPopup, .cw-popup,
  #ft-fab, #ft-fab-menu,
  #ssb-launch, #ssb-panel, #ft-cc { display: none !important; }
}