/* ==========================================================================
   ft-flotantes.css — FlexigoTech · los botones que flotan sobre la pagina
   10-09-2026

   EL PROBLEMA QUE ARREGLA
   Habia CUATRO cosas flotando a la vez y dos de ellas encima de la otra:

     · #ssb-launch  — el lanzador del chat de soporte (widget.js remoto),
                      bottom:20px right:20px, 62x62.
     · .cw-btn      — el boton de contacto escrito a mano en 52 paginas,
                      bottom:28px right:28px, 56x56  --> ENCIMA del chat.
     · #ft-demo-btn — el cohete que main.js inyectaba, bottom:80px left:20px.
     · #ft-videocall-btn — la camara que main.js inyectaba, bottom:20px left:20px.

   LA REGLA QUE SE APLICA AQUI
   La esquina inferior DERECHA es del chat y de nadie mas. Todo lo nuestro
   vive en la esquina inferior IZQUIERDA y es UN SOLO boton: el que despliega
   un menu con las acciones (demo, videollamada, WhatsApp, correo). main.js
   ya no inyecta el cohete ni la camara; si una version cacheada lo hiciera,
   las reglas del final los dejan ocultos igualmente.
   ========================================================================== */

:root {
  --ft-fab-lado: 20px;      /* separacion al borde */
  --ft-fab-alto: 56px;      /* diametro del boton  */
}

/* --------------------------------------------------------------------------
   1. El boton de contacto escrito a mano (.cw-btn / .cw-popup) se muda a la
      izquierda. Se usa !important porque el estilo original va en un <style>
      dentro de cada una de las 52 paginas y no se puede tocar desde aqui.
   -------------------------------------------------------------------------- */
.cw-btn {
  left: var(--ft-fab-lado) !important;
  right: auto !important;
  bottom: var(--ft-fab-lado) !important;
  width: var(--ft-fab-alto) !important;
  height: var(--ft-fab-alto) !important;
  z-index: 9990 !important;
}

.cw-popup {
  left: var(--ft-fab-lado) !important;
  right: auto !important;
  bottom: calc(var(--ft-fab-lado) + var(--ft-fab-alto) + 12px) !important;
  width: min(300px, calc(100vw - 40px)) !important;
  max-height: calc(100vh - var(--ft-fab-lado) * 2 - var(--ft-fab-alto) - 24px) !important;
  overflow-y: auto !important;
  z-index: 9989 !important;
}

/* --------------------------------------------------------------------------
   2. El boton unico que inyecta main.js en las paginas SIN .cw-btn.
   -------------------------------------------------------------------------- */
#ft-fab {
  position: fixed;
  left: var(--ft-fab-lado);
  bottom: var(--ft-fab-lado);
  z-index: 9990;
  width: var(--ft-fab-alto);
  height: var(--ft-fab-alto);
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 50%;
  background: #2563EB;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
  transition: background .2s ease;
}

#ft-fab:hover,
#ft-fab[aria-expanded="true"] { background: #1D4ED8; }

#ft-fab svg { width: 24px; height: 24px; fill: currentColor; }

#ft-fab-menu {
  position: fixed;
  left: var(--ft-fab-lado);
  bottom: calc(var(--ft-fab-lado) + var(--ft-fab-alto) + 12px);
  z-index: 9989;
  width: min(300px, calc(100vw - 40px));
  max-height: calc(100vh - var(--ft-fab-lado) * 2 - var(--ft-fab-alto) - 24px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(12, 13, 20, .14);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#ft-fab-menu[hidden] { display: none; }

#ft-fab-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #0F172A;
  font: 600 15px/1.3 Inter, system-ui, sans-serif;
  text-decoration: none;
}

#ft-fab-menu a:hover,
#ft-fab-menu a:focus-visible { background: #fff; border-color: #CBD5E1; }

#ft-fab-menu a .ft-fab-ic { font-size: 17px; line-height: 1; }

