/* ==========================================================================
   ESTILOS DE WIDGET DE TEMPORIZADOR EN HORIZONTAL (LLAMATIVO Y COMPACTO)
   ========================================================================== */
.btn-timer-container {
  --pc-primary: #6366f1; /* Violeta/Índigo */
  --pc-secondary: #ec4899; /* Rosa neón */
  --pc-bg-card: #0f172a; /* Slate 900 */
  --pc-text-main: #f8fafc; /* Blanco */
  --pc-text-muted: #94a3b8;
  --pc-accent-glow: rgba(99, 102, 241, 0.45);
  
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--pc-bg-card);
  border-radius: 40px; /* Forma de píldora */
  padding: 8px 16px;
  max-width: 290px; /* "Un chin" más ancho */
  margin: 16px auto;
  display: block; /* Centrado automático */
  
  /* Borde y sombra llamativos y brillantes */
  border: 1.5px solid rgba(99, 102, 241, 0.45);
  box-shadow: 0 10px 24px rgba(99, 102, 241, 0.22), 
              0 0 0 1px rgba(255, 255, 255, 0.05);
              
  position: relative;
  overflow: hidden;
  color: var(--pc-text-main);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.btn-timer-container * {
  box-sizing: border-box;
}

/* Fondo decorativo con gradiente */
.btn-timer-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.btn-timer-content {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   Fase 1: Botón "Ver capítulo completo" (Horizontal llamativo)
   ========================================================================== */
.btn-play-trigger {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  color: inherit;
  width: 100%;
}

.play-button-outer {
  width: 38px; /* "Un chin" más grande de 32px */
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 6px 15px rgba(236, 72, 153, 0.5); /* Brillo neón rosa más fuerte */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

/* Efecto onda pulsante */
.play-button-outer::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.65;
  animation: playPulse 2s infinite;
}

.play-icon-svg {
  width: 15px;
  height: 15px;
  fill: #ffffff;
  transform: translateX(1.5px);
}

.btn-play-trigger:hover .play-button-outer {
  transform: scale(1.1);
  box-shadow: 0 8px 18px rgba(236, 72, 153, 0.65);
}

.btn-timer-title {
  font-size: 14px !important; /* "Un chin" más grande */
  font-weight: 800; /* Extra negrita para que llame la atención */
  margin: 0 0 0 10px !important;
  letter-spacing: -0.2px;
  background: linear-gradient(to right, #ffffff, #e2e8f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.btn-timer-subtitle {
  display: none !important;
}

/* ==========================================================================
   Fase 2: Temporizador de Carga
   ========================================================================== */
.timer-loading-wrapper {
  display: none;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.3s ease;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.timer-circle-box {
  position: relative;
  width: 38px; /* "Un chin" más grande */
  height: 38px;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

.timer-svg {
  transform: rotate(-90deg);
  width: 38px;
  height: 38px;
}

.timer-bg-circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 8px;
}

.timer-progress-circle {
  fill: none;
  stroke: url(#timerGradient);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-dasharray: 263.89;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.1s linear;
}

.timer-number-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
}

.loading-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--pc-text-main);
  margin: 0 !important;
}

.loading-subtext {
  display: none !important;
}

/* ==========================================================================
   Fase 3: Contenedor Final
   ========================================================================== */
.timer-result-wrapper {
  display: none;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.3s ease;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.success-icon-box {
  width: 38px;
  height: 38px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0 !important;
  color: #10b981;
  flex-shrink: 0;
}

.success-icon-box svg {
  width: 16px;
  height: 16px;
}

.timer-result-wrapper .btn-timer-title {
  display: none !important;
}

.btn-action-reveal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 12.5px;
  padding: 7px 16px;
  border-radius: 50px;
  box-shadow: 0 5px 12px rgba(16, 185, 129, 0.3);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn-action-reveal:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 15px rgba(16, 185, 129, 0.45);
}

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */
@keyframes playPulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  70% {
    transform: scale(1.3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}