/* CTRL MEDIA — CTA
   Contrato: CTA global persistente, con mutación visual por panel activo. */

.cm-cta-global {
  position: fixed;
  z-index: var(--cm-z-cta);
  left: 50%;
  bottom: calc(var(--cm-space-7) + var(--cm-safe-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cm-space-2);
  pointer-events: none;
}

/* CTA primary (New Liquid Glass siempre) */
.cm-cta-primary {
  pointer-events: auto;
  height: var(--cm-cta-h);
  padding: 0 var(--cm-cta-pad-x);
  border-radius: 999px;

  /* New Liquid Glass: más translúcido + tinte Control Media (indicio) */
  background:
    linear-gradient(180deg, var(--cm-tint-1), var(--cm-tint-2)),
    rgba(18, 22, 28, var(--cm-glass-a-liquid));

  border: 1px solid rgba(255,255,255,0.12);

  backdrop-filter: blur(var(--cm-blur-liquid));
  -webkit-backdrop-filter: blur(var(--cm-blur-liquid));

  /* Sombras más silenciosas (mismo ADN que NAV) */
  box-shadow:
    0 22px 70px rgba(0,0,0,0.52),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.22);

  color: rgba(255,255,255,0.92);
  font-size: var(--cm-text-sm);
  font-weight: var(--cm-font-weight-medium);

  transition:
    transform var(--cm-dur-2) var(--cm-ease),
    opacity var(--cm-dur-2) var(--cm-ease);
}

.cm-cta-primary:hover { transform: translateY(-1px); }

.cm-cta-primary:active {
  transform: translateY(0px) scale(0.99);
  opacity: 0.96;
}

/* Texto salida elegante (solo L4) */
.cm-cta-secondary {
  pointer-events: auto;
  display: block;
  text-align: center;

  margin-top: 6px;
  padding: 0;

  background: transparent;
  border: none;
  backdrop-filter: none;

  font-size: var(--cm-text-sm);
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.01em;

  opacity: 0;
  transition: opacity var(--cm-dur-2) var(--cm-ease);
}

/* CRITICAL: estos estados `body.is-l*-active` son contrato directo con `observer.js` y `state.js`. */

/* `body.is-l1-active`: anclaje central del CTA. */
body.is-l1-active .cm-cta-global {
  left: 50%;
  right: auto;
  bottom: calc(var(--cm-space-6) + var(--cm-safe-bottom));
  transform: translateX(-50%);
}

/* `body.is-l2-active` y `body.is-l3-active`: CTA a esquina inferior derecha. */
body.is-l2-active .cm-cta-global,
body.is-l3-active .cm-cta-global {
  left: auto;
  right: calc(var(--cm-space-5) + var(--cm-safe-right));
  bottom: calc(var(--cm-space-5) + var(--cm-safe-bottom));
  transform: none;
  align-items: flex-end;
}

@media (max-width: 520px) {
  body.is-l2-active .cm-cta-global,
  body.is-l3-active .cm-cta-global {
    bottom: calc(var(--cm-space-5) + var(--cm-safe-bottom) + 14px);
  }
}

/* `body.is-l4-active`: retorno a centro y habilitación de salida secundaria. */
body.is-l4-active .cm-cta-global {
  left: 50%;
  right: auto;
  bottom: calc(var(--cm-space-6) + var(--cm-safe-bottom));
  transform: translateX(-50%);
  align-items: center;
}

body.is-l4-active .cm-cta-secondary { opacity: 1; }

/* CTA secundario tipo pill visible solo en L4. */

.cm-cta-google {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;

  background:
    linear-gradient(180deg, var(--cm-tint-1), var(--cm-tint-2)),
    rgba(18, 22, 28, var(--cm-glass-a-liquid));

  border: 1px solid rgba(255,255,255,0.12);

  backdrop-filter: blur(var(--cm-blur-liquid));
  -webkit-backdrop-filter: blur(var(--cm-blur-liquid));

  box-shadow:
    0 18px 60px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.12);

  font-size: var(--cm-text-xs);
  color: rgba(255,255,255,0.78);

  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--cm-dur-2) var(--cm-ease),
    transform var(--cm-dur-2) var(--cm-ease);
}

/* Icon bubble */
.cm-google-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);

  font-size: 12px;
  font-weight: var(--cm-font-weight-semibold);

  /* G multicolor Google (real) */
  color: transparent;
  background-image:
    conic-gradient(
      #4285F4 0deg 90deg,
      #34A853 90deg 180deg,
      #FBBC05 180deg 270deg,
      #EA4335 270deg 360deg
    );
  -webkit-background-clip: text;
  background-clip: text;
}

.cm-google-text { letter-spacing: 0.01em; }

/* CRITICAL: depende de `body.is-l4-active` para sincronía narrativa con la lámina 4. */
body.is-l4-active .cm-cta-google {
  opacity: 1;
  transform: translateY(0);
}

/* Micro feedback */
.cm-cta-google:hover { transform: translateY(-1px); }

.cm-cta-google:active {
  transform: translateY(0) scale(0.99);
  opacity: 0.96;
}