/* --------------------------------------------------------------------------
   3. Nunca mas dos botones nuestros a la vez.
      Si un navegador sirve un main.js cacheado que todavia inyecta el cohete y
      la camara, quedan ocultos: el menu del boton unico ya lleva las dos
      acciones, asi que no se pierde ningun destino.
   -------------------------------------------------------------------------- */
#ft-demo-btn,
#ft-videocall-btn { display: none !important; }

/* --------------------------------------------------------------------------
   4. El aviso de cookies ocupa el borde inferior completo mientras esta a la
      vista. Levantamos lo nuestro para que no quede ni tapado ni tapando.
      cookie-consent.js pone/quita .ft-cc-visible en <html>.
   -------------------------------------------------------------------------- */
.ft-cc-visible .cw-btn,
.ft-cc-visible #ft-fab { bottom: calc(var(--ft-fab-lado) + var(--ft-cc-alto, 150px)) !important; }

/* El lanzador del chat lo pinta un script remoto en la esquina derecha, y el
   aviso de cookies (z-index 2147483000) se le ponia encima: mientras el
   visitante no decidia, el chat estaba tapado. Sube con el resto. */
.ft-cc-visible #ssb-launch,
.ft-cc-visible #ssb-bubble,
.ft-cc-visible #ssb-wa { bottom: calc(20px + var(--ft-cc-alto, 150px)) !important; }

.ft-cc-visible .cw-popup,
.ft-cc-visible #ft-fab-menu {
  bottom: calc(var(--ft-fab-lado) + var(--ft-cc-alto, 150px) + var(--ft-fab-alto) + 12px) !important;
}

/* --------------------------------------------------------------------------
   5. Movil estrecho: el boton se pega un poco mas al borde y el menu ocupa el
      ancho util menos los margenes, sin desbordar nunca en horizontal.
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  :root { --ft-fab-lado: 14px; }
  #ft-fab-menu,
  .cw-popup { width: calc(100vw - 28px) !important; }
}

/* El menu flotante no pinta nada en una impresion. */
@media print {
  #ft-fab, #ft-fab-menu, .cw-btn, .cw-popup { display: none !important; }
}

/* --------------------------------------------------------------------------
   6. CINTURON Y TIRANTES — 10-09-2026 (segunda pasada)

   Lo de arriba ya dejaba UN boton nuestro y el chat. Pero el <style
   id="ft-responsive-fixes"> que main.js inyecta EN <body> —o sea, despues de
   esta hoja— volvia a escribir por debajo de 768px:

       .cw-btn   { right: 18px !important; bottom: 18px !important }
       .cw-popup { right: 12px !important; bottom: 84px !important }

   Es decir, mandaba otra vez el boton de contacto a la esquina inferior
   DERECHA, que es donde el widget remoto pinta #ssb-launch. Que no se vieran
   encima el uno del otro dependia de un detalle fragil de la cascada (con
   `left` y `right` puestos a la vez y el ancho fijo, en un idioma de izquierda
   a derecha gana `left`): bastaba con que alguien tocara el `left` para que los
   dos botones volvieran a superponerse. Esas cuatro lineas se han quitado de
   main.js; aqui queda la red por si un navegador sirve un main.js cacheado.
   -------------------------------------------------------------------------- */
.cw-btn  { right: auto !important; }
.cw-popup { right: auto !important; }

/* Y si por lo que sea llegaran a existir los DOS botones nuestros en la misma
   pagina (main.js solo crea #ft-fab cuando no hay #cwBtn, pero una version
   cacheada podria no saberlo), manda el escrito a mano y el otro no se pinta.
   Nunca dos. */
body:has(#cwBtn) #ft-fab,
body:has(#cwBtn) #ft-fab-menu { display: none !important; }

/* El aviso de cookies ocupa el borde inferior entero. Mientras esta puesto, el
   menu del boton flotante no debe quedar por detras de el: el aviso va a
   z-index 2147483000, asi que el menu sube por encima solo mientras esta
   abierto (si estuviera siempre arriba, taparia el aviso al reves). */
.ft-cc-visible #ft-fab-menu:not([hidden]),
.ft-cc-visible .cw-popup.open { z-index: 2147483001 !important; }