/* Dos cosas que van en TODAS las pantallas (por eso viven en las dos bases):

   1) El texto de la web no se puede seleccionar ni copiar. Se deja escapar lo
      que el usuario necesita escribir o copiar de verdad: campos de formulario,
      cajas editables (el chat, los deberes) y cualquier cosa marcada a mano con
      .pbc-copyable (por ejemplo el enlace de una sala de vídeo).
   2) Las burbujas del ajolote que salen al hacer clic (el dibujo lo pinta
      static/js/pbc-burbujas-ajolote.js; aquí sólo está el aspecto). */

/* ---------- 1. Texto no copiable ---------- */

html,
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* iPhone: sin el menú "Copiar / Buscar" al dejar el dedo apoyado */
  -webkit-touch-callout: none;
}

/* Escritura y copia de verdad: aquí SÍ se selecciona. */
input,
textarea,
select,
option,
[contenteditable="true"],
[contenteditable=""],
.pbc-copyable,
.pbc-copyable * {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* El chat es la excepción (decisión de Guille, 13/08): ahí la gente copia
   enlaces, direcciones y trozos de mensaje, y quitarlo sería un estorbo. Vale
   para la lista de mensajes, los hilos y el chat antiguo de mensajes directos. */
#cchatScroll,
#cchatScroll *,
#ccThreadList,
#ccThreadList *,
#messages,
#messages * {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Arrastrar una imagen es otra forma de llevarse el contenido. */
img:not(.pbc-copyable) {
  -webkit-user-drag: none;
  user-drag: none;
}

/* ---------- 2. Burbujas del ajolote ---------- */

/* Capa de las burbujas: por encima de todo y siempre "transparente" al ratón,
   para no robar ni un clic a los botones que hay debajo. */
.pbc-burbujas-capa {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

.pbc-burbuja {
  position: absolute;
  width: var(--pbc-burbuja-tam, 26px);
  height: var(--pbc-burbuja-tam, 26px);
  margin-left: calc(var(--pbc-burbuja-tam, 26px) / -2);
  margin-top: calc(var(--pbc-burbuja-tam, 26px) / -2);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.55);
  background-image: var(--pbc-burbuja-img);
  background-size: 78%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), inset 0 0 0 2px rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(1px);
  opacity: 0;
  will-change: transform, opacity;
  animation: pbc-burbuja-sube var(--pbc-burbuja-dur, 1100ms) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes pbc-burbuja-sube {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.3);
  }
  18% {
    opacity: 1;
    transform: translate3d(calc(var(--pbc-burbuja-x, 0px) * 0.25), calc(var(--pbc-burbuja-y, -60px) * 0.2), 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--pbc-burbuja-x, 0px), var(--pbc-burbuja-y, -60px), 0) scale(0.85);
  }
}

/* Quien pide menos movimiento en su móvil u ordenador no ve nada de esto. */
@media (prefers-reduced-motion: reduce) {
  .pbc-burbujas-capa {
    display: none;
  }
}

/* ---------- 3. Frase del menú, justo antes de "Book a class" ---------- */

.nav-cta-tagline {
  max-width: 190px;
  margin-right: 10px;
  font-size: 0.72rem;
  line-height: 1.25;
  font-weight: 600;
  color: #6b7280;
  text-align: right;
}

/* En pantallas justas la frase estorbaría a los botones: se esconde y sólo
   queda la del menú de móvil. */
@media (max-width: 1279px) {
  .nav-cta-tagline {
    display: none;
  }
}

.v2-mobile-tagline {
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.35;
  font-weight: 600;
  color: #6b7280;
  text-align: center;
}