/* ══════════════════════════════════════════════════════════════════
   MAGNIFIK TTS PLAYER
   Identidad: magnifik.co — negro profundo + verde #16E2BB
   Temas: dark (defecto) · gradient · light · mint · glass
   Se eligen con el atributo del shortcode: [gcloud_tts theme="light"]
   ══════════════════════════════════════════════════════════════════ */
.mgk-tts{
  /* ── tokens del tema por defecto (oscuro Magnifik) ── */
  --mgk-accent:         #16E2BB;
  --mgk-accent-soft:    rgba(22,226,187,.14);
  --mgk-border:         rgba(255,255,255,.09);
  --mgk-playing-border: rgba(22,226,187,.35);
  --mgk-text:           #f5f5f5;
  --mgk-text-dim:       rgba(245,245,245,.6);
  --mgk-pill-bg:        linear-gradient(135deg,#191919,#101010);
  --mgk-play-bg:        linear-gradient(135deg,#16E2BB,#10AB8D);
  --mgk-play-fg:        #062a1e;
  --mgk-play-shadow:       0 2px 10px rgba(22,226,187,.4);
  --mgk-play-shadow-hover: 0 2px 16px rgba(22,226,187,.6);
  --mgk-track:          rgba(255,255,255,.14);
  --mgk-fill:           linear-gradient(90deg,#10AB8D,#16E2BB);
  --mgk-fill-glow:      0 0 8px rgba(22,226,187,.5);
  --mgk-knob:           #fff;
  --mgk-rate-border:    rgba(22,226,187,.35);
  --mgk-rate-hover:     rgba(22,226,187,.28);

  width:100%;max-width:100%;
  font-family:'Poppins',system-ui,sans-serif;
}
.mgk-tts *{margin:0;padding:0;box-sizing:border-box}

/* ── Temas ─────────────────────────────────────────────────────────── */

/* Degradado verde → gris */
.mgk-tts.mgk-theme-gradient{
  --mgk-pill-bg:        linear-gradient(135deg,#17e2bb,#333232);
  --mgk-border:         rgba(255,255,255,.2);
  --mgk-playing-border: rgba(255,255,255,.55);
  --mgk-text:           #fff;
  --mgk-text-dim:       rgba(255,255,255,.85);
  --mgk-accent:         #ffffff;
  --mgk-accent-soft:    rgba(255,255,255,.18);
  --mgk-play-bg:        #ffffff;
  --mgk-play-fg:        #0d2b24;
  --mgk-play-shadow:       0 2px 8px rgba(0,0,0,.25);
  --mgk-play-shadow-hover: 0 2px 12px rgba(0,0,0,.35);
  --mgk-track:          rgba(255,255,255,.3);
  --mgk-fill:           #ffffff;
  --mgk-fill-glow:      none;
  --mgk-rate-border:    rgba(255,255,255,.45);
  --mgk-rate-hover:     rgba(255,255,255,.3);
}

/* Claro: fondo blanco, textos negros */
.mgk-tts.mgk-theme-light{
  --mgk-pill-bg:        #ffffff;
  --mgk-border:         rgba(0,0,0,.12);
  --mgk-playing-border: rgba(22,226,187,.6);
  --mgk-text:           #111111;
  --mgk-text-dim:       rgba(0,0,0,.55);
  --mgk-accent:         #0CA88A; /* verde más oscuro para contraste sobre blanco */
  --mgk-accent-soft:    rgba(22,226,187,.15);
  --mgk-play-shadow:       0 2px 8px rgba(22,226,187,.35);
  --mgk-play-shadow-hover: 0 2px 12px rgba(22,226,187,.5);
  --mgk-track:          rgba(0,0,0,.12);
  --mgk-fill-glow:      none;
  --mgk-rate-border:    rgba(12,168,138,.4);
  --mgk-rate-hover:     rgba(22,226,187,.25);
}

/* Verde sólido Magnifik */
.mgk-tts.mgk-theme-mint{
  --mgk-pill-bg:        #16E2BB;
  --mgk-border:         rgba(0,0,0,.1);
  --mgk-playing-border: rgba(0,0,0,.35);
  --mgk-text:           #06231c;
  --mgk-text-dim:       rgba(6,35,28,.7);
  --mgk-accent:         #06231c;
  --mgk-accent-soft:    rgba(0,0,0,.12);
  --mgk-play-bg:        #0a0a0a;
  --mgk-play-fg:        #16E2BB;
  --mgk-play-shadow:       0 2px 8px rgba(0,0,0,.3);
  --mgk-play-shadow-hover: 0 2px 12px rgba(0,0,0,.4);
  --mgk-track:          rgba(0,0,0,.2);
  --mgk-fill:           #0a0a0a;
  --mgk-fill-glow:      none;
  --mgk-rate-border:    rgba(0,0,0,.3);
  --mgk-rate-hover:     rgba(0,0,0,.2);
}

/* Cristal translúcido: deja ver el fondo de la página tras un blur */
.mgk-tts.mgk-theme-glass{
  --mgk-pill-bg:        rgba(15,15,15,.5);
  --mgk-border:         rgba(255,255,255,.2);
}
.mgk-tts.mgk-theme-glass .mgk-pill{
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* ── Cápsula: botón compacto → player a ancho completo ────────────── */
.mgk-tts .mgk-pill{
  display:flex;align-items:center;gap:10px;
  width:100%;max-width:250px;height:45px;
  padding:5px 14px 5px 5px;
  border-radius:999px;
  background:var(--mgk-pill-bg);
  border:1px solid var(--mgk-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:max-width .55s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .3s;
}
/* Expandido ocupa todo el contenedor; el tope alto en px permite animar el morph */
.mgk-tts.is-ready .mgk-pill{max-width:2000px}
.mgk-tts.is-playing .mgk-pill{border-color:var(--mgk-playing-border)}

/* Botón de play circular — constante durante el morph */
.mgk-tts .mgk-play{
  flex-shrink:0;display:grid;place-items:center;
  width:35px;height:35px;border-radius:50%;border:none;cursor:pointer;
  background:var(--mgk-play-bg);
  color:var(--mgk-play-fg);
  box-shadow:var(--mgk-play-shadow);
  transition:transform .2s, box-shadow .2s;
}
.mgk-tts .mgk-play:hover{transform:scale(1.07);box-shadow:var(--mgk-play-shadow-hover)}
.mgk-tts .mgk-play:active{transform:scale(.97)}
.mgk-tts .mgk-play svg{display:block}

/* Spinner (cargando / generando) */
.mgk-tts .mgk-spin{
  display:inline-block;
  width:16px;height:16px;border-radius:50%;
  border:2.5px solid rgba(0,0,0,.2);border-top-color:var(--mgk-play-fg);
  animation:mgkspin .8s linear infinite;
}
@keyframes mgkspin{to{transform:rotate(360deg)}}

/* Zona derecha: etiqueta y controles superpuestos → crossfade */
.mgk-tts .mgk-zone{position:relative;height:35px;flex:1;min-width:0}
.mgk-tts .mgk-label,
.mgk-tts .mgk-controls{
  position:absolute;inset:0;display:flex;align-items:center;
  transition:opacity .3s;
}
.mgk-tts .mgk-label{gap:8px}
.mgk-tts .mgk-label .txt{
  font-size:13px;font-weight:600;color:var(--mgk-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mgk-tts .mgk-label .sub{
  font-size:10.5px;font-weight:500;color:var(--mgk-accent);
  letter-spacing:.08em;text-transform:uppercase;
}
.mgk-tts .mgk-controls{gap:10px;opacity:0;pointer-events:none}
.mgk-tts.is-ready .mgk-label{opacity:0;pointer-events:none}
.mgk-tts.is-ready .mgk-controls{opacity:1;pointer-events:auto;transition-delay:.15s}

/* Botones ±5s */
.mgk-tts .mgk-skip{
  flex-shrink:0;display:grid;place-items:center;
  background:none;border:none;cursor:pointer;padding:4px;
  color:var(--mgk-text-dim);transition:color .2s;
}
.mgk-tts .mgk-skip:hover{color:var(--mgk-accent);background:none}

/* Tiempos */
.mgk-tts .mgk-time{
  flex-shrink:0;font-size:11px;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--mgk-text-dim);
}

/* Sliders (progreso y volumen) */
.mgk-tts .mgk-slider{position:relative;height:18px;cursor:pointer;touch-action:none}
.mgk-tts .mgk-slider .track,
.mgk-tts .mgk-slider .fill{
  position:absolute;top:50%;left:0;transform:translateY(-50%);
  height:5px;border-radius:3px;
}
.mgk-tts .mgk-slider .track{width:100%;background:var(--mgk-track)}
.mgk-tts .mgk-slider .fill{
  background:var(--mgk-fill);
  box-shadow:var(--mgk-fill-glow);
}
.mgk-tts .mgk-slider .knob{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  width:11px;height:11px;border-radius:50%;background:var(--mgk-knob);
  box-shadow:0 1px 5px rgba(0,0,0,.5);
  opacity:0;transition:opacity .2s;
}
.mgk-tts .mgk-slider:hover .knob{opacity:1}
.mgk-tts .mgk-progress{flex:1;min-width:40px}
.mgk-tts .mgk-vol-slider{width:58px;flex-shrink:0}

/* Chip de velocidad */
.mgk-tts .mgk-rate{
  flex-shrink:0;border:1px solid var(--mgk-rate-border);cursor:pointer;
  background:var(--mgk-accent-soft);color:var(--mgk-accent);
  font-family:inherit;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;
  line-height:1;padding:6px 9px;border-radius:999px;transition:background .2s;
}
.mgk-tts .mgk-rate:hover{background:var(--mgk-rate-hover);color:var(--mgk-accent)}

/* Volumen / mute */
.mgk-tts .mgk-mute{
  flex-shrink:0;display:grid;place-items:center;
  background:none;border:none;cursor:pointer;padding:4px;
  color:var(--mgk-text-dim);transition:color .2s;
}
.mgk-tts .mgk-mute:hover{color:var(--mgk-accent);background:none}

/* Error */
.mgk-tts .mgk-error{
  font-size:12.5px;color:#e05a5a;padding:8px 14px;
}

/* Responsive: en móvil se oculta solo el slider de volumen (queda el mute);
   los botones ±5s permanecen visibles y la barra gana área táctil */
@media (max-width:560px){
  .mgk-tts .mgk-vol-slider{display:none}
  .mgk-tts .mgk-controls{gap:6px}
  .mgk-tts .mgk-slider{height:30px}
}