/* ═══════════════════════════════════════════════════════════════════
   TestGuardia.cl — Burbuja "Sigue por aquí"
   ═══════════════════════════════════════════════════════════════════

   El botón redondo de abajo a la derecha. Al abrirlo ofrece tres
   páginas del sitio al azar, para que quien termina de leer tenga
   adónde seguir en vez de cerrar la pestaña.

   TRES DECISIONES QUE NO SON CAPRICHO
   ---------------------------------------------------------------
   1. Es un <details>, no un <div> con JavaScript. Así abre y cierra
      solo, sin que tg-burbuja.js haya llegado siquiera. Sin JS se ven
      los tres enlaces que el script de construcción escribió dentro
      del HTML; con JS, además, se barajan y aparece "Otras tres".

   2. z-index:400. Encima del contenido y del menú (200), DEBAJO de
      los modales del sitio (500: la arena de juegos.html, el panel de
      presupuesto de finanzas.html). Si subiera de 500, la burbuja
      flotaría sobre el modal abierto. No tocar este número sin mirar
      antes esos dos archivos.

   3. La barra fija de anuncios (.tg-fijo, z-index 9998) ocupa el
      mismo rincón cuando aparece a los 600 px de scroll. No se pelean:
      tg-burbuja.js mide esa barra y sube la burbuja escribiendo
      --tg-burbuja-abajo. Aquí solo se lee esa variable.

   Los colores salen de las variables del sitio (--surface, --accent,
   --border...), que cada página define en su :root. Por eso funciona
   igual en el tema oscuro y en el claro sin una sola línea extra.
   ═══════════════════════════════════════════════════════════════════ */

.tg-burbuja{
  position:fixed;
  right:14px;
  bottom:calc(14px + var(--tg-burbuja-abajo, 0px) + env(safe-area-inset-bottom, 0px));
  z-index:400;
  transition:bottom .25s ease, opacity .2s ease, transform .2s ease;
}

/* Mientras no se baja un poco, estorba. La clase la pone el JS al
   arrancar: si el JS no llega, la burbuja se ve desde el principio,
   que es preferible a no verse nunca. */
.tg-burbuja--esperando:not(.tg-burbuja--visible){
  opacity:0;
  transform:translateY(12px) scale(.9);
  pointer-events:none;
}

/* ─── Dentro de la app, más arriba ───────────────────────────────
   No es capricho ni estética: es política de AdMob.

   En la app, el banner de AdMob es una vista NATIVA que va justo debajo
   del WebView. O sea que el borde inferior de esta página es el borde
   superior del anuncio. Una burbuja a 14 px de ahí queda a menos de un
   dedo del banner, y ese es exactamente el caso de "clics accidentales"
   que AdMob prohíbe — con el agravante de que ese banner inferior es el
   37% de los ingresos de la aplicación.

   64 px separan de sobra (la yema de un dedo mide unos 45). Si algún día
   se toca este número, que sea hacia arriba, nunca hacia abajo. */
html.tg-app .tg-burbuja{
  bottom:calc(64px + var(--tg-burbuja-abajo, 0px) + env(safe-area-inset-bottom, 0px));
}

/* ─── El botón redondo (es el <summary>) ─────────────────────────── */
.tg-burbuja__boton{
  list-style:none;              /* mata el triangulito del <details> */
  cursor:pointer;
  width:52px; height:52px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent, #e6a817);
  color:var(--on-accent, #000);
  box-shadow:var(--shadow, 0 4px 16px rgba(0,0,0,.45));
  transition:transform .15s ease, filter .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.tg-burbuja__boton::-webkit-details-marker{ display:none }
.tg-burbuja__boton::marker{ content:"" }
.tg-burbuja__boton:hover{ transform:scale(1.06) }
.tg-burbuja__boton:active{ transform:scale(.96) }
.tg-burbuja__boton:focus-visible{
  outline:3px solid var(--accent2, #f0c046);
  outline-offset:3px;
}
.tg-burbuja__icono{
  width:26px; height:26px;
  display:block;
  transition:transform .25s ease;
}
.tg-burbuja[open] .tg-burbuja__icono{ transform:rotate(135deg) }

/* ─── El panel ───────────────────────────────────────────────────── */
.tg-burbuja__panel{
  position:absolute;
  right:0;
  bottom:64px;                  /* 52 del botón + 12 de aire */
  width:min(304px, calc(100vw - 28px));
  box-sizing:border-box;
  background:var(--surface, #161b22);
  border:1px solid var(--border, #30363d);
  border-radius:14px;
  box-shadow:var(--shadow, 0 4px 16px rgba(0,0,0,.45));
  padding:12px 12px 10px;
  animation:tg-burbuja-entra .18s ease-out;
}
@keyframes tg-burbuja-entra{
  from{ opacity:0; transform:translateY(8px) }
  to  { opacity:1; transform:none }
}

.tg-burbuja__titulo{
  font-family:'Barlow Condensed', 'Barlow', sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--accent, #e6a817);
  margin:0 0 8px;
}

.tg-burbuja__lista{
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-direction:column; gap:4px;
}
.tg-burbuja__lista a{
  display:block;
  padding:9px 10px;
  border-radius:9px;
  text-decoration:none;
  color:var(--text, #e6edf3);
  transition:background .15s ease;
}
.tg-burbuja__lista a:hover,
.tg-burbuja__lista a:focus-visible{
  background:var(--accent-soft, rgba(230,168,23,.10));
}
.tg-burbuja__lista b{
  display:block;
  font-size:15px;
  line-height:1.3;
  font-weight:600;
}
.tg-burbuja__lista span{
  display:block;
  margin-top:2px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted, #9aa4af);
}

/* "Otras tres" — el JS le quita el hidden. Sin JS no existe, porque
   sin JS no hay nada que barajar. */
.tg-burbuja__otras{
  margin-top:8px;
  width:100%;
  min-height:38px;
  padding:8px 10px;
  border:1px dashed var(--border, #30363d);
  border-radius:9px;
  background:transparent;
  color:var(--muted, #9aa4af);
  font-family:'Barlow Condensed', 'Barlow', sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.tg-burbuja__otras:hover{
  color:var(--text, #e6edf3);
  border-color:var(--accent, #e6a817);
}

/* ─── Pantallas pequeñas ─────────────────────────────────────────── */
@media (max-width:600px){
  .tg-burbuja{ right:12px }
  .tg-burbuja__boton{ width:48px; height:48px }
  .tg-burbuja__icono{ width:24px; height:24px }
  .tg-burbuja__panel{ bottom:60px }
}

/* Pantallas muy bajas (móvil en horizontal): el panel no puede pasarse
   de alto o tapa la página entera. */
@media (max-height:520px){
  .tg-burbuja__panel{
    max-height:calc(100vh - 90px);
    overflow-y:auto;
  }
}

@media print{ .tg-burbuja{ display:none } }

@media (prefers-reduced-motion:reduce){
  .tg-burbuja,
  .tg-burbuja__boton,
  .tg-burbuja__icono,
  .tg-burbuja__panel{ transition:none; animation:none }
}