/* =========================================
   LLAMADA — caja de texto de la narrativa (todas las escenas)
   HTML en cada narrativa-eN.ejs (no hay partial). Tipografía: .texto-* en el HTML.
   Color de borde: el del componente (--color-contraste-oscuro); no pisarlo en la escena.
   Incluye .llamada-compuesta y .llamada--difuso.
   ========================================= */

.llamada {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espacio-regular) var(--espacio-medio);
  background-color: var(--color-alto-contraste-claro);
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-chico);
  box-sizing: border-box;
  /* Sin pointer-events: none: el tap debe abrir el menú de pausa.
     La selección se corta aquí, no el clic. */
  user-select: none;
  -webkit-user-select: none;
}

.llamada__texto {
  color: var(--color-contraste-oscuro);
  text-align: center;
}

/* Variante Difuso: elipse blanca desenfocada detrás del texto */
.llamada--difuso {
  background: none;
  border: none;
  padding: var(--espacio-medio);
  isolation: isolate;
}

.llamada--difuso .llamada__elipse {
  position: absolute;
  inset: 0;
  background-color: var(--color-alto-contraste-claro);
  border-radius: 50%;
  filter: blur(13px); /* 13px INTENCIONAL (ajuste manual) */
  z-index: -1;
}

.llamada--difuso .llamada__texto {
  position: relative;
  z-index: 1;
}

/* Variante Circular (escenas futuras) */
.llamada--circular {
  background: none;
  border: none;
  padding: var(--espacio-medio);
  isolation: isolate;
}

.llamada--circular .llamada__elipse {
  position: absolute;
  inset: 0;
  background-color: var(--color-alto-contraste-claro);
  border-radius: 50%;
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  z-index: -1;
}

/* Variante Grande: el HTML usa .texto-llamada-grande; aquí solo el padding */
.llamada--grande {
  padding: var(--espacio-regular) var(--espacio-medio);
}

.llamada--grande.llamada--circular,
.llamada--grande.llamada--difuso {
  padding: var(--espacio-largo);
}

/* Variante compuesta: vector irregular + subcajas que coinciden con
   cada rectángulo del boolean. El texto se centra con flex (no x/y de Figma).
   La geometría de cada __caja es de la escena (viewBox del SVG). */
.llamada-compuesta {
  position: absolute;
  user-select: none;
  -webkit-user-select: none;
}

.llamada-compuesta__vector {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.llamada-compuesta__caja {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--espacio-regular) var(--espacio-medio);
  text-align: center;
  color: var(--color-contraste-oscuro);
}

.llamada-compuesta__caja > * {
  display: inline-block;
  max-width: 100%;
}