/**
 * Botón lateral de PSE — NOVA
 *
 * Todo cuelga de .fpse y con reset propio, para que ni el tema ni Elementor lo
 * deformen, y para que él tampoco afecte al resto del sitio.
 */

.fpse{
  --fpse-azul:#0D3974;
  --fpse-azul-claro:#3B67A1;
  --fpse-top:44%;

  position:fixed;
  top:var(--fpse-top);
  z-index:99980;          /* por debajo de la barra de accesibilidad (99990) */
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 14px 7px 8px;
  background:var(--fpse-azul);
  color:#fff !important;
  text-decoration:none !important;
  font:700 13px/1.2 Raleway,system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.01em;
  box-shadow:0 10px 30px rgba(4,22,48,.34);
  transition:background-color .22s ease,transform .22s ease,padding .22s ease;
}

/* Pegado a su borde, con la esquina redondeada solo por dentro */
.fpse--derecha{right:0;border-radius:12px 0 0 12px;transform-origin:100% 50%}
.fpse--izquierda{left:0;border-radius:0 12px 12px 0;transform-origin:0 50%}

.fpse:hover,
.fpse:focus-visible{background:var(--fpse-azul-claro);color:#fff !important}
.fpse--derecha:hover,
.fpse--derecha:focus-visible{padding-right:19px}
.fpse--izquierda:hover,
.fpse--izquierda:focus-visible{padding-left:19px}

/* El foco tiene que verse: es un enlace que se alcanza con el tabulador */
.fpse:focus-visible{outline:3px solid #FFD558;outline-offset:3px}

/* El logotipo redondo de PSE sobre un disco blanco, para que el azul del logo no se pierda
   contra el azul del botón */
.fpse__logo{width:44px;height:44px;display:block;flex:0 0 auto;border-radius:50%;background:#fff;padding:2px;box-sizing:border-box}
.fpse__t{white-space:nowrap}

/* ── Teléfono ───────────────────────────────────────────────────────────
   En pantallas pequeñas el texto se va y queda solo el logotipo: una
   pastilla de 38 px no tapa contenido y sigue siendo un objetivo cómodo. */
@media (max-width:680px){
  .fpse{padding:6px;gap:0}
  .fpse__t{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .fpse--derecha:hover,.fpse--derecha:focus-visible{padding-right:10px}
  .fpse--izquierda:hover,.fpse--izquierda:focus-visible{padding-left:10px}
  
}

/* Quien pide menos movimiento no ve el desplazamiento al pasar el ratón */
@media (prefers-reduced-motion:reduce){
  .fpse{transition-duration:.01ms !important}
}

/* Al imprimir no pinta nada */


/* ── 1.2.0 · Círculos flotantes (correo de Fondecom del 28/09/2026) ─────────────
   PSE deja de ser una barra pegada al borde: es un círculo flotante abajo, con el de
   WhatsApp de Créditos debajo. El texto queda para lectores de pantalla y en el title. */
.fpse,.fpse-wa{
  top:auto;bottom:18px;width:60px;height:60px;padding:0;gap:0;justify-content:center;border-radius:50%;
  position:fixed;z-index:99980;display:flex;align-items:center;box-shadow:0 10px 26px rgba(4,22,48,.3);
  transition:transform .22s ease,background-color .22s ease}
.fpse{bottom:88px}
.fpse--derecha,.fpse-wa--derecha{right:18px;left:auto;border-radius:50%}
.fpse--izquierda,.fpse-wa--izquierda{left:18px;right:auto;border-radius:50%}
.fpse:hover,.fpse:focus-visible,.fpse-wa:hover,.fpse-wa:focus-visible{transform:scale(1.07);padding:0}
.fpse--derecha:hover,.fpse--derecha:focus-visible,.fpse--izquierda:hover,.fpse--izquierda:focus-visible{padding:0}
.fpse .fpse__logo{width:50px;height:50px}
.fpse-wa{background:#25D366;color:#fff !important;text-decoration:none !important}
.fpse-wa:hover,.fpse-wa:focus-visible{background:#1FB959}
.fpse-wa:focus-visible{outline:3px solid #0D3974;outline-offset:3px}
.fpse-wa svg{width:30px;height:30px;fill:#fff;display:block}
.fpse .fpse__t,.fpse-wa .fpse__t{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:680px){
  .fpse,.fpse-wa{width:52px;height:52px;bottom:14px}
  .fpse{bottom:76px}
  .fpse--derecha,.fpse-wa--derecha{right:12px}
  .fpse .fpse__logo{width:44px;height:44px}
  .fpse-wa svg{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){.fpse,.fpse-wa{transition:none}}

/* ── 1.3.0 · WhatsApp con dos líneas: el círculo es un <details> que abre un menú ──────── */
.fpse-wa--menu{background:none;box-shadow:none;border-radius:0;overflow:visible}
.fpse-wa--menu:hover,.fpse-wa--menu:focus-within{transform:none;background:none}
.fpse-wa--menu summary{list-style:none;cursor:pointer;width:60px;height:60px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(4,22,48,.3);transition:transform .22s ease}
.fpse-wa--menu summary::-webkit-details-marker{display:none}
.fpse-wa--menu summary:hover{transform:scale(1.07)}
.fpse-wa--menu summary:focus-visible{outline:3px solid #0D3974;outline-offset:3px}
.fpse-wa__m{position:absolute;bottom:70px;right:0;display:grid;gap:6px;min-width:210px;padding:8px;background:#fff;
  border-radius:14px;box-shadow:0 14px 34px rgba(4,22,48,.28)}
.fpse-wa--izquierda .fpse-wa__m{right:auto;left:0}
.fpse-wa__l{display:block;padding:11px 14px;border-radius:10px;background:#E9FBEF;color:#0B5B2A !important;
  font:700 14px/1.2 Raleway,system-ui,sans-serif;text-decoration:none !important;white-space:nowrap}
.fpse-wa__l:hover,.fpse-wa__l:focus-visible{background:#25D366;color:#0B2E16 !important}
.fpse-wa__l:focus-visible{outline:3px solid #0D3974;outline-offset:2px}
@media (max-width:680px){
  .fpse-wa--menu summary{width:52px;height:52px}
  .fpse-wa__m{bottom:62px}
}

/* 1.3.2: estas dos van DESPUÉS de «.fpse,.fpse-wa{display:flex}»; antes la pisaba y la opción no hacía nada */
@media (max-width:680px){.fpse.fpse--sin-movil,.fpse-wa.fpse--sin-movil{display:none}}
@media print{.fpse,.fpse-wa{display:none}}