/* component-bg-tooltip.css */
section.component-bg-tooltip { position: relative; }
section.component-bg-tooltip.has-tooltips { isolation: isolate; }

/* Botón circular */
.fyx-tooltip { 
  position: absolute; 
  width: 56px; 
  height: 56px; 
  transform: translate(-50%, -50%); /* centra respecto a left/top */
  background: #0d89ca; 
  border: 1px solid #fff; 
  border-radius: 50%; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  padding: 0; 

  box-shadow: 0 6px 16px rgba(0,0,0,.18); 
  z-index: 3;
}
.fyx-tooltip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.fyx-tooltip:hover {
  cursor: pointer; 
}
/* Signo + que rota a X */
.fyx-plus { position: relative; width: 32px; height: 32px; pointer-events: none; }
.fyx-plus .line { position: absolute; left: 50%; top: 50%; width: 26px; height: 2px; background: #fff; transform: translate(-50%, -50%); }
.fyx-plus .line.v { transform: translate(-50%, -50%) rotate(90deg); }

/* Panel */
.fyx-tooltip-panel { 
  position: absolute; 
  left: calc(100% + 22px); 
  top: 50%; 
  transform: translateY(-50%); 
  min-width: 220px; 
  max-width: min(75vw, 320px); 
  background: rgba(255,255,255,1); 
  color: #4e4f50; 
  padding: 14px 16px; 
  line-height: 1.35; 
  font-size: 17px;
  text-align: left; 
  box-shadow: 0 12px 28px rgba(0,0,0,.18); 
  z-index: 2;
}
.fyx-tooltip-panel::before { content: ""; position: absolute; left: -32px; top: 50%; transform: translateY(-50%); border: 16px solid transparent; border-right-color: #fff; }

/* Evita interacción cuando está cerrado; GSAP maneja la opacidad */
.fyx-tooltip[aria-expanded="false"] .fyx-tooltip-panel { pointer-events: none; }
.fyx-tooltip[aria-expanded="true"] .fyx-tooltip-panel { pointer-events: auto; }

/* Por defecto (desktop) ocultamos los párrafos cuando el componente ha construido tooltips */
section.component-bg-tooltip.tooltips-built p[data-x][data-y] { display: none; }

/* --- Mobile: listar párrafos, ocultar tooltips --- */
@media (max-width: 1079px) {
  /* Contenedor: empuja el listado al fondo y permite envolver en columnas */
  main section.component-bg-tooltip {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end; /* líneas al fondo */
    justify-content: center;
    align-items: flex-end; /* items al fondo */
    padding: 16px; /* respiración del listado */
    gap: 12px; /* separación entre tarjetas */
    padding-bottom: 350px;
    height: 400px !important;
  }

  /* Botones circulares visibles también en mobile */
  section.component-bg-tooltip .fyx-tooltip { display: inline-flex; }


  section.component-bg-tooltip .fyx-tooltip-panel{
    box-sizing: border-box;
  }
  
  /* Párrafos como tarjetas con la misma estética del panel del tooltip */
  section.component-bg-tooltip p[data-x][data-y] {
    display: block;
    position: absolute;
    margin: 0; /* usaremos gap del contenedor */
    background: rgba(255,255,255,0.9);
    color: #4e4f50;
    padding: 14px 16px;
    line-height: 1.35;
    font-size: 17px;
    text-align: left;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
    max-width: 280px;
    width: 100%;
  }

  section.component-bg-tooltip .fyx-tooltip-mobile-panels {
    position: absolute;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    pointer-events: auto;
    z-index: 4;
  }

  section.component-bg-tooltip .fyx-tooltip-panel-mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    transform: translateY(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  section.component-bg-tooltip .fyx-tooltip-panel-mobile.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  section.component-bg-tooltip .fyx-tooltip-panel-mobile::before {
    display: none;
  }
}

/* iPad: dos columnas entre 768px y 1079px */
@media (min-width: 768px) and (max-width: 1079px) {
  section.component-bg-tooltip {
    justify-content: center; /* centra el conjunto */
  }
  section.component-bg-tooltip p[data-x][data-y] {
    flex: 0 1 280px; /* dos columnas si hay ancho */
  }
